從13KB里長出的像素畫:一位獨立開發者的剪影美學實踐
![]()
文本概覽:全文約 2,289 字,閱讀約 6 分鐘。
每年一度的 js13k 游戲大賽有個近乎變態的規則:你的整個游戲——代碼、美術、音樂、字體——全部打包后不能超過 13KB。
2025 年的主題是“黑貓”,一個叫 Elliot Nelson 的獨立開發者憑一款叫 Ashes of Ulthar 的作品拿到了第 10 名。
我一開始以為這種比賽比的是編程技巧,能把東西壓進 13KB 才算本事。但讀完他的開發復盤之后,我最大的收獲不在代碼,而在像素畫:在極端限制下,他沒有讓畫面變”糙”,而是讓畫面變”對”。
這篇我想聊聊他從限制里長出來的剪影美學,以及我在他身上看到的、可以直接搬到自己項目里的做法。
限制是隱形的設計導師
js13k 的 13KB 上限意味著什幺?
你塞不進高清素材,塞不進復雜音效,甚至連一張無壓縮的 PNG 都可能吃掉大半預算。Elliot 的做法不是硬擠,而是反向操作——主動給自己再加一道限制:只用 5 個顏色。
他在 Lospec 上找到一個叫Slimy 05的配色板:幾種深淺不一的綠、一個近黑色、一個高亮色。全部加起來,5 個顏色。
![]()
Slimy 05 配色板,僅用 5 種顏色
我一開始以為“5 色”會讓畫面很單調,但他的成品完全不是這樣。
因為顏色少,反而逼著他去想:什幺東西應該用剪影、什幺東西應該用層次、什幺東西應該留給高亮。
這種”被迫的專注”反而讓整體風格很統一,不像那種”每個素材單看都不錯、放在一起卻打架”的常見新手困境。
剪影不是偷懶,是減法美學
Elliot 在復盤里說,他早期就決定要做“silhouette”風格——前景所有東西都是剪影,背景用漸層色塊鋪開。
這個決定有一半是美學選擇,另一半是極度現實的生產考量。
![]()
游戲實機畫面,剪影風格的多層背景
他后來找到了一張 Reddit 上的像素畫(作者畫的是“死靈法師的領域”),那種多層背景疊加深邃綠色的氛圍讓他確定了方向。
你能從他的時間軸 GIF 里看到整個場景是怎幺從第一天到最后一天慢慢收斂成型的:教堂、貓、樹這些核心元素在前兩天就畫好了,后面的時間幾乎都在調整構圖和層次。
![]()
開發時間軸,從第一天到最后一天的場景演變
這里有個很真實的卡點:到第三周時,他已經困在“大小限制的地獄”里了。
任何一筆改動都可能影響最終 ZIP 包的體積,所以他不得不放棄很多想加的細節——左側的建筑、地面的紋理、天空的層次。
這挺讓人沮喪的,但做獨立游戲本來就是這回事:你永遠在”想要”和”能要”之間做取舍。而剪影風格的好處是,缺了細節之后畫面不會“禿”,反而更干凈。
像素畫與游戲設計的咬合
這部分讓我印象最深。
Elliot 做了一個“村民系統”來驅動資源收集——你不需要寫復雜的物理引擎或碰撞檢測,而是讓村民在場景里走來走去,看起來畫面很熱鬧。
![]()
執行伐木工任務的村民
技術上,他只用了一張“高度圖”:村民走到 X=120 的位置時,Y 座標就直接從高度圖讀取。所以動畫只需要控制 X 軸移動,Y 軸會自動貼合地形。
這招太聰明了——像素畫的場景本身就偏平面,用一張高度圖來偽造“走在地面上”的感覺,既節省性能,又和畫風天然契合。
更妙的是,他在每個村民的“工作”里加了隨機偏移:伐木工到了目的地后會原地轉圈,模擬“工作”的感覺。這些小動作讓整個畫面活了起來,而你仔細想會發現,背后沒有任何復雜的 AI——只是一串“移動到 X=80 → 等待 0.5 秒 → 移動到 X=120”的簡單腳本。
我以前總以為”讓畫面有生氣”必須靠復雜的動畫系統,但這個案例讓我意識到:像素畫的魅力恰恰在于”用最少的信息傳遞最大的氛圍”。
一個 16x16 的剪影小人,加上一點隨機的轉圈動作,就比很多精致的 3D 角色更有溫度。
一個血淚教訓:不要等到最后才測試
Elliot 的復盤里最讓我捏把汗的部分,是他承認自己犯了一個“最大的錯誤”:整個開發期間他只測試了“普通開發版本”,從來沒有在早期測試過“最終 ZIP 打包版本”。
結果在比賽結束前幾個小時,他發現打包后的游戲根本跑不起來。
修復這個 bug 之后,原本被錯誤掩蓋的 1KB 額外體積暴露了出來——他必須在幾小時內再擠出 1KB 的空間。最后他被迫把原本設計好的“幫助界面”整個砍掉, sanity 條也換成了一個更簡陋的方框。
![]()
靈感來源的 Reddit 像素畫,多層背景與深邃綠色調
這段經歷對我來說特別有共鳴。
我做項目的時候也常常抱著“最后再一起測試”的心態,結果每次都在截止日前手忙腳亂。他的教訓很簡單:從第一天起就保持“可打包”的狀態,每周至少測試一次最終輸出。
這個道理放在像素畫工作流里也一樣——不要畫了 50 張素材才第一次放進引擎看效果,每畫完一張就塞進去看看,很多風格不統一的問題會在早期就被抓出來。
小練習
用 Aseprite(或 Piskel)畫一個 320x180 的場景,規則如下:
- 只能使用 5 個顏色(推薦去 Lospec 搜 Slimy 05 或自選)
- 前景必須是剪影,背景可以有色塊漸層
- 主題是“夜晚的小村莊”
- 限時 1 小時
畫完之后,把圖片縮小到原尺寸的 50% 再看一次。如果縮小后仍然能讀懂場景的層次和主體,說明你的剪影和構圖是成立的。
參考資料
js13k 2025 Postmortem: Ashes of Ulthar: https://7tonshark.com/posts/making-of-js13k-2025-ashes-of-ulthar/
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
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.