像素畫tile瓦片從零搭建一個完整的橫版游戲場景

文本概覽：全文約 3,393 字，閱讀約 9 分鐘。

一開始我以為做瓦片組（tileset）就是把一堆小方塊拼起來，沒什么技術(shù)含量。

回想n年前我剛?cè)胄凶鍪钟蚊佬g(shù)，第一次動手畫像素畫游戲場景，交上去之后主美直接打回——地面和背景糊成一片、平臺看起來像是飄在天上、玩家角色站在草地上卻像貼在圖片上而不是真的”在里面”。

那次挫敗讓我意識到，瓦片組設(shè)計是一門獨立的學(xué)問，而且橫版游戲場景比俯視角（top-down）更容易暴露問題，因為觀眾的眼睛對”前后層次”和”物理支撐”格外敏感。

后來我在像素畫學(xué)院在線教像素畫，發(fā)現(xiàn)瓦片組tile set這一關(guān)幾乎人人都要栽一次。

調(diào)色盤：先給自己設(shè)限，反而更自由

使用16色制作tile瓦片。

16 色？現(xiàn)在隨便一個像素畫作品不都 32 色起步嗎？但限制反而讓你從“選哪個顏色更好看”的糾結(jié)中解放出來。

16 色可以完成游戲場景需要的所有東西——草地、巖石、平臺、支撐柱、云層、遠景山脈——而且從來沒有覺得顏色不夠用。

16色覆蓋了色輪的各個角落，冷暖中性色都有。如果你也想嘗試限制色盤，我的建議是從一個已有的Aseprite內(nèi)置調(diào)色盤（比如 Sly16 或 AAP-64）里抽出一小部分，然后在做瓦片的過程中微調(diào)。

別一開始就自己從零配 16 色，那需要大量試錯。

基礎(chǔ)地面組：三步畫出有深度的地形

橫版游戲的地面不是一塊平板。為了讓角色真的“站在”上面，你需要讓地面瓦片的外邊緣有一個微微向背景傾斜的角度。

16×16px的瓦片是像素游戲里最常用的尺寸。

它是 2 的冪次方，在計算對齊和倍數(shù)時非常方便；同時 16×16 又足夠塞下讓你驚訝的細節(jié)量。

繪制過程分三步：

第一步：顏色分塊。

用大面積純色鋪出主要色域，同時確定瓦片外邊緣的傾斜方向。比如草地瓦片，頂部的草皮會稍微向后傾斜，讓你感覺能看到草葉的上面——這就是縱深感的關(guān)鍵。角落瓦片則會在兩個外側(cè)同時傾斜。

第二步：粗糙聚集。

把色塊混合成簇（cluster），暗示大致的紋理，同時平滑顏色過渡。這時候不用糾結(jié)細節(jié)，先把整體的明暗和材質(zhì)感定下來。

第三步：精細細節(jié)。

加入高光、加深陰影、讓簇的形狀更有描述性。但要注意——別畫太細。特意保留大塊色簇，因為過多的細節(jié)在低分辨率下會變成模糊或噪點。

這里有一個小技巧：草地瓦片的頂部如果直接截平，玩家走在上面會顯得很假。你可以額外做幾片草葉和植物瓦片，讓它們“長”在地面上方。

玩家角色實際上是站在底層的地面瓦片上，視覺上卻會被草葉覆蓋一部分，這樣看起來就像真的融入了環(huán)境。

平臺與支撐：別讓平臺飄在天上

橫版游戲里最常見的元素之一就是平臺。

但我一直很糾結(jié)“懸浮平臺”這件事——它們沒有任何物理支撐，憑空出現(xiàn)在畫面中間。除非設(shè)定里明確說了這是魔法或反重力技術(shù)，否則我總覺得哪里怪怪的。

解決辦法很簡單：給靜態(tài)平臺加上支撐結(jié)構(gòu)。

這些支撐瓦片的設(shè)計很有意思——它們看起來位于“近背景”層，讓你知道玩家可以從前面走過去，但又足夠近，看起來和平臺是連在一起的。除了給平臺提供“邏輯支撐”，這些支撐柱本身也是很好的背景裝飾元素。你甚至可以把它們單獨拿來用，純做視覺上的背景層次，不一定要連平臺。

支撐柱畫得太粗，會搶了前景的風(fēng)頭。記住支撐結(jié)構(gòu)的視覺權(quán)重應(yīng)該低于前景平臺和角色，否則玩家會誤判碰撞區(qū)域。

