【風農翻譯】開始畫畫素畫 #8

這是來自佩德羅・梅代魯斯（Pedro Medeiros，@saint11）授權的一系列畫素美術教程，由風農翻譯整理。

佩德羅・梅代魯斯最為知名的作品莫過於《塞萊斯特山（蔚藍，Celeste）》，不過他持續在網路上釋出的畫素美術教程也同樣相當知名。這裡選擇的教程就是經過風農翻譯整理內容。

相關連結：

Pedro Medeiros@Patreon
風農@indienova
風農@bilibili 專欄

這個是系列的第 8 節。這篇技術細節比較多，可以跳過你不感興趣的部分。

---

本節主要是檔案格式和匯出方法。

Bitmap and vector 點陣圖和向量圖
我們先來講講圖片在電腦上是如何儲存的。簡單來說，有兩種 2d 的影像檔案型別，點陣圖和向量圖。

向量圖是點、線座標，以及顏色資訊的集合，可以用來創作能縮放到任意解析度的影像。它主要的缺點在於難以用在表現細節的影像上，像是照片，你幾乎無法在畫素級別進行控制。儘管我們能建立出看起來像是畫素畫的向量圖，或者把畫素畫匯出成向量圖格式，但幾乎沒人這麼做。也有些例外情況，比如說要把畫素畫列印到很大的板子上。



而點陣圖影像，才是畫素畫能夠存在的原因。點陣圖把影像想象成很大的網格，列印在螢幕上，每個畫素都單獨儲存。


這樣儲存的檔案有時候比較大。一個 1080*1920 的圖，意味著包含了 2.073.600 個獨立畫素需要儲存，所以有時候需要用高效演算法來壓縮一下。

Image compression 影像壓縮

影像壓縮是為了減小影像檔案的體積，但是依據使用演算法的不同，有些演算法可能會損壞原資料。

壓縮可以是有損或者無損的。有失真壓縮一般對於照片或者大幅插畫是可以接受的，但是畫素畫就不可以。用 JPG 格式儲存畫素畫會造成隨機的顏色變化，圖形虛影。在壓縮畫素畫時，我們必須檢查是否用的是無失真壓縮，比如 PNG 格式。


總的來說，你的編輯器提供的影像格式，比如 Aseprite 的.aseprite 格式，或者 GraphicGale 的.gal 格式，可以安全的儲存所有的圖層和後設資料。

在 Aseprite 裡儲存

在 Aseprite 裡用儲存對話方塊進行儲存（Ctrl + S，或者 Ctrl + Shift + S 做另存為新檔案）


很直觀，是吧？在這裡儲存為 .aseprite 格式，儲存所有檔案資訊，以便你以後可以回來做修改。

匯出預覽

在完成了你的精靈圖之後，你可能想要釋出到什麼地方，或者發給誰，但如果直接儲存成 .png 檔案，會有兩個不好的地方：第一，你的影像會儲存成一個扁平的檔案，就是說失去了圖層和後設資料，第二，你的 png 檔案可能會長這樣：


匯出做預覽的正確方式是用匯出對話方塊，在“檔案 -> 匯出”（File -> Export）選單


這個對話方塊裡有非常多有用的選項，我們一個個看一下：

Output File 輸出檔案：檔名。如果你直接輸入想使用的檔案格式，Aseprite 就可以儲存為這個格式。推薦靜態的圖用“.png”，動畫用“.gif”。

這裡不會把儲存命令的預設格式也改掉，所以不用擔心這裡選擇的格式以後會把所有東西都拍扁。

Resize 縮放：畫素畫對於目前的顯示器來說通常都太小，所以需要縮放。Aseprite 提供了很多的解析度供你選擇。


你可能注意到了，只能縮放成 100% 的整數倍，不能有小數，比如 250%。這是因為非整數倍的縮放會損壞畫素畫。這是個畫素畫的嚴重缺陷，並且沒有什麼辦法能避免。記住縮放一定要用整數倍（200%，300% 等），不要用非整數倍（130%，250% 等等）。

如果你一定要滿足某個大小，試著縮放到最接近的最小的倍數，然後把畫布延伸到你需要的尺寸。

通常放大 200% 或者 300% 釋出到網上足夠了。

Layers 圖層：當你匯出檔案時，他會被拍扁，就是失去所有圖層資訊。這個選項可以讓你選擇匯出時需要包含哪個圖層。

Frames 幀：後面會詳細講，這裡就是指要匯出哪些幀。如果你有不止一幀，那麼會發生兩件事：

• 如果匯出格式支援動畫，比如 gif，那麼就會匯出動畫到這個檔案。
• 如果匯出格式不支援動畫，比如 png，那麼 Aseprite 就會儲存到多個檔案，每幀一個。
  

（編輯注：現在 APNG 動畫格式其實也已經得到了廣泛支援）

Animation direction 動畫方向：這裡可以看到常用的方向，比如向前，向後等等，選最適合你的。這裡的含義很直觀，你也可以自己試試。

Apply pixel ratio 應用畫素比例：這個不常用，如果你用的不是方形畫素，選這個會把它壓扁成方形。如果不確定這個是什麼也沒關係，他不會改變什麼東西。

