今日教程｜我是怎么把靜態(tài)像素角色做出“跟隨感”的 動(dòng)圖版

今日教程｜我是怎么把靜態(tài)像素角色做出“跟隨感”的 動(dòng)圖版

我這次還是拿一張已經(jīng)畫好的小鯊魚魔女立繪來改。

畫布是128x128，工作文件先在 Aseprite 里保存成.aseprite，最后再導(dǎo)出 GIF。

整個(gè)過程我沒有一開始就追求大而復(fù)雜的動(dòng)作，而是先把一個(gè)小幅度左右擺動(dòng)做順，再一點(diǎn)點(diǎn)把角色做活。

1. 先定動(dòng)作兩端，不要急著補(bǔ)幀

我通常會(huì)先把動(dòng)作左端和右端畫出來，而不是一開始就埋頭補(bǔ)中間幀。

這樣做的好處是，角色最后要往哪里擺、身體重心怎么偏、法杖和頭部的角度該怎么配合，會(huì)先變得很清楚。

一開始我只做大方向判斷。

比如角色先偏向一邊，再去找反方向的終點(diǎn)姿勢(shì)。

法杖我會(huì)單獨(dú)拆層，因?yàn)樗?jīng)常需要比身體更慢或者更快半拍，這樣后面調(diào)整起來不會(huì)卡住整個(gè)人物。

2. 先做一個(gè)最小循環(huán)，看動(dòng)作有沒有立起來

兩端先定住以后，我會(huì)先做一個(gè)很小的往返循環(huán)，比如 4 幀或者 6 幀。

這個(gè)階段最重要的不是細(xì)節(jié)，而是確認(rèn)播放起來有沒有“擺動(dòng)感”。

如果這一步看起來就已經(jīng)有感覺，后面再加幀才有意義。

如果最小循環(huán)本身是僵的，繼續(xù)加幀通常只會(huì)把問題放大。

3. 用停頓幀和中間幀把節(jié)奏拉順

當(dāng)我發(fā)現(xiàn)循環(huán)速度太快時(shí)，不會(huì)立刻推翻重畫，而是先加停頓幀。

像把端點(diǎn)幀重復(fù)一次，或者在中間塞一幀過渡角度，角色的搖擺就會(huì)多出緩入緩出的感覺。

這個(gè)階段很像在調(diào)節(jié)呼吸節(jié)奏。

快一點(diǎn)，會(huì)顯得輕飄；慢一點(diǎn)，又可能發(fā)悶。所以我一般都是一邊播放一邊改，直到角色的晃動(dòng)看起來既輕松又不拖泥帶水。

4. 主體先動(dòng)，附屬物再“慢半拍”跟上

我最喜歡的部分其實(shí)是補(bǔ)跟隨動(dòng)作。

身體、頭部、法杖這些主體先把節(jié)奏定出來，然后再讓頭發(fā)、袖子、袍子、帽子這些附屬部分稍微慢半拍跟著走。

一旦有了這種延遲感，角色就不會(huì)像紙片一樣一起平移，而是會(huì)有一種輕微的重量感和慣性。

對(duì)像素動(dòng)畫來說，這種“追隨”往往比多畫很多復(fù)雜細(xì)節(jié)更有效。

5. 微調(diào)通常只差 1 個(gè)像素

后面我做得最多的事，其實(shí)是修小地方。比如臉只上下動(dòng) 1 個(gè)像素，帽子先旋轉(zhuǎn)選區(qū)再補(bǔ)邊，法杖的擺動(dòng)故意和身體錯(cuò)開一點(diǎn)點(diǎn)。

單看每一項(xiàng)都不夸張，但疊起來以后，動(dòng)作會(huì)柔和非常多。

像素角色尺寸不大，所以“只動(dòng) 1 像素”其實(shí)已經(jīng)很明顯了。

很多時(shí)候，差的不是重畫，而是愿不愿意反復(fù)播放、反復(fù)修這種小變化。

6. 最后再加特效，畫面會(huì)一下子豐富起來

等我對(duì)角色主體滿意之后，才會(huì)去處理外層的水魔法。

因?yàn)檫@種不規(guī)則特效本身就比較自由，放在最后做，反而更容易順著主體動(dòng)作去補(bǔ)氣氛。

我自己的體會(huì)是，只要人物動(dòng)作已經(jīng)順了，特效哪怕不算特別復(fù)雜，也能把完成度拉高很多。相反，如果人物本體還是僵的，單靠特效通常救不回來。

結(jié)語

我現(xiàn)在做這類像素循環(huán)動(dòng)畫，最看重的不是單幀有多精細(xì)，而是播放起來有沒有“呼吸感”。先立動(dòng)作端點(diǎn)，再做最小循環(huán)，再補(bǔ)停頓、跟隨和微調(diào)，這套順序會(huì)比一開始猛堆幀更穩(wěn)定。

如果你也想試著把自己的靜態(tài)角色做成小動(dòng)畫，我建議先從這種輕微搖擺開始練。工作量不算太大，但特別適合訓(xùn)練你對(duì)節(jié)奏、慣性和追隨關(guān)系的判斷。

原文參考：ドット絵アニメーションメイキング（note）[1]

參考資料

ドット絵アニメーションメイキング（note）: https://note.com/syaby/n/nc8f587bb932d