像素畫游戲 Mockup 設(shè)計(jì)完全指南

本文整理自 SLYNYRD Pixelblog 47 - Tiny Pixels 原文鏈接：https://www.slynyrd.com/blog/2023/11/26/pixelblog-47-tiny-pixels[1]

像素藝術(shù)的魅力從何而來(lái)？是懷舊情懷嗎？不盡然。

像素藝術(shù)的持久魅力更多源于它作為一種視覺媒介的內(nèi)在屬性——信息缺失之美。

缺失的細(xì)節(jié)迫使觀眾調(diào)動(dòng)想象力來(lái)填補(bǔ)空白，使體驗(yàn)更加個(gè)人化和真實(shí)。

這也是為什么電影永遠(yuǎn)無(wú)法超越原著小說(shuō)。沒有參與度，它只是屏幕上的像素或紙上的文字；但當(dāng)人類想象力被點(diǎn)燃時(shí)，完美！

今天我們來(lái)探索基于8×8px 瓦片地圖的微型游戲 Mockup 設(shè)計(jì)。

為什么要做 Tiny Pixels？ 限制激發(fā)創(chuàng)意

隨著技能提升，藝術(shù)家的傾向是為觀眾呈現(xiàn)過(guò)多細(xì)節(jié)，不斷追求更精細(xì)的畫面。

然而，為了保持像素藝術(shù)的互動(dòng)魔力，必須在必要信息和暗示細(xì)節(jié)之間取得平衡。

當(dāng)分辨率和細(xì)節(jié)水平提高時(shí)，觀眾的參與空間就會(huì)減少。

在某種程度上，當(dāng)像素變得無(wú)關(guān)緊要時(shí)，它就變成了數(shù)字插畫——我們都在 unmistakably 看到相同的圖像。

回歸基礎(chǔ)

將分辨率降低到 8×8px，用簡(jiǎn)單的方塊進(jìn)行有趣的探索。這種限制：

• 歡迎初學(xué)者入門
• 提醒專業(yè)人士簡(jiǎn)單之美
• 迫使藝術(shù)家關(guān)注核心信息

8×8px 看似太小，但實(shí)際嘗試后發(fā)現(xiàn)：

"我能以極少的妥協(xié)將 16×16px 的設(shè)計(jì)翻譯過(guò)來(lái)。"

采用分層設(shè)計(jì)，陰影單獨(dú)應(yīng)用，多個(gè)瓦片可以組合變化：

圖層順序（從下到上）：

1. Dirt（泥土基層）
2. Grass（草地）
3. Shadows 1（陰影層1）
4. Trees & Rocks（樹木和巖石）
5. Cliffs 1（懸崖1）
6. Shadows 25（陰影層25）
7. Cliffs 26（懸崖26）

技巧：在某些情況下，如果瓦片內(nèi)空間允許，將陰影烘焙到資源中。

如果用這種風(fēng)格制作游戲：

• 考慮使用經(jīng)典的4:3 比例窗口游戲區(qū)域
• 在邊緣構(gòu)建創(chuàng)意 UI
• 避免過(guò)寬的畫面（8×8px 會(huì)讓一切變得很" chunky "）

小不等于少。

與典型的 16×32px 精靈相比，雖然許多細(xì)節(jié)必須妥協(xié)，但基本可讀性都在那里。

少即是多的魅力：

• clearly 是一個(gè)有人物肩墊和火紅頭發(fā)的人形
• 但角色真正是誰(shuí)來(lái)自你的想象
• 比在最先進(jìn)游戲引擎中渲染的超寫實(shí) 3D 模型更有新意和吸引力

大部分表情通過(guò)動(dòng)畫傳達(dá)。小尺寸的優(yōu)勢(shì)：

• 生產(chǎn)效率：相對(duì)較少的努力就能進(jìn)行大量探索
• 容易制作多幀：雖然像素不多，但最小移動(dòng)就能產(chǎn)生效果
• 移動(dòng) 1-2 像素就足夠了：轉(zhuǎn)頭或改變姿勢(shì)只需微調(diào)

行走動(dòng)畫要點(diǎn)：

最小移動(dòng)：每幀 1 像素
效果：幾幀就能完成一個(gè)完整的步幅
秘訣：Shift one or two pixels and boom!

大型角色簡(jiǎn)化技巧

對(duì)于較大的敵人角色，設(shè)計(jì)和動(dòng)畫可以簡(jiǎn)化：

分層移動(dòng)法：

• 將角色分解成可單獨(dú)移動(dòng)的部分
• 分層疊加和移動(dòng)
• 減少需要繪制的幀數(shù)

嘗試一下：將敵人身體分成頭部、軀干、手臂、腿，分別動(dòng)畫。

你是否曾經(jīng)歷過(guò)：作品的成品不如草圖滿意？

這通常是過(guò)度思考和過(guò)度細(xì)節(jié)的錯(cuò)。應(yīng)該在某個(gè)時(shí)刻踩剎車，但藝術(shù)家往往不斷調(diào)整像素，直到未知的魔力消失。

保持 authentic 的方法

回顧早期作品：

• 早期的簡(jiǎn)單創(chuàng)作往往更有魔力
• 最好的藝術(shù)往往來(lái)自天真，這內(nèi)在地帶有 authentic

自我設(shè)限：

• 技能增長(zhǎng)時(shí)如何保持 authentic？
• 這是一個(gè)與比較混淆的 struggle
• 回到早期沒有社交壓力時(shí)的簡(jiǎn)單創(chuàng)作

重置習(xí)慣：

• 通過(guò)自我限制重新連接那些時(shí)光
• 例如：保持 tiny（8×8px）

用 8×8px 設(shè)計(jì)一個(gè)簡(jiǎn)單角色：

1. 確定角色特征（頭發(fā)、裝備）
2. 用最少的像素傳達(dá)信息
3. 制作 4 幀行走動(dòng)畫

設(shè)計(jì) 3 個(gè) 8×8px 環(huán)境瓦片：

1. 地面瓦片（泥土+草地）
2. 障礙瓦片（巖石或樹）
3. 懸崖瓦片

然后將它們分層組合成一個(gè)場(chǎng)景。

練習(xí) 3：Mockup 設(shè)計(jì)

基于你的角色和瓦片：

1. 設(shè)計(jì)一個(gè) 320×180px（16:9）或 240×160px（4:3）的 Mockup
2. 添加背景和前景層次
3. 應(yīng)用陰影增強(qiáng)深度

像素藝術(shù)從未是簡(jiǎn)單的選擇。限制創(chuàng)造了需要艱難解決方案的設(shè)計(jì)障礙。像素藝術(shù)的美麗來(lái)自信息缺失——讓觀眾參與想象，填補(bǔ)空白。

時(shí)不時(shí)，我們都需要回歸基礎(chǔ)來(lái)恢復(fù)清晰度。8×8px 的微小限制是一個(gè)很好的起點(diǎn)。

參考資料

https://www.slynyrd.com/blog/2023/11/26/pixelblog-47-tiny-pixels: https://www.slynyrd.com/blog/2023/11/26/pixelblog-47-tiny-pixels