8x8像素就能造一個機甲游戲世界?
文本概覽:全文約 2,308 字,閱讀約 6 分鐘。
![]()
前言
今天這篇教程,我想帶你看看一個只用 8x8 瓦片搭出來的完整科幻世界。
角色、機甲、城市,全部塞進去。
角色設計:6幀跑酷 vs 4幀夠用
![]()
紅色主角的 6 幀跑酷循環,旁邊是風衣特工和火箭沖刺機器人
所有角色都從8 像素高的基礎人形開始。
加上描邊和細節之后,實際占用會稍微超出 8x8,但放在 8x8 瓦片地圖里完全沒問題。
主角用了 6 幀跑循環。
6 幀可以"多一點重量感和活力"。對比旁邊風衣特工的 4 幀循環,主角的跑動更有"蹬地"的感覺。
機器人沒有跑步,直接做了火箭沖刺。
注意沖刺時的淺色光效——不是額外圖層,就是特定幀里直接畫上去的亮色像素。
這種"光效"特別實用,省圖層,效果也不差。
主角的待機動畫只有一個朝向。不管你往哪跑、往哪射,停下來都面朝前方。
但是頭部會左右轉動。
這個小動畫彌補了一方向待機的不足。
機甲設計:16x16
![]()
機甲行走、火箭沖刺、射擊動畫,以及腳步揚塵效果
機甲尺寸是"16x16 左右",剛好是角色兩倍大。
設計上留了明確的玩法空間:機甲火力強、防御高,但角色本體更靈活、 碰撞框更小、能鉆窄道。
這個"機甲內外切換"的動態,是整個游戲概念的核心。
機甲行走用了 12 幀。但是有技巧可以節省工作量:
- 正面/背面:第 6 幀和第 12 幀相同,1-5 幀水平翻轉就是 7-11 幀
- 側面:12 幀全部獨立,但整個動畫可以水平翻轉覆蓋左右兩個方向
- 待機直接復用行走幀:正面/背面用第 6 或 12 幀,左側用第 12 幀,右側用第 6 幀
火箭沖刺 4 幀,帶光效。
槍和機甲是分開的圖層,所以換武器、調整持槍位置都很方便。
揚塵效果也是獨立圖層。
城市環境:8x8 瓦片
![]()
城市建筑瓦片分解,展示可復用模塊和組合方式
城市部分是我覺得最值得細看的。先設計完整的建筑,確認尺寸符合 8x8 瓦片網格,然后再拆成瓦片。
前兩種建筑(普通樓房)寬度、高度、深度都可以自由擴展。窗戶布局、屋頂樣式也能換變體來打破重復感。門口的位置和數量也能調。
第三種建筑(大車庫入口)比較特殊,變體空間小。但還是拆了瓦片,目的是展示"如果要最大化tile利用率,就可以拆"。屋頂元素還能跨建筑風格混用。
角色和建筑的比例故意做得"角色偏大"。
這是復古 RPG 的慣例——外面看著小,走進去里面很大。這個游戲概念里,城市外部用機甲跑,室內空間用腳走,內外切換是玩法核心。
如果要更賽博朋克,可以加高架軌道、懸浮車、傳送艙。
動畫細節比如霓虹燈招牌、路面電路脈沖,都能再推一層。
總結
畫小尺寸像素畫最上癮的地方,是"剛好夠"的那個臨界點。
8x8 里,多一個像素就是多 12.5% 的信息量。
每一個像素的取舍都很明顯。
我平時更喜歡無描邊風格。但在這么小的尺寸下,描邊確實救了可讀性。
有限色板里,沒有描邊角色很容易和背景糊在一起。
另一個可以學到的點是"圖層拆分"的思路。
槍、揚塵、光效都獨立出去,不是為了炫技,是為了"節省開發成本"。拆開之后修改和調整也非常方便。
一個動畫片段能翻轉復用、能換武器復用,開發效率完全不一樣。
完。
教你畫像素畫免費小程序
像素畫編輯器、像素畫填色、像素字生成、Image2pixel圖片轉像素畫
![]()
歡迎購買我寫的書,購書免費加入讀者群,添加微信pixelfish
像素畫學習&像素畫游戲開發,需要1對1指導的朋友,可以付費加入像素畫學院。
參考資料
Tiny Sci-Fi Pixels Asset Pack: https://www.patreon.com/posts/tiny-sci-fi-pack-144821426
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
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.