今天這篇來(lái)自SLYNYRD的Pixelblog 45，主題聽(tīng)起來(lái)特別“硬核工程”——磚、墻、門(mén)——但恰恰是俯視角地牢里最省塊數(shù)、最能撐起整張地圖的那類(lèi)基礎(chǔ)。

我把原文里關(guān)于16×16 分割、勾縫、配色變化、墻角與陰影、以及小動(dòng)畫(huà)的要點(diǎn)，按我自己的閱讀習(xí)慣捋成一篇筆記，方便你以后做 RPG 地牢或磚石城鎮(zhèn)時(shí)能直接對(duì)照。

圖注：小場(chǎng)景一瞥：磚墻搭起來(lái)之后，氣氛馬上就不一樣了。

我學(xué)到的核心：磚紋也是“數(shù)學(xué)題”

作者用的是偏8-bit 觀感、面向16×16 地磚的套路；雖然是俯視角，但很多磚紋翻成側(cè)視墻面也能用。

關(guān)鍵約束一句話：在 16px 里，先要扣掉 1px 當(dāng)勾縫（grout），剩下能整除的磚塊邊長(zhǎng)只有15、7、3、1這幾檔——高寬都得落在這些尺寸上，整面墻才能循環(huán)對(duì)齊，不會(huì)出現(xiàn)半塊“怪磚”。

斜 45° 的鋪法也遵守同一套數(shù)字。

左下角那種“尺寸示意”圖就是在提醒你：同一套紋樣里磚塊尺寸要統(tǒng)一，也可以故意混用不同尺寸，但得仍滿足整除關(guān)系。

實(shí)操順序可以記成三步：先勾縫、再填磚、最后做舊——也就是先畫(huà)線稿定紋樣，再鋪主色，最后用色差和破損打破重復(fù)感。

勾縫從淺改深這種小動(dòng)作，氣質(zhì)差很多，別小看。

圖注：多種磚紋與配色/舊化對(duì)比；注意 16×16 內(nèi)勾縫與磚寬的配合。

墻和地面：同一塊磚，上下文不同

地面磚和墻面磚在像素塊層面可以長(zhǎng)得像，但放進(jìn)場(chǎng)景里要靠對(duì)比拉出縱深：磚的尺寸感、顏色明暗，都會(huì)讓讀者腦補(bǔ)出“這是頂面”還是“這是外立面”。

一般規(guī)律是：墻頂面更亮、側(cè)墻更暗；外立面上能看到的往往是磚的窄邊，所以側(cè)墻上的磚豎向高度常常要比頂面那圈更“扁”一點(diǎn)——這和真實(shí)砌墻時(shí)“大面朝下”的觀感一致。

墻角如果想省資源，推薦柱子/通用轉(zhuǎn)角件，而不是給四個(gè)轉(zhuǎn)角各做一套復(fù)雜磚角——后者資產(chǎn)爆炸，收益卻未必高。

柱子還能脫離墻體單獨(dú)擺，豐富場(chǎng)景。

重復(fù)紋理疲勞方面：大面積同一磚紋時(shí)，記得做少量裂紋、污漬或變色塊當(dāng)變體；投影用分層做一兩套通用陰影，往左下或右下偏一點(diǎn)、別拉太長(zhǎng)（別超過(guò)單格），避免和別的物體疊在一起時(shí)“光照穿幫”。

圖注：墻頂與側(cè)墻的明暗差、門(mén)洞、柱角組合；陰影短而統(tǒng)一更好疊場(chǎng)景。

讓地牢“活”一點(diǎn)：小棋子與火盆

有了環(huán)境，就可以塞極簡(jiǎn) NPC/怪：示例里小兵和胖老鼠都是四幀走/待機(jī)合一，靠播放速度區(qū)分慢走、快走或待機(jī)，很省。

火盆屬于“怎么畫(huà)都有理”的題材：整體可以看成向上的S 形主焰，再拆出小 S 粒子；思路和旗幟飄動(dòng)有點(diǎn)像，只是方向改成往上收尖、再碎成火花。

主焰約6 幀 @0.1s，高光閃爍可以更快（約0.05s），層次感會(huì)好很多。

圖注：四幀行走/待機(jī)與火盆循環(huán)；幀率調(diào)一調(diào)就能當(dāng)跑酷或慢踱。

組合效果：從磚塊走到完整關(guān)卡氣質(zhì)

下面幾張是擺好的mockup 拼圖，主要看磚紋 + 墻 + 門(mén) + 小物件疊在一起時(shí)的可讀性——哪張讓你覺(jué)得“想下去刷一層”，就記住那種對(duì)比和留白。

圖注：小場(chǎng)景組合 1。

圖注：小場(chǎng)景組合 2。

圖注：小場(chǎng)景組合 3。

圖注：小場(chǎng)景組合 4。

圖注：小場(chǎng)景組合 5。

結(jié)語(yǔ)

這篇對(duì)我來(lái)說(shuō)最大的收獲是：磚不是背景填空，而是能用極少塊數(shù)撐起一整套地牢語(yǔ)法——紋樣、墻角、門(mén)洞、陰影、變體磚，再加兩三個(gè)小動(dòng)畫(huà)，關(guān)卡立刻就有“能玩”的氣場(chǎng)。

動(dòng)手鋪一遍比只看文字有用得多，建議你開(kāi)個(gè)小畫(huà)布，從16×16 + 1px 勾縫開(kāi)始試。

參考資料

https://www.slynyrd.com/blog/2023/7/21/pixelblog-45-bricks-walls-doors-and-more: https://www.slynyrd.com/blog/2023/7/21/pixelblog-45-bricks-walls-doors-and-more