像素畫教程：橫版解謎射擊游戲角色動(dòng)畫詳解

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

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

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

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

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

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

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

什么是橫版射擊游戲？

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

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

真正定義這個(gè)類型的核心要素是：

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

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

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

第一步：制作素體模型

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

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

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

走路動(dòng)畫

用8 幀來做走路動(dòng)畫。

男性 Dummy 模型的全套動(dòng)畫展示

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

跑步動(dòng)畫

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

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

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

持槍移動(dòng)

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

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

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

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

移動(dòng)射擊

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

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

跳躍動(dòng)畫

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

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

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

著陸動(dòng)畫

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

播放速度參考

幀速（毫秒）：

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

女性 Dummy 模型的全套動(dòng)畫展示

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

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

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

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

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

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

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

和男性一樣，頭發(fā)在跑步和跳躍時(shí)也會(huì)晃動(dòng)。

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

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

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

完整的地下實(shí)驗(yàn)室場景動(dòng)畫

搞定所有動(dòng)畫之后，來做游戲場景。

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

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

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

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

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

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

全屏 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)包。喜歡他的作品可以考慮支持一下～

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

參考資料

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