像素畫教程:橫版解謎射擊游戲角色動畫詳解
![]()
來源: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(抬起),這些都是傳統動畫大師(比如《動畫師生存手冊》) 的標準。
跑步動畫
跑步是在走路模型基礎上修改的:
- 頭和軀干向前傾斜
- 加大步幅
- 加快播放速度
關鍵細節(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
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發(fā)布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.