背景瓦片：用層疊創(chuàng)造縱深感

背景的目標(biāo)是創(chuàng)造深度，同時不干擾前景的可讀性。

推薦的做法是做多個簡單的背景層，讓“疊加效果”產(chǎn)生視覺豐富度，而不是靠一兩層極其復(fù)雜的背景來撐場面。

層數(shù)越多，視差滾動時的縱深感就越強。

不過一般來說，3到4層已經(jīng)足以營造出讓人信服的深度了。

云層的某些部分會“滲”進背景色里，顏色邊界不那么銳利。這在前景物體和可交互元素上是絕對要避免的——精靈必須輪廓清晰、對比分明。

但背景是“被動元素”，適當(dāng)?shù)念伾蝗诜炊茉黾涌諝飧泻途嚯x感，只要形狀仍然可辨識就沒問題。

在 16 色的限制下，用重疊和微妙的輪廓線來榨取每一滴視覺信息。

如果調(diào)色盤更大，可以加更多細節(jié)、堆更多背景層來模擬大氣透視。但16色可以產(chǎn)生色彩鮮艷的像素復(fù)古感。

tile瓦片設(shè)計的7個原則

平衡（Balance）——瓦片內(nèi)部的視覺重量要均勻分布。

如果某個區(qū)域特別搶眼，拼成大地圖時那個圖案就會反復(fù)出現(xiàn)，露出馬腳。讓一些簇跨過瓦片邊緣、繞到另一側(cè)，能有效隱藏接縫。

一致性（Consistency）——定義幾個核心的簇形狀，在多個瓦片中重復(fù)使用。

這會讓整套瓦片看起來協(xié)調(diào)統(tǒng)一。但要避免“關(guān)鍵簇”互相接觸，否則會融成不規(guī)則的雜色塊。角對角接觸是可以的。

限制顏色（Limit colors）——紋理只需要少量顏色就能很豐富。

顏色太多會讓紋理變糊，強對比色在紋理圖案里也可能變成不悅目的噪點。

對比（Contrast）——把不同紋理放在一起時考慮對比度。

兩個都很繁雜的紋理挨在一起會讓眼睛很累。負空間是你的朋友。

鏡像（Reflect）——很多瓦片直接水平鏡像就能做出不同朝向的版本，省時又統(tǒng)一。

但這只在光源對稱或均勻環(huán)境光的前提下才成立。在本文例子中，光源始終從正上方來，所以左右鏡像完全沒問題。

分辨率（Resolution）——瓦片尺寸可以任意，但越大越費力。

16×16 是最常見、最穩(wěn)妥的選擇。

變體（Variants）——同功能的瓦片做幾個變體，能減少重復(fù)感。

好的瓦片組其實不需要大量變體，但那些在地圖里經(jīng)常連成一片的瓦片，至少做一兩個替代版本就夠了。比如本文云層例子就有兩種不同的中間底部瓦片，混著用看起來更自然。

總結(jié)

做瓦片組tile set的過程，開頭總是最枯燥的——你要一個一個畫，好像永遠看不到盡頭。但當(dāng)你攢夠一批瓦片，開始在地圖編輯器里拼出第一個小場景時，那種“用這么少的素材就能變出這么大的世界”的感覺，真的很上癮。

你會忍不住一直往下做：更多的地形、更多的背景層、不同的生態(tài)環(huán)境……

瓦片設(shè)計就是這樣，前期投入大，但一旦掌握規(guī)律，速度會快得讓你驚訝。

如果你也想動手試試，這里有一個立即可做的小練習(xí)：打開 Aseprite 或 Pyxel Edit，用 16×16px 的畫布，只選 4 個顏色，畫一個最基礎(chǔ)的草地地面瓦片。

給初學(xué)者的下一步行動：把這個基礎(chǔ)草地瓦片擴展成一套完整的地面組——加上左側(cè)邊緣、右側(cè)邊緣、左上角、右上角，然后再嘗試加一層簡單的遠山背景。

你不需要一次做完，瓦片組最怕貪多，一次只做一類，做完地面做平臺，做完平臺做背景，很快就能擁有一個能跑起來的場景。

參考資料

https://www.slynyrd.com/blog/2020/5/21/pixelblog-28-side-view-tiles）: https://www.slynyrd.com/blog/2020/5/21/pixelblog-28-side-view-tiles）