【风农翻译】开始画像素画 #3

发表时间:2020-08-18 12:01:00 作者:编辑部 来源:游戏王国 浏览:

在上一篇文章中,小编为您详细介绍了关于《腾讯收购法国游戏厂商Voodoo部分股权》相关知识。本篇中小编将再为您讲解标题【风农翻译】开始画像素画 #3。

开始画像素画
这是来自佩德罗・梅代鲁斯(Pedro Medeiros,@saint11)授权的一系列像素美术教程,由风农翻译整理。

佩德罗・梅代鲁斯最为知名的作品莫过于《塞莱斯特山(蔚蓝,Celeste)》,不过他持续在网络上发布的像素美术教程也同样相当知名。这里选择的教程就是经过风农翻译整理内容。

相关链接:

Pedro Medeiros@Patreon
风农@indienova
风农@bilibili 专栏

简单的 Aseprite 动画。这是系列的第 3 篇。


什么是动画?


动画分解



动画是由一系列表现动作流程图像,按特定顺序播放,所引起的运动错觉。我们的工作就是让这个序列看起来尽可能让人信服。

时间轴

首先我们要了解时间轴。它是一种在单个文件里表现多个图像的方法。每一列都是完整的图像,有一个编号,我们称之为帧。



新建帧的最简单方法是按 ALT + B。这会在当前选中帧的后面新建一个空白帧,然后选择它。你可以点击某帧来选中,或者按',','.'改变选中帧,在键盘上找 <>,比较好记。

试着在不同帧上画些颜色,点击播放(Enter 键,回车)。也可以在预览窗口看,按 F7。


预览窗口


你可能感觉“这么多快捷键我怎么记得住”,没关系。记住快捷键需要时间跟肌肉记忆,而且大部分也都可以只用鼠标完成。当你记不住某个快捷键,就在菜单里找找,或者查看 Aseprite 的官方键位参考图:https://www.aseprite.org/quickref/

一个非常简单的动画

画动画有非常多的技巧,比如应该按什么顺序绘制每帧,如何优化,不过我们暂时先讲我了解的最简单的一个技巧:一个“连续动作(straight-ahead)”的弹球动画。“连续动作”是指我们按顺序一帧一帧直接画,而不是先画出重要帧,再添加中间帧的方式。先建个 32 乘 32 的文件,随便选个调色盘。


连续动作示例




关键动作法需要你先画出关键帧再填充中间部分


动画第一帧我称之为“静止”。它既是概念图,定义动画的风格,也是这个序列的停止位置。


第一帧


你要注意这帧里添加的细节,因为下一帧也要保持相同的风格。

接着复制这一帧(ALT + N),把它向上移动 4 像素,像这样:


第二帧


之后,继续向上 3 像素,2 像素,1 像素,多保持相同位置一帧,后面反过来一遍。


全部帧


节奏

尽管节奏的运用是个相当复杂的主题,甚至可以做一整期专门的教程,我现在简单的从技术方面讲一点,让你可以自己去试试。

我们来添加一些节奏。球在落地后停一段时间,再跳起来。要增加某一帧的持续时间,右键 点击帧上的数字,选择帧属性(Frame Properties)。然后你可以输入你想要这帧持续的时间。我们试下 300 毫秒。



你也可以选中多个帧,同时修改持续时间。对于一次性快速修改整个动画的速度很有帮助。

挤压和拉伸

这里我们可以做的一个简单改进是添加一点挤压和拉伸,一种让动作看起来更流畅自然的技术。包括沿着运动方向拉伸或者压扁物体,同时保持整体面积。

具体原理可以参考之前的教程:

【风农翻译】像素宝典 #8 动态模糊、挤压和拉伸、子弹

我们复制下第一帧,把它水平拉伸,垂直方向上压扁,保持整体体积。保持体积是很重要的,这样物体不会看起来变小或者变大了。当然这属于在我们更有经验之后可以尝试打破的规则,不过暂时还是遵守它。这帧也被称作“准备帧”,主要用来让下一帧发生的动作看起来更强烈。


挤压来预示跳跃


现在我们用同样方式复制并修改球落地时的帧,可以画的更加夸张点。


落地


最后是垂直拉伸(同时水平挤压)跳起的第一帧和下落的最后一帧,当球速度最快的时候。这就完成了,我们看下结果:


完成版




优化后的动画




一个跳跃循环,移除了静止和准备帧

保存动画

尽管保存成 .aseprite 格式可以保存动画,你可能想要把动画导出,发到网上或者用到游戏里。

网上,最简单的方式是保存成 gif,用 FIle > Export... 命令。勾选 Export for twitter, 如果你想把最后一帧修改成 1/4 的持续时间,这样即使 Twitter 把它转成 MP4 也可以完美播放。

当导出给游戏使用时,通常会保存成 png,动画一般会分解成一个精灵表或者图像序列。要保存成图像序列,选择导出为 png 格式,导出的文件后都带一个数字,像是“bounce00.png”。这回导出多个文件,像“bounce01.png”,“bounce02.png”等等。

有的引擎需要精灵表的形式,不需要手工处理,只要选择 File>Export Sprite Sheet,可以改改设置,有很多参数可选。

接下来

接下来我建议多试试时间轴,试着画点别的动画。你可以看看我其他的教程,选个感兴趣的跟着画画。

另外也可以试试经典的初学者练习,画一个面粉袋走和跳的动画:

https://www.youtube.com/watch?v=C8cbTGshkZw。

暂时保持低一点的分辨率和颜色数,不要太复杂了。

作者:Pedro Medeiros
译者:风农
来源:INDIENOVA
地址:https://indienova.com/indie-game-development/saint11-making-pixel-art-3/


编后语:关于《【风农翻译】开始画像素画 #3》关于知识就介绍到这里,希望本站内容能让您有所收获,如有疑问可跟帖留言,值班小编第一时间回复。 下一篇内容是有关《《Dota2》至宝投票8强出炉巫医以35万票微弱优势险胜卓尔游侠》,感兴趣的同学可以点击进去看看。

资源转载网络,如有侵权联系删除。

相关资讯推荐

相关应用推荐

玩家点评

条评论

热门下载

  • 手机网游
  • 手机软件

热点资讯

  • 最新话题