"像素畫教程：橫版解謎射擊游戲角色動畫詳解"

像素畫教程：橫版解謎射擊游戲角色動畫詳解

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

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

這次的主題是橫版解謎射擊游戲（Run 'N Gun）的角色動畫設計！

說到橫版射擊，我腦海里第一個蹦出來的就是《魂斗羅》這種經典游戲！

那種一邊狂奔一邊突突突的爽快感，真的是游戲史上最棒的發(fā)明之一

這篇教程來自我最愛的像素畫大神 SLYNYRD，他用 NES 調色板做了一個超完整案例—包括男女主角的全套動畫（走路、跑步、跳躍、射擊）還有背景場景設計。

最重要的是，全部都是在超小的尺寸（8x16 像素基準）下完成的！這種"小而美"的功力真的太值得學習了～

什么是橫版射擊游戲？

簡單來說，只要允許玩家邊跑邊射擊的游戲都可以叫橫版射擊。

但細分的話，像《魂斗羅》是橫版卷軸帶平臺跳躍，而《怒》是俯視視角沒有跳躍。

真正定義這個類型的核心要素是：

• 角色在滾動關卡中前進
• 催促玩家保持移動
• 射擊敵人 + 躲避各種攻擊

完整的角色動畫演示，包括走路、跑步、跳躍和射擊

這次教程聚焦在橫版視角（像魂斗羅那樣），所以我們會學習如何將射擊動作和各種移動方式組合起來！

第一步：制作素體模型

標準工作流程是從素體模型（Dummy）開始。

用 8x8 像素畫慣了之后，8x16 像素簡直是大豪宅！居然能表現出相當真實的解剖結構～

小技巧：小尺寸角色可以直接畫走路循環(huán) 因為走路/跑步循環(huán)是角色動畫的基礎，它決定了角色的表達方式和流暢度標準，其他動畫都要跟它保持一致。

走路動畫

用8 幀來做走路動畫。

男性 Dummy 模型的全套動畫展示

如果尺寸允許，8 幀能表現所有角色核心姿勢——contact（接觸）、down（下壓）、pass（經過）、up（抬起），這些都是傳統動畫大師（比如《動畫師生存手冊》） 的標準。

跑步動畫

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

1. 頭和軀干向前傾斜
2. 加大步幅
3. 加快播放速度

關鍵細節(jié)：向前傾斜的姿勢 + 頭稍微低下，還要注意和走路相比，跑步有騰空幀。身體的起伏也比走路更大。

持槍移動

做好基礎走路和跑步后，就可以做持槍版本了。方法很簡單：把每幀的手臂去掉，替換成握槍的手臂。

大部分工作其實都已經完成了。

將上半身和下半身拆開處理。就可以重復利用。

不同移動狀態(tài)下的持槍姿勢組合

移動射擊

要實現邊移動邊射擊，必須把腿部和軀干切分成獨立圖層。這樣腿部可以持續(xù)播放各種動畫，不受上半身動作影響。

看站立和蹲下姿勢就知道，射擊動畫包含 3 幀。而且所有允許線性移動的動畫（走路、跑步、跳躍）的每一幀都要提供相同或類似的 3 幀射擊姿勢。

跳躍動畫

跳躍動畫最少只需要1 幀——通常是四肢蜷縮的姿勢（有點像空中蹲下），這種姿勢很適合表現跳躍。

我在 Castlevania 研究[3] 中發(fā)現，跳躍和蹲下是同一個姿勢！

你可能會期待有角色起跳前彎膝蓋的準備動作。但大多數游戲中你不希望有這種預備姿勢。既然是橫版射擊主題，跳躍就是立即生效的。

著陸動畫

加了一個著陸姿勢，復用蹲下姿勢。

播放速度參考

幀速（毫秒）：

• 待機，行走 - 120/每幀
• 跑，射擊, - 60/每幀

女性 Dummy 模型的全套動畫展示

女性角色遵循同樣的模型。女性靠下盤和核心力量來控制長槍的重量，不射擊時向下握槍。注意手臂和腿部的運動軌跡。

第二步：完整角色設計

男性完整角色設計，帶服裝和武器

確立素體模型后，完成角色設計主要是給每一幀素體穿上衣服。

通常我不推薦黑色輪廓線，但在這個尺寸達到角色中黑色輪廓線表現很好，和 NES 調色板很配。

女性完整角色設計，長發(fā)飄飄

女性角色有長發(fā)，服裝在肩膀處稍微晃動。

和男性一樣，頭發(fā)在跑步和跳躍時也會晃動。

另外，在射擊動作中也加了頭發(fā)晃動。

這些微小的動畫循環(huán)會使角色更加鮮活。

第三步：背景場景設計

完整的地下實驗室場景動畫

搞定所有動畫之后，來做游戲場景。

Tiles瓦片 是 8x8 像素，游戲假圖的目標分辨率是 320x180 像素。

這個尺寸是 16:9 比例，能完美縮放到高清尺寸。

Tile 瓦片設計過程分解

前兩行展示了制作關卡 場景所需的核心瓦片。

首先展示的 3x3 瓦片 最基礎，可以拼出地面和 墻壁。

其次的 4x4 tile 瓦片 提供拼接瓦片，這是連接 'L' 形場景必需的。用這 12 個 tiles 就能 拼接出 各種關卡設計。

全屏 16:9 假圖，原生分辨率 320×180 像素

教程精彩瞬間回顧

如果你喜歡這篇教程，關注我們，后續(xù)可閱讀更多教程～

來源與資源

原文作者：Raymond Schlitter（SLYNYRD）
原文鏈接：Pixelblog - 60 - Side View Run 'N Gun[4]

Raymond 的 Patreon 提供更多資源下載，包括教程中的源文件和商業(yè)使用授權的資產包。喜歡他的作品可以考慮支持一下～

以上就是今天的像素畫教程分享！希望大家喜歡這個超詳細的角色動畫分解。如果你也嘗試做了類似的動畫，歡迎和我分享！下次見～

參考資料

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