8x8像素就能造一個(gè)機(jī)甲游戲世界？

文本概覽：全文約 2,308 字，閱讀約 6 分鐘。

前言

今天這篇教程，我想帶你看看一個(gè)只用 8x8 瓦片搭出來(lái)的完整科幻世界。

角色、機(jī)甲、城市，全部塞進(jìn)去。

角色設(shè)計(jì)：6幀跑酷 vs 4幀夠用

紅色主角的 6 幀跑酷循環(huán)，旁邊是風(fēng)衣特工和火箭沖刺機(jī)器人

所有角色都從8 像素高的基礎(chǔ)人形開(kāi)始。

加上描邊和細(xì)節(jié)之后，實(shí)際占用會(huì)稍微超出 8x8，但放在 8x8 瓦片地圖里完全沒(méi)問(wèn)題。

主角用了 6 幀跑循環(huán)。

6 幀可以"多一點(diǎn)重量感和活力"。對(duì)比旁邊風(fēng)衣特工的 4 幀循環(huán)，主角的跑動(dòng)更有"蹬地"的感覺(jué)。

機(jī)器人沒(méi)有跑步，直接做了火箭沖刺。

注意沖刺時(shí)的淺色光效——不是額外圖層，就是特定幀里直接畫(huà)上去的亮色像素。

這種"光效"特別實(shí)用，省圖層，效果也不差。

主角的待機(jī)動(dòng)畫(huà)只有一個(gè)朝向。不管你往哪跑、往哪射，停下來(lái)都面朝前方。

但是頭部會(huì)左右轉(zhuǎn)動(dòng)。

這個(gè)小動(dòng)畫(huà)彌補(bǔ)了一方向待機(jī)的不足。

機(jī)甲設(shè)計(jì)：16x16

機(jī)甲行走、火箭沖刺、射擊動(dòng)畫(huà)，以及腳步揚(yáng)塵效果

機(jī)甲尺寸是"16x16 左右"，剛好是角色兩倍大。

設(shè)計(jì)上留了明確的玩法空間：機(jī)甲火力強(qiáng)、防御高，但角色本體更靈活、 碰撞框更小、能鉆窄道。

這個(gè)"機(jī)甲內(nèi)外切換"的動(dòng)態(tài)，是整個(gè)游戲概念的核心。

機(jī)甲行走用了 12 幀。但是有技巧可以節(jié)省工作量：

• 正面/背面：第 6 幀和第 12 幀相同，1-5 幀水平翻轉(zhuǎn)就是 7-11 幀
• 側(cè)面：12 幀全部獨(dú)立，但整個(gè)動(dòng)畫(huà)可以水平翻轉(zhuǎn)覆蓋左右兩個(gè)方向
• 待機(jī)直接復(fù)用行走幀：正面/背面用第 6 或 12 幀，左側(cè)用第 12 幀，右側(cè)用第 6 幀

火箭沖刺 4 幀，帶光效。

槍和機(jī)甲是分開(kāi)的圖層，所以換武器、調(diào)整持槍位置都很方便。

揚(yáng)塵效果也是獨(dú)立圖層。

城市環(huán)境：8x8 瓦片

城市建筑瓦片分解，展示可復(fù)用模塊和組合方式

城市部分是我覺(jué)得最值得細(xì)看的。先設(shè)計(jì)完整的建筑，確認(rèn)尺寸符合 8x8 瓦片網(wǎng)格，然后再拆成瓦片。

前兩種建筑（普通樓房）寬度、高度、深度都可以自由擴(kuò)展。窗戶布局、屋頂樣式也能換變體來(lái)打破重復(fù)感。門口的位置和數(shù)量也能調(diào)。

第三種建筑（大車庫(kù)入口）比較特殊，變體空間小。但還是拆了瓦片，目的是展示"如果要最大化tile利用率，就可以拆"。屋頂元素還能跨建筑風(fēng)格混用。

角色和建筑的比例故意做得"角色偏大"。

這是復(fù)古 RPG 的慣例——外面看著小，走進(jìn)去里面很大。這個(gè)游戲概念里，城市外部用機(jī)甲跑，室內(nèi)空間用腳走，內(nèi)外切換是玩法核心。

如果要更賽博朋克，可以加高架軌道、懸浮車、傳送艙。

動(dòng)畫(huà)細(xì)節(jié)比如霓虹燈招牌、路面電路脈沖，都能再推一層。

總結(jié)

畫(huà)小尺寸像素畫(huà)最上癮的地方，是"剛好夠"的那個(gè)臨界點(diǎn)。

8x8 里，多一個(gè)像素就是多 12.5% 的信息量。

每一個(gè)像素的取舍都很明顯。

我平時(shí)更喜歡無(wú)描邊風(fēng)格。但在這么小的尺寸下，描邊確實(shí)救了可讀性。

有限色板里，沒(méi)有描邊角色很容易和背景糊在一起。

另一個(gè)可以學(xué)到的點(diǎn)是"圖層拆分"的思路。

槍、揚(yáng)塵、光效都獨(dú)立出去，不是為了炫技，是為了"節(jié)省開(kāi)發(fā)成本"。拆開(kāi)之后修改和調(diào)整也非常方便。

一個(gè)動(dòng)畫(huà)片段能翻轉(zhuǎn)復(fù)用、能換武器復(fù)用，開(kāi)發(fā)效率完全不一樣。

完。

教你畫(huà)像素畫(huà)免費(fèi)小程序

像素畫(huà)編輯器、像素畫(huà)填色、像素字生成、Image2pixel圖片轉(zhuǎn)像素畫(huà)

歡迎購(gòu)買我寫(xiě)的書(shū)，購(gòu)書(shū)免費(fèi)加入讀者群，添加微信pixelfish

像素畫(huà)學(xué)習(xí)&像素畫(huà)游戲開(kāi)發(fā)，需要1對(duì)1指導(dǎo)的朋友，可以付費(fèi)加入像素畫(huà)學(xué)院。

參考資料

Tiny Sci-Fi Pixels Asset Pack: https://www.patreon.com/posts/tiny-sci-fi-pack-144821426