第二十三課：遊戲分辨率與適配

風格定完，還要解決一件很「技術」、又很致命的事：像素畫進遊戲後糊不糊、裂不裂。

在 Aseprite 裡好看，不代表屏幕上好看。差別通常不在「你會不會畫」，而在分辨率怎麼定、放大怎麼放。

1、分辨率到底是給誰用的

先記住一句（很反直覺，但很管用）：

像素畫的分辨率，首先是給畫師畫畫用的畫布；玩家看到的，往往是這張畫布整數倍放大後的結果。

新手常見坑：

• 「遊戲要 1080p，我就畫 1920×1080 的像素畫。」
  → 點太多，像插畫；一縮放就糊；像素感也沒了。

更合理的思路：

1. 先定基分辨率（Base Resolution）：遊戲世界「原生」有多寬、多高
2. 玩家屏幕是顯示分辨率
3. 用整數倍把基分辨率放大到儘量接近顯示分辨率

常見基分辨率	比例	角色大概多高	適合
320 × 180	16:9	約 16–24 px	新手、極簡、強像素感（《Celeste》同檔）
320 × 240	4:3	約 16–24 px	復古掌機 / SFC 味
640 × 360	16:9	約 32–64 px	現代 Steam 像素遊戲更常見
960 × 540	16:9	更大	更細，但成本明顯更高

新手優先：320×180。它剛好：×6 → 1920×1080，而且和你練過的 16×16 / 24×24 角色很合拍。

角色 / 表情包尺寸也是同一邏輯：24、64、112 不是「越大越高級」，而是信息量預算——越大，你要管的像素越多。

2、整數倍放大：像素完美的第一法則

放大可以「無損」，但請只按 2×、3×、4×…… 來。

• 2×、3×：每個遊戲像素變成一樣大的方塊 → 乾淨
• 2.5× 這類非整數：有的像素 2 格、有的 3 格 → 邊緣碎、看起來髒

例子（基分辨率 320×180）：

顯示目標	整數倍	實際畫面	黑邊？
1920×1080	×6	1920×1080	無
1280×720	×4	1280×720	無
1366×768	×4	1280×720	有（居中留邊）
3840×2160	×12	3840×2160	無

像素完美說人話：每個遊戲像素在屏幕上都是同樣大小的小方塊，不拉伸變形、不糊邊。

像素遊戲優先建議：

1. 固定基分辨率
2. 整數倍放大
3. 裝不滿就留黑邊（Letterbox / Pillarbox）——黑邊可以用簡單邊框裝飾，但別用「糊到鋪滿」換美觀

寬屏多看見一點場景（Extend View）可以以後做；起步別急著上，免得美術穿幫、重要物件落到看不見的邊緣。

3、濾鏡：Nearest 才像像素，Linear 會磨掉像素

同一個 3× 放大：

• Point / Nearest Neighbor / None：硬邊，格子還在 → 要這個
• Linear / Bilinear / Bicubic：顏色被抹開 → 秒變糊圖

軟件名字不統一，認準意思：最近鄰，不要平滑插值。

引擎 / 軟件裡也同理：

• Godot：窗口用固定 viewport，Stretch 常選 viewport + keep（或整數縮放相關插件/設置）
• Unity：可用 2D Pixel Perfect 相機包；Import 時關閉 filter，用 Point
• 導出圖集 / 截圖分享：同樣檢查是不是誤開了平滑縮放

引擎細節後面課還會碰；本課先把「濾鏡選錯」這個坑釘死。

4、縮小和「已經放大過的圖」

再記三條實操：

1. 縮小像素畫通常等於毀掉硬邊——能避免就避免；必須縮小，多半要當「重新畫一版小圖」，而不是直接擠扁。
2. 別人發你的圖常常是 3× 放大版。要 2× 時：先數清「一個大像素」佔幾格 → 縮回 1× → 再按整數倍放大。
3. 非整數放大看起來碎，整數放大但濾鏡開錯，看起來糊——兩種都不是「你畫功突然退步了」。

同一張臉從高分辨率一路減到小圖標：細節要主動刪、主動保留識別點。這就是「換分辨率」時美術在做的事——不是按一下縮放完工。

5、屏幕比例與安全區（夠用就行）

常見比例：4:3、16:9、16:10、21:9、手機豎屏 9:16。

像素遊戲起步：鎖定一個比例（多半 16:9）+ 黑邊，最穩。

再留一點安全區：

• 血條、按鈕、對話文字：別貼死屏幕最外緣
• 手機還要躲劉海 / 圓角 / 手勢條
• 電視可能有過掃描，邊緣再保守一點

重要的交互對象永遠放在畫面中心偏內；邊緣留給裝飾和遠景。

6、怎麼選：一張小表

你的情況	建議
第一次做完整像素小遊戲	320×180，角色約 16–24 高
要做 Steam 向、表情/UI 稍多	640×360，角色約 32–64 高
堅持「畫面必須鋪滿任何窗口」	先別；像素感會先犧牲
已經畫了素材卻發現分辨率不合適	寧可重定基分辨率，也不要靠平滑拉伸硬湊

選完就寫進項目 README / Style Guide 一行：Base = ?，Scale = Integer + Nearest。

7、作業

1. 選定基分辨率：寫出遊戲類型 + 目標平臺 + 你選的寬×高，以及理由（三句話內）。
2. 算一張縮放表：你的基分辨率分別在 1920×1080、1366×768、2560×1440、3840×2160 下，用最大整數倍會得到多大畫面、有沒有黑邊、黑邊大概多少。
3. 做一次對比截圖（引擎或 Aseprite 導出均可）：
   • A：整數倍 + Nearest
   • B：故意用非整數，或故意開 Linear
     兩張並排，用文字標出「哪裡碎了 / 哪裡糊了」。

可選：在你的假想畫面上圈出 90% 安全區，標出血條和主按鈕應該落在哪。

下一課進入角色設計：剪影、配色、層次——分辨率管「畫布多大」，角色課管「人長什麼樣」。