摘要:像素画逐帧动画研究:马里奥
本文概览
1、结论 2、NES/FC(任天堂8位机):马里奥 3、参考马里奥:制作3帧行走动画
1、结论
从马里奥入手,学习像素画逐帧动画。
掌握FC游戏角色动画制作之后,再学习难度更大的SFC游戏角色动画,仍然以马里奥为案例。
这样你可以清晰的看到,同一款游戏主角随着游戏主机性能的提升,同一个像素画游戏角色,细节是如何进化的?品质又是如何提升的?
像素画的质量,很尺寸大小,颜色数量关系不大,但是和细节关系很大。
1.1、NES/FC和SNES/SFC的差别
在教程开始之前,先了解下NES/FC和SNES/SFC的差别:
主机 | 分辨率 | 颜色数量 | 角色尺寸上限 |
---|---|---|---|
NES/FC | 256x240像素 | 3个+透明色 | 8x8/8x16像素 |
SNES/SFC | 256x224像素 | 15个 | 最小16x16像素 |
由此可知,像素画游戏角色的尺寸和登录的主机紧密相关。
2、NES马里奥
NES马里奥美术资源,可以在Sprites-resource.com上获取。
可以看到一张图片就包含了NES/FC马里奥角色所有的动画帧。
注意可以发射子弹的白色背带裤马里奥,以及2P绿色马里奥,都是通过替换颜色板数据来实现的,无需额外增加图片。
2.1、游戏角色基本动画
NES马里奥游戏角色基本动画包含:
idle:待机 walk/run:行走/奔跑 jump:跳 hurt:受伤 dead:死亡 squat:下蹲 up/down:爬上/爬下 swim:游泳 attack:攻击 slide:滑步(这个动作很细腻,模拟跑太快停止时的惯性) 贴墙:水下贴墙动作
另外马里奥有2个形态:
small:正常形态 16x16像素
极简像素画,整个角色只有3个颜色(红、黄、绿)。
big:吃完蘑菇变大形态 16x32像素
所有需要2套动作图。如果你要做一个标准的像素画游戏,需要制作的角色动画只会多不会少。类似我昨天做的大鱼吃小鱼属于小游戏,动画就没那么多。
2.2、1帧动画
1帧动画=没有动画?
idle:待机 jump:跳 dead:死亡 squat:下蹲 slide:滑步 attack:攻击
上面6个都是1帧动画,但是不代表没有动画。因为可以用代码来移动这1帧产生动画。
比如跳,虽然只有1帧,当玩家按跳跃B键,马里奥就会在代码的作用起跳。如果起跳之前,正在按住A奔跑,则会跳的更高更远。
借用其他帧。
起跳和落地都借用了idle站立/待机帧。
hurt:受伤
受伤动画只会出现在马里奥的变大形态,被怪物或陷阱碰到,马里奥就会闪烁之后变小。严格来说受伤动画为0帧,只是在变大形态和正常形态之间闪烁,借用了2帧。
2.3、2帧动画
up/down:爬上/爬下
爬上爬下共用1个动画,有2帧,需要通过代码移动实现爬上爬下效果。
可以看到马里奥的头部是不变的,在制作像素画逐帧动画的时候,不变的身体部件可以复制粘贴,减少工作量。
2.4、多帧动画
大于2帧的都归到多帧动画。
walk/run:行走/奔跑
NES马里奥的行走/奔跑共用1个动画,只有3帧,但是效果是拉满的。几十年过去,现在看这个动画,依然是无懈可击的!完美!
swim:游泳
NES马里奥最复杂的动画是游泳!一共有5帧。
动的部分只有手臂和脚,头部,身体都是不动的,学到了。
3、参考马里奥:制作3帧行走动画
先按照马里奥的风格,画一个自己的极简小人(站立帧),只能使用3个颜色。
只有3个颜色,真的没有施展空间。
头发我想用红头发,想起樱木花道,红头发比较适合当主角。
皮肤是肉色,这样只剩1个颜色了,选1个篮紫色压一压,不然这个角色太轻飘飘了,而且眼睛用暗一些的颜色比较合适。(马里奥用的橄榄绿)
发型的话,其实我想画平头,留一撮毛在额头好了。
鞋子和裤子没啥创新的,和马里奥一样。
手臂我想露出来,衣服改成背心,再加一个红内衣。
站立帧有了,接着画行走帧。
3.2、行走动画小知识
迈腿帧,已迈出,单腿弯曲,此时角色高度最高
落地帧,迈出的腿落地,另一腿抬起,此时角色高度最低
过渡帧,单腿站直,另一腿提起准备迈出,此时角色高度居中
这一步没啥说的了,参考马里奥,把刚才画好的小人行走帧画出来。