像素画逐帧动画研究:马里奥

乐活   2025-02-04 16:46   四川  

摘要:像素画逐帧动画研究:马里奥


本文概览

  • 1、结论
  • 2、NES/FC(任天堂8位机):马里奥
  • 3、参考马里奥:制作3帧行走动画

1、结论

从马里奥入手,学习像素画逐帧动画。


掌握FC游戏角色动画制作之后,再学习难度更大的SFC游戏角色动画,仍然以马里奥为案例。


这样你可以清晰的看到,同一款游戏主角随着游戏主机性能的提升,同一个像素画游戏角色,细节是如何进化的?品质又是如何提升的?


像素画的质量,很尺寸大小,颜色数量关系不大,但是和细节关系很大。

1.1、NES/FC和SNES/SFC的差别


在教程开始之前,先了解下NES/FC和SNES/SFC的差别:


主机分辨率颜色数量角色尺寸上限
NES/FC256x240像素3个+透明色8x8/8x16像素
SNES/SFC256x224像素15个最小16x16像素

由此可知,像素画游戏角色的尺寸和登录的主机紧密相关。


2、NES马里奥

NES马里奥美术资源,可以在Sprites-resource.com上获取。

NES马里奥

可以看到一张图片就包含了NES/FC马里奥角色所有的动画帧。


注意可以发射子弹的白色背带裤马里奥,以及2P绿色马里奥,都是通过替换颜色板数据来实现的,无需额外增加图片。

2.1、游戏角色基本动画


NES马里奥游戏角色基本动画包含:

  • idle:待机
  • walk/run:行走/奔跑
  • jump:跳
  • hurt:受伤
  • dead:死亡
  • squat:下蹲
  • up/down:爬上/爬下
  • swim:游泳
  • attack:攻击
  • slide:滑步(这个动作很细腻,模拟跑太快停止时的惯性)
  • 贴墙:水下贴墙动作

另外马里奥有2个形态:

16x16
  • small:正常形态 16x16像素

极简像素画,整个角色只有3个颜色(红、黄、绿)。

16x32
  • 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帧,但是效果是拉满的。几十年过去,现在看这个动画,依然是无懈可击的!完美!


3帧行走动画序列帧

5帧游泳
  • swim:游泳

NES马里奥最复杂的动画是游泳!一共有5帧。

动的部分只有手臂和脚,头部,身体都是不动的,学到了。

3、参考马里奥:制作3帧行走动画

先按照马里奥的风格,画一个自己的极简小人(站立帧),只能使用3个颜色。

极简小人

只有3个颜色,真的没有施展空间。

头发我想用红头发,想起樱木花道,红头发比较适合当主角。

皮肤是肉色,这样只剩1个颜色了,选1个篮紫色压一压,不然这个角色太轻飘飘了,而且眼睛用暗一些的颜色比较合适。(马里奥用的橄榄绿)

发型的话,其实我想画平头,留一撮毛在额头好了。


鞋子和裤子没啥创新的,和马里奥一样。

手臂我想露出来,衣服改成背心,再加一个红内衣。


站立帧有了,接着画行走帧。

3.2、行走动画小知识


迈腿帧
  • 迈腿帧,已迈出,单腿弯曲,此时角色高度最高
落地帧
  • 落地帧,迈出的腿落地,另一腿抬起,此时角色高度最低
过渡帧
  • 过渡帧,单腿站直,另一腿提起准备迈出,此时角色高度居中

这一步没啥说的了,参考马里奥,把刚才画好的小人行走帧画出来。


pario


教你画像素画
我是像素熊老师,分享像素画教程,自由职业,数字写作,知识管理,ai效率工具等内容。欢迎关注。链接 vx: pixelfish
 最新文章