像素画教程：横版解谜射击游戏角色动画详解
来源：SLYNYRD Pixelblog - 60[1] | 作者：Raymond Schlitter前言
大家好呀！今天又来和大家分享一篇超棒的像素画教程～
这次的主题是横版解谜射击游戏（Run 'N Gun）的角色动画设计！
说到横版射击，我脑海里第一个蹦出来的就是《魂斗罗》这种经典游戏！
那种一边狂奔一边突突突的爽快感，真的是游戏史上最棒的发明之一
这篇教程来自我最爱的像素画大神 SLYNYRD，他用 NES 调色板做了一个超完整案例—包括男女主角的全套动画（走路、跑步、跳跃、射击）还有背景场景设计。
最重要的是，全部都是在超小的尺寸（8x16 像素基准）下完成的！这种"小而美"的功力真的太值得学习了～
什么是横版射击游戏？
简单来说，只要允许玩家边跑边射击的游戏都可以叫横版射击。
但细分的话，像《魂斗罗》是横版卷轴带平台跳跃，而《怒》是俯视视角没有跳跃。
真正定义这个类型的核心要素是：
- 角色在滚动关卡中前进
- 催促玩家保持移动
- 射击敌人 + 躲避各种攻击
完整的角色动画演示，包括走路、跑步、跳跃和射击
这次教程聚焦在横版视角（像魂斗罗那样），所以我们会学习如何将射击动作和各种移动方式组合起来！
第一步：制作素体模型
标准工作流程是从素体模型（Dummy）开始。
用 8x8 像素画惯了之后，8x16 像素简直是大豪宅！居然能表现出相当真实的解剖结构～
小技巧：小尺寸角色可以直接画走路循环 因为走路/跑步循环是角色动画的基础，它决定了角色的表达方式和流畅度标准，其他动画都要跟它保持一致。
走路动画
用8 帧来做走路动画。
男性 Dummy 模型的全套动画展示
如果尺寸允许，8 帧能表现所有角色核心姿势——contact（接触）、down（下压）、pass（经过）、up（抬起），这些都是传统动画大师（比如《动画师生存手册》） 的标准。
跑步动画
跑步是在走路模型基础上修改的：
- 头和躯干向前倾斜
- 加大步幅
- 加快播放速度
关键细节：向前倾斜的姿势 + 头稍微低下，还要注意和走路相比，跑步有腾空帧。身体的起伏也比走路更大。
持枪移动
做好基础走路和跑步后，就可以做持枪版本了。方法很简单：把每帧的手臂去掉，替换成握枪的手臂。
大部分工作其实都已经完成了。
将上半身和下半身拆开处理。就可以重复利用。
不同移动状态下的持枪姿势组合
移动射击
要实现边移动边射击，必须把腿部和躯干切分成独立图层。这样腿部可以持续播放各种动画，不受上半身动作影响。
看站立和蹲下姿势就知道，射击动画包含 3 帧。而且所有允许线性移动的动画（走路、跑步、跳跃）的每一帧都要提供相同或类似的 3 帧射击姿势。
跳跃动画
跳跃动画最少只需要1 帧——通常是四肢蜷缩的姿势（有点像空中蹲下），这种姿势很适合表现跳跃。
我在 Castlevania 研究[3] 中发现，跳跃和蹲下是同一个姿势！
你可能会期待有角色起跳前弯膝盖的准备动作。但大多数游戏中你不希望有这种预备姿势。既然是横版射击主题，跳跃就是立即生效的。
着陆动画
加了一个着陆姿势，复用蹲下姿势。
播放速度参考
帧速（毫秒）：
- 待机，行走 - 120/每帧
- 跑，射击, - 60/每帧
女性 Dummy 模型的全套动画展示
女性角色遵循同样的模型。女性靠下盘和核心力量来控制长枪的重量，不射击时向下握枪。注意手臂和腿部的运动轨迹。
第二步：完整角色设计
男性完整角色设计，带服装和武器
确立素体模型后，完成角色设计主要是给每一帧素体穿上衣服。
通常我不推荐黑色轮廓线，但在这个尺寸达到角色中黑色轮廓线表现很好，和 NES 调色板很配。
女性完整角色设计，长发飘飘
女性角色有长发，服装在肩膀处稍微晃动。
和男性一样，头发在跑步和跳跃时也会晃动。
另外，在射击动作中也加了头发晃动。
这些微小的动画循环会使角色更加鲜活。
第三步：背景场景设计
完整的地下实验室场景动画
搞定所有动画之后，来做游戏场景。
Tiles瓦片 是 8x8 像素，游戏假图的目标分辨率是 320x180 像素。
这个尺寸是 16:9 比例，能完美缩放到高清尺寸。
Tile 瓦片设计过程分解
前两行展示了制作关卡 场景所需的核心瓦片。
首先展示的 3x3 瓦片 最基础，可以拼出地面和 墙壁。
其次的 4x4 tile 瓦片 提供拼接瓦片，这是连接 'L' 形场景必需的。用这 12 个 tiles 就能 拼接出 各种关卡设计。
全屏 16:9 假图，原生分辨率 320×180 像素
教程精彩瞬间回顾
如果你喜欢这篇教程，关注我们，后续可阅读更多教程～
来源与资源
原文作者：Raymond Schlitter（SLYNYRD）
原文链接：Pixelblog - 60 - Side View Run 'N Gun[4]
Raymond 的 Patreon 提供更多资源下载，包括教程中的源文件和商业使用授权的资产包。喜欢他的作品可以考虑支持一下～
以上就是今天的像素画教程分享！希望大家喜欢这个超详细的角色动画分解。如果你也尝试做了类似的动画，欢迎和我分享！下次见～
参考资料
SLYNYRD Pixelblog - 60: https://www.slynyrd.com/blog/2026/1/26/side-view-run-n-gun
Pixelblog 50: /blog/2024/5/24/pixelblog-50-human-walk-cycle
Castlevania 研究: /blog/2022/3/19/pixelblog-37-classic-castlevania-study
Pixelblog - 60 - Side View Run 'N Gun: https://www.slynyrd.com/blog/2026/1/26/side-view-run-n-gun
热门跟贴