【风农翻译】开始画像素画 #8
這是來自佩德羅?梅代魯斯（Pedro Medeiros，@saint11）授權的一系列像素美術教程，由風農翻譯整理。
佩德羅?梅代魯斯最為知名的作品莫過于《塞萊斯特山（蔚藍，Celeste）》，不過他持續在網絡上發布的像素美術教程也同樣相當知名。這里選擇的教程就是經過風農翻譯整理內容。
這個是系列的第 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）。QQ號購買不要用任何的視頻格式，除非你在做什么特別的。
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 添加到環境變量里，如果你不清楚這個，可以看看這個教程（百度什么的搜一下設置環境變量）。把 Aseprite.exe 加入到環境變量里。
現在，保存好 Aseprite 文件，在同一個文件夾打開命令行工具。如果不知道怎么做的話，在 windows 下，Shift + 右鍵，選擇在當前位置打開命令行。
接著是有意思的地方了，用到的命令！直接輸入下面這個，把 myFile 替換成你的文件名，按回車：
?
我們分解一下這個的含義：
?
- Aseprite.exe?用來啟動 Aseprite
- -b?表示我們是在批處理模式。不加這個的話 Aseprite 就打開了，我們不需要。
- ‘.\myFile.aseprite’?是需要處理的文件名和拓展名。這個是相對于當前路徑的。
- --save-as?是保存選中文件的命令，它也會根據你給的文件名里帶的標簽去格式化文件名。
- '{slice}.png'?是導出文件名, {slice} 是個標簽，它表示文件名會用切割的名稱并切割出來。
接下來
現在你了解到如何正確的保存像素畫了！當有不確定的地方時，參考以下幾點：
?
- 永遠用整數倍縮放，不用小數，不縮小。
- Aseprite 可以自動保存出圖片序列。
- 別用 jpg 和 mp4，以及其他的有損壓縮圖像格式。
- 不確定時，就用 png，別縮放。
總結
以上是生活随笔為你收集整理的【风农翻译】开始画像素画 #8的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Pawel wojs：《全面战争：三国》
- 下一篇： 《秦时明月世界》手游如何用Unity定制