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

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

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

相關連結：

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

簡單的 Aseprite 動畫。這是系列的第 3 篇。

---

什麼是動畫？


動畫是由一系列表現動作流程影像，按特定順序播放，所引起的運動錯覺。我們的工作就是讓這個序列看起來儘可能讓人信服。

時間軸

首先我們要了解時間軸。它是一種在單個檔案裡表現多個影像的方法。每一列都是完整的影像，有一個編號，我們稱之為幀。


新建幀的最簡單方法是按 ALT + B。這會在當前選中幀的後面新建一個空白幀，然後選擇它。你可以點選某幀來選中，或者按',','.'改變選中幀，在鍵盤上找 < 和 >，比較好記。

試著在不同幀上畫些顏色，點選播放（Enter 鍵，回車）。也可以在預覽視窗看，按 F7。


你可能感覺“這麼多快捷鍵我怎麼記得住”，沒關係。記住快捷鍵需要時間跟肌肉記憶，而且大部分也都可以只用滑鼠完成。當你記不住某個快捷鍵，就在選單裡找找，或者檢視 Aseprite 的官方鍵位參考圖：https://www.aseprite.org/quickref/

一個非常簡單的動畫

畫動畫有非常多的技巧，比如應該按什麼順序繪製每幀，如何優化，不過我們暫時先講我瞭解的最簡單的一個技巧：一個“連續動作（straight-ahead）”的彈球動畫。“連續動作”是指我們按順序一幀一幀直接畫，而不是先畫出重要幀，再新增中間幀的方式。先建個 32 乘 32 的檔案，隨便選個調色盤。



動畫第一幀我稱之為“靜止”。它既是概念圖，定義動畫的風格，也是這個序列的停止位置。


你要注意這幀裡新增的細節，因為下一幀也要保持相同的風格。

接著複製這一幀（ALT + N），把它向上移動 4 畫素，像這樣：


之後，繼續向上 3 畫素，2 畫素，1 畫素，多保持相同位置一幀，後面反過來一遍。


節奏

儘管節奏的運用是個相當複雜的主題，甚至可以做一整期專門的教程，我現在簡單的從技術方面講一點，讓你可以自己去試試。

我們來新增一些節奏。球在落地後停一段時間，再跳起來。要增加某一幀的持續時間，右鍵 點選幀上的數字，選擇幀屬性（Frame Properties）。然後你可以輸入你想要這幀持續的時間。我們試下 300 毫秒。


你也可以選中多個幀，同時修改持續時間。對於一次性快速修改整個動畫的速度很有幫助。

擠壓和拉伸

這裡我們可以做的一個簡單改進是新增一點擠壓和拉伸，一種讓動作看起來更流暢自然的技術。包括沿著運動方向拉伸或者壓扁物體，同時保持整體面積。

具體原理可以參考之前的教程：

【風農翻譯】畫素寶典 #8 動態模糊、擠壓和拉伸、子彈

我們複製下第一幀，把它水平拉伸，垂直方向上壓扁，保持整體體積。保持體積是很重要的，這樣物體不會看起來變小或者變大了。當然這屬於在我們更有經驗之後可以嘗試打破的規則，不過暫時還是遵守它。這幀也被稱作“準備幀”，主要用來讓下一幀發生的動作看起來更強烈。

現在我們用同樣方式複製並修改球落地時的幀，可以畫的更加誇張點。


最後是垂直拉伸（同時水平擠壓）跳起的第一幀和下落的最後一幀，當球速度最快的時候。這就完成了，我們看下結果：




儲存動畫

儘管儲存成 .aseprite 格式可以儲存動畫，你可能想要把動畫匯出，發到網上或者用到遊戲裡。

網上，最簡單的方式是儲存成 gif，用 FIle > Export... 命令。勾選 Export for twitter， 如果你想把最後一幀修改成 1/4 的持續時間，這樣即使 Twitter 把它轉成 MP4 也可以完美播放。

當匯出給遊戲使用時，通常會儲存成 png，動畫一般會分解成一個精靈表或者影像序列。要儲存成影像序列，選擇匯出為 png 格式，匯出的檔案後都帶一個數字，像是“bounce00.png”。這回匯出多個檔案，像“bounce01.png”，“bounce02.png”等等。

有的引擎需要精靈表的形式，不需要手工處理，只要選擇 File>Export Sprite Sheet，可以改改設定，有很多引數可選。

接下來

接下來我建議多試試時間軸，試著畫點別的動畫。你可以看看我其他的教程，選個感興趣的跟著畫畫。


另外也可以試試經典的初學者練習，畫一個麵粉袋走和跳的動畫：

https://www.youtube.com/watch?v=C8cbTGshkZw。

暫時保持低一點的解析度和顏色數，不要太複雜了。

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