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

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

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

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

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

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

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

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

什么是橫版射擊游戲？

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

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

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

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

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

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

第一步：制作素體模型

標(biāo)準(zhǔn)工作流程是從素體模型（Dummy）開始。

用 8x8 像素畫慣了之后，8x16 像素簡直是大豪宅！居然能表現(xiàn)出相當(dāng)真實的解剖結(jié)構(gòu)～

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

走路動畫

用8 幀來做走路動畫。

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

如果尺寸允許，8 幀能表現(xiàn)所有角色核心姿勢——contact（接觸）、down（下壓）、pass（經(jīng)過）、up（抬起），這些都是傳統(tǒng)動畫大師（比如《動畫師生存手冊》） 的標(biāo)準(zhǔn)。

跑步動畫

跑步是在走路模型基礎(chǔ)上修改的：

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

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

持槍移動

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

大部分工作其實都已經(jīng)完成了。

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

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

移動射擊

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

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

跳躍動畫

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

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

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

著陸動畫

加了一個著陸姿勢，復(fù)用蹲下姿勢。

播放速度參考

幀速（毫秒）：

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

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

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

第二步：完整角色設(shè)計

男性完整角色設(shè)計，帶服裝和武器

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

通常我不推薦黑色輪廓線，但在這個尺寸達(dá)到角色中黑色輪廓線表現(xiàn)很好，和 NES 調(diào)色板很配。

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

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

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

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

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

第三步：背景場景設(shè)計

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

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

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

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

Tile 瓦片設(shè)計過程分解

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

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

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

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

教程精彩瞬間回顧

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

來源與資源

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

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

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

參考資料

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