"像素画教程：横版解谜射击游戏角色动画详解"

像素画教程：横版解谜射击游戏角色动画详解

来源：SLYNYRD Pixelblog - 60[1] | 作者：Raymond Schlitter

大家好呀！今天又来和大家分享一篇超棒的像素画教程～

这次的主题是横版解谜射击游戏（Run 'N Gun）的角色动画设计！

说到横版射击，我脑海里第一个蹦出来的就是《魂斗罗》这种经典游戏！

那种一边狂奔一边突突突的爽快感，真的是游戏史上最棒的发明之一

这篇教程来自我最爱的像素画大神 SLYNYRD，他用 NES 调色板做了一个超完整案例—包括男女主角的全套动画（走路、跑步、跳跃、射击）还有背景场景设计。

最重要的是，全部都是在超小的尺寸（8x16 像素基准）下完成的！这种"小而美"的功力真的太值得学习了～

什么是横版射击游戏？

简单来说，只要允许玩家边跑边射击的游戏都可以叫横版射击。

但细分的话，像《魂斗罗》是横版卷轴带平台跳跃，而《怒》是俯视视角没有跳跃。

真正定义这个类型的核心要素是：

• 角色在滚动关卡中前进
• 催促玩家保持移动
• 射击敌人 + 躲避各种攻击

完整的角色动画演示，包括走路、跑步、跳跃和射击

这次教程聚焦在横版视角（像魂斗罗那样），所以我们会学习如何将射击动作和各种移动方式组合起来！

第一步：制作素体模型

标准工作流程是从素体模型（Dummy）开始。

用 8x8 像素画惯了之后，8x16 像素简直是大豪宅！居然能表现出相当真实的解剖结构～

小技巧：小尺寸角色可以直接画走路循环 因为走路/跑步循环是角色动画的基础，它决定了角色的表达方式和流畅度标准，其他动画都要跟它保持一致。

走路动画

用8 帧来做走路动画。

男性 Dummy 模型的全套动画展示

如果尺寸允许，8 帧能表现所有角色核心姿势——contact（接触）、down（下压）、pass（经过）、up（抬起），这些都是传统动画大师（比如《动画师生存手册》） 的标准。

跑步动画

跑步是在走路模型基础上修改的：

1. 头和躯干向前倾斜
2. 加大步幅
3. 加快播放速度

关键细节：向前倾斜的姿势 + 头稍微低下，还要注意和走路相比，跑步有腾空帧。身体的起伏也比走路更大。

持枪移动

做好基础走路和跑步后，就可以做持枪版本了。方法很简单：把每帧的手臂去掉，替换成握枪的手臂。

大部分工作其实都已经完成了。

将上半身和下半身拆开处理。就可以重复利用。

不同移动状态下的持枪姿势组合

移动射击

要实现边移动边射击，必须把腿部和躯干切分成独立图层。这样腿部可以持续播放各种动画，不受上半身动作影响。

看站立和蹲下姿势就知道，射击动画包含 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