Export for Twitter 匯出到 twitter：勾選後會讓最後一幀動畫持續時間整個動畫的一半長度，完美適合 twitter MP4 迴圈。

Saving for the engine 儲存給引擎

遊戲引擎各不相同，每個都需要你做特定處理，不過這裡是一些通用的原則：

首先是檔案格式：儘管有些引擎支援 tiff，gif，甚至是 bmp，最好還是用 png。輕量，解壓相對迅速，透明支援的很好。別用 jpg，mp4，或者其他的有失真壓縮格式。

除非你有什麼原因，否則不要在匯出給遊戲引擎時對畫素畫做縮放。正常情況下精靈應該是由引擎來做縮放，所有檔案都應該保持原有解析度。

動畫應該儲存成圖片序列，或者精靈表（sprite sheet）。不要用任何的視訊格式，除非你在做什麼特別的。

Saving an image sequence 儲存圖片序列

當把動畫儲存為 png 時，Aseprite 會建立一個圖片序列，看起來這樣:


一般這就行了，不過我喜歡檔名從 0 開始，而且我喜歡兩位數字。這個很容易實現：在檔名這，只要輸入檔名後面加上"00"。這裡我把檔名寫為 alert00.png，結果是這樣：


另外一個有用的技巧是加多個標籤。在 Aseprite 裡，你可以選擇多組幀加上標籤。這樣一個檔案裡可以儲存多個動畫。像這樣：


這有助於整理，匯出也很方便，只要輸入 boss_{tag}{tagframe00}.png，aseeprite 會這樣匯出：


很方便吧？如果你想多幾個或少幾個 0，可以把 {tagframe00} 改成 {tagframe000} 或者直接 {tagframe}。

儲存精靈表 sprite sheet

有些遊戲引擎推薦用精靈表，而不是多張圖片，我們可以用“檔案>匯出精靈表”（File > Export Sprite Sheet）命令自動匯出。


這裡我們有多個選項，可以根據所用的引擎做調整。有些需要在精靈之間新增邊距，提供 JSON 描述資訊，其他的可能支援去除透明部分。Extrude 拉伸可以讓所有瓦片的邊界顏色向外延伸一個畫素，避免 3D 瓦片的接縫，如果你用的是 3D 引擎的話。不確定就什麼都不選就好。

對於行和列的數量設定，如果引擎沒有特殊要求，我建議選擇“最適合紋理的尺寸”（Best fit for texture），讓 Aseprite 自動計算尺寸。

這裡需要注意的是，不勾選“Output file”並提供檔名時，點選匯出不會生成檔案的。你也可以選擇“Open generated sprite sheet”，這會開啟一個新檔案，你可以手工儲存。

切割工具和命令列


最後一個技巧時用切割工具 slice。切割工具適合於把多個圖放在同一個畫布的時候。我喜歡在給遊戲場景製作素材時用這個，我可以把素材放在旁邊隨時比對尺寸。

首先要把精靈放到一個檔案，挨著。別互相重疊到一個矩形區域就好。


接著選擇切割工具，開始在每個物體上做選取，注意不要把其他物體的部分包括進來。之後你可以雙擊其中一個，或者右鍵點選檢視屬性，給它命名。


現在，用命令列！如果你主要做美術，這部分聽起來可能有點嚇人，但我保證，只要簡單瞭解並設定好之後，這能夠自動處理很多枯燥的匯出工作。

首先你需要把 Aseprite 新增到環境變數裡，如果你不清楚這個，可以看看這個教程https://docs.telerik.com/teststudio/features/test-runners/add-path-environment-variables （百度什麼的搜一下設定環境變數）。把 Aseprite.exe 加入到環境變數裡。

現在，儲存好 Aseprite 檔案，在同一個資料夾開啟命令列工具。如果不知道怎麼做的話，在 windows 下，Shift + 右鍵，選擇在當前位置開啟命令列。

接著是有意思的地方了，用到的命令！直接輸入下面這個，把 myFile 替換成你的檔名，按回車：


我們分解一下這個的含義：

• Aseprite.exe 用來啟動 Aseprite
• -b 表示我們是在批處理模式。不加這個的話 Aseprite 就開啟了，我們不需要。
• ‘.\myFile.aseprite’ 是需要處理的檔名和擴充名。這個是相對於當前路徑的。
• --save-as 是儲存選中檔案的命令，它也會根據你給的檔名裡帶的標籤去格式化檔名。
• '{slice}.png' 是匯出檔名, {slice} 是個標籤，它表示檔名會用切割的名稱並切割出來。
  

如果想了解更多命令列資訊，Aseprite 有個不錯的使用教程可以看看：

https://www.aseprite.org/docs/cli/#filename-format

接下來

現在你瞭解到如何正確的儲存畫素畫了！當有不確定的地方時，參考以下幾點：

• 永遠用整數倍縮放，不用小數，不縮小。
• Aseprite 可以自動儲存出圖片序列。
• 別用 jpg 和 mp4，以及其他的有失真壓縮影像格式。
• 不確定時，就用 png，別縮放。
  

作者：Pedro Medeiros
譯者：風農
來源：INDIENOVA
地址：https://indienova.com/indie-game-development/saint11-making-pixel-art-8/