【風農翻譯】畫素寶典 #1：《蔚藍》製作者教你如何做畫素

畫素寶典


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

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

相關連結：

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

簡單的閃光效果




這是個簡單的閃光動畫，最重要的就是時機的掌握。第三幀可以掠過大部分你想閃的區域。

可以只用左邊的簡單效果，或者插入一個空白幀後，再加上右邊的額外閃光效果。甚至是隻用這個額外的部分，取決於實際的效果。

簡單的攻擊動畫




這個稍微複雜點，如何畫個最簡潔的攻擊動畫

做攻擊動畫最重要的一點就是讓玩家輸入後瞬間得到反饋。所以第一幀就要立即覆蓋攻擊判定區域，不要加預判動作，啥都別加。

整個動作非常的快，還要確保他返回到空閒狀態。我通常會額外加一點回彈（第八幀），讓動作更有趣一點。

煙霧



每次處理煙霧，水花，火焰這種複雜系統的動畫時，我會把這個系統分解成零件，再把這些部分分別畫出來。

考慮一整團煙霧是如何運動的太複雜了，但是一個小的部分的運動相對來說簡單一些。

最後那個例子是個迴圈煙霧的效果，跟另外幾個的區別在於，我差不多每 4 幀就多生成一些煙霧。並且在第一幀延續最後一幀的粒子效果。以後我會對這個迴圈動畫做一期教程講解。

攻擊動畫 tips



這個小 tip 是為了回答來自 Cam 的提問：

“如果劍在角色身前，該怎麼畫劍的動畫？有什麼區別嗎？劍停在身後的時候那個弧線比較好懂，我想知道在身前的話該怎麼畫。”

好問題，如果劍在身前，直接把它往下移動看起來沒什麼力。有時候，劍，拳頭，或者別的什麼東西不在你想要的位置，你可能覺得要加個準備幀。這沒錯，但是這可以做個假。我通常會用個”風斬“，或者其他的模糊效果來模擬它。假裝攻擊是從你想要的位置發起的，而且極大的誇張了整個動作。玩家不會察覺到缺少了準備幀。另外一個技巧就是用長點的返回動畫。

還有，宣告一下，上個教程雖然沒提，但是我們做的是”玩家的動畫“。敵人的動畫是應該有準備幀的。有些遊戲裡玩家也有準備幀，（像惡魔城 Castlevania）。後面我會在進階一點的攻擊動畫教程裡詳細講，但一般是需要遵守這條法則的，除非你想讓玩家感到無力，或者讓敵人不好預測，這類東西。

風農：教程裡頻繁出現 anticipation frame 這個詞，我通常翻譯為準備幀。這個概念可以在網上搜到，比如維基百科有個動畫的 12 項基本法則，裡面有這麼一條：

感興趣的可以去看看另外一些法則，如果你需要示例比對，可以去看貓和老鼠，這些東西基本都是美式動漫的風格。

下邊中文的連結可能需要翻牆。

Twelve basic principles of animation
動畫的 12 項基本法則

簡單跑步迴圈



大家好像非常想要個走/跑的教程，這就來了。走/跑的動畫還是很複雜的，我盡力做出了我能做到的最簡潔的動作。我計劃對這個主題再做幾個教程，關注不同的部位，比如手臂，腿，頭部運動，傾斜度等等。

對學習走/跑動畫的同學，我最大的建議是注意頭部的運動。即使手和腿的動作不太好，但只要頭部動作夠好，就可以讓人信服。

現在我解釋下為什麼選這個跑步迴圈。可能很多人不會喜歡這個“跳起”幀，更想用“過渡位置”幀，像這種：


這種也完全 ok。這裡只是我能想到的最簡單的方式，來做出適合 platformer 型別的跑步動作。走/跑的動畫很能體現角色的個性，所以會有無數種方式來做。

我傾向於“跳起”幀的原因是它非常容易複製，往下拉一兩個畫素，再稍微動動手和腿，就能得到個“下落”幀。我覺得這種方法做快跑動畫非常高效。

另一個原因是，如果第一幀是個跳躍，就感覺角色瞬間扎進了動作裡，讓動畫更有活力。

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