死圖問題修正了
圖床改用meee看看
2024/03/04
Discord的圖片外連好像掛了...
圖片待補中
2024/02/26
===
自學補間動畫也差不多快兩年了。雖然還不是什麼大師，不過至少是能靠這個蹭點飯吃的程度。
想說前陣子偶爾會有人來詢問一些製作上的問題，現在中文的內容又不算多的狀況，就試著寫寫看相關文章看能不能幫到其他剛起步的同學了。
順便也算是幫自己做個筆記，時不時可以回來整理一下整體想法。
本篇內容適用於操作過Spine對功能有了解，或是對軟體有基本概念的同學。內容會包含各個環節我在製作上的想法與考量，有興趣的也可以參考看看。
對Spine完全是0基礎的人，建議是先到網路上尋找其他新手操作教學比較能跟上。這部分的教學應該是有滿多的，礙於篇幅問題這邊不會特別提到基礎操作的解說。
如果真的很多人需要零基礎面向的教學，之後再考慮看看要不要另外寫吧！
───
正文開始之前宣傳一下，
自己目前正打算募集一些作品進行添削的講座，想說這樣初學的人會比較有方向，也比較能知道大家比較會有的問題點在哪邊。
如果有同學願意提供自己作品的，可以透過私信或是直接＋我Discord「yuar0708」聯絡到我。
若是有任何疑問也歡迎！
感謝！
───
那麼首先我們就來到製作上的第一個環節
一、拆圖
不管你是不是繪師、是不是要負責自己補圖，一個好的動畫師一定得瞭解甚麼地方需要拆，什麼地方需要補。
有些人可能接觸過Live2D，將拆Live2D的概念在運用於Spine上是沒問題的，不過面向Spine的圖層如果跟Live2D拆得一樣細，有時候反而會造成製作上的麻煩。
一個部件該不該拆出來的判斷基準，可以從「這兩個物件在動作時，會不會看到本來被遮住的區塊」來決定。
以前髮為例子，前髮跟臉是在不同平面上，你只要一轉頭或是風一吹，原本被前髮蓋住看不見的地方就會露出來。
那在這個狀況我們就很清楚前髮跟臉必須要分開來，不然我們就沒辦法展現出原本被遮住的部位，最後畫面的說服力就會下降非常多。
右邊是沒有拆開來的狀態，前髮飄動時會把臉也跟著黏走。
左邊有把前髮拆開來就比較沒問題
其他例子像是眼睛虹彩跟眼白。今天你的成品沒有打算要移動視線的話，那麼本來就不會看到眼白被虹彩遮住的部分。但如果想要控制視線的話，我們就必須把它拆除來額外補圖。
當然在你越來越留意表現的細節、逐漸熟悉軟體的操作、或是要製作的圖像有些比較特殊的狀況出現時，我們會有其他更多的標準來看待拆圖這件事。
不過現在還在初學跟熟悉階段的話不用在這邊花上太多精力，其他能力起來之後自己就會漸漸知道哪邊適合怎麼處理了。
我們這次要使用的圖是這張！目前它被我貧弱的繪圖能力拆解成這個樣子，可以參考一下。
通常在這個階段我就會先大致想好會做怎麼樣的動作、細節要做到甚麼程度。
若是想像不出來或是還不確定的話也沒有關係，之後要補拆、合併都不是什麼大問題。
但最好還是先考慮好，少走一點回頭路就是多一點效率嘛。
二、匯入檔案
其實沒什麼特別的，會基礎操作的同學應該都知道怎麼把檔案丟進來Spine。不過這邊還是稍微提一下Photoshop的東西。
我們在PS裡面把尺標打開顯示，可以看到座標(0,0)的位置預設應該是在畫布的左上角。在這個狀態下使用PhotoshopToSpine的指令碼匯出到spine時，圖片就會像下圖那樣出現在root的右下角。
PhotoShop座標(0,0)的位置就等同於Spine裡面root的位置，因此如果你希望圖像匯入到Spine的時候就已經是在正確位置上，可以拖動PS的原點到指定位置再進行匯出，這樣就可以事先指定好匯入的位置。
單純做影片或gif的時候root位置在哪邊其實滿不重要的，但如果是做遊戲或做外包等等要求就會比較多，要多留意一下規格。
Root就像是整個物件的基準點，你要把它當成是角色站著時的地面位置還是UI的中心點都看你的需求。總之我們基本上都不會去更動root的任何東西。
三、基礎骨架
這邊就正式進入到Spine裡面製作囉！
我們第一件事情就先把人的身體、四肢、頭部的基礎骨架給架設出來，弄完大概會長下面這樣。
首先可以看到我最上一層有一個叫做Center的骨架，其他像是Body、Leg都是以這個Center為中心開始延伸出來的。
這個Center骨架的目的是用來控制整個人物的移動，畢竟我們前面提到過沒事不要去操作Root骨架，想要移動整體的時候就控制Center就好。
如果不想要打這個Center骨架的話也可以，在這個例子中你也可以透過移動Body_1跟Leg_1骨頭達到相同的效果。
但如果你的Body跟Leg骨架在之後動作時也會有做出位移，那麼你就必須計算出當下「動作的位移量」與「角色整體的位移量」才有辦法抓到他們正確的位置，這在Key動作時是非常麻煩的一件事。
因此如果有兩個目的性不同的需求，我會傾向建立額外的骨架分開來弄比較好管理。
這個Center的位置我會習慣打在角色的重心上，一來是方便我知道這個骨架是從哪邊延伸出去的，再來是我如果想要對整體進行縮放，位置比較不會跑掉。
要放在腳底上也可以，要放到角色旁邊也可以。如果只有控制位移的需求，其實放哪邊都差不多。
上半身大家應該都沒什麼問題，身體軀幹的部分這邊是使用兩跟骨架來表現腰部到胸口、胸口到頭部。有些人可能會用到三根，這就看個人習慣了。
如果是比較精細的正比人物我通常也會把鎖骨（肩膀）打上去，不過這邊要做到這樣子的處理是有點多餘了。脖子不是很明顯，我也沒特別拆圖出來就不特別架了。
手臂基礎上臂下臂各一根，手部如果你的圖片有需要的話就也可以打上去，這邊看起來跟下臂黏在一起也不會差太多就沒特別分出來。
這邊看起來比較有疑問的應該是下半身，為什麼只打了兩根而已呢？
我們先來看一下身體的圖拆成怎樣。
這次下半身我根本沒把它特別拆出來，就算我們給他再多骨架看起來也只會變得很奇怪，因此就只使用了兩根分別代表大腿跟小腿。
至於不額外拆出來的理由主要是我認為這張圖的魅力主要集中在上半部，下半身的影響力不大可以簡單處理就好。
另外就是這邊處理起來會比較複雜解說起來會變得很瑣碎，我覺得以這篇的內容不需要寫到那麼多就沒弄了。真的有需要可以後面的環節再來補。
當然，有一部分是我懶我不否認啦。
這邊還有一個可能看過別人教學後會有疑問的內容。
「我看別人都有用到ＩＫ來控制手腳，這邊不使用ＩＫ嗎？」
要解釋ＩＫ跟應用會講太長一串，之後有機會應該會寫一篇關於ＩＫ的內容，不知道什麼是ＩＫ的同學們可以先忽略沒關係。
簡單講結論的話，就是ＩＫ看起來太硬了，做不太出柔軟的感覺。
這邊的腿部並不是站在地板上因此沒有接地的需求，比起讓他老實地待在地面上，看起來輕飄飄的樣子會比較適合。沒有什麼特殊需求的話，我們就不特別去使用ＩＫ。
有句話是這麼說的──「ＩＫ看起來太ＩＫ了。」
四、檔案整理
嗯？我飯都還沒開始吃呢怎麼就開始要收餐具了？
我自己是養成習慣在這個環節會先整理一下檔案內容，不然你可以看一眼現在的樹狀層級圖。
現在只不過３１個圖層而已他就已經排這麼滿了，做這個常常隨便就動輒上百個部件跟骨架，全部都散落在這邊會很難進行操作。
因此我會先把圖片歸類在他該放的骨架底下，例如臉部跟頭髮就先放到Head骨架下等等方便管理。
Spine的樹狀圖目前沒有什麼資料夾之類的鬼東西，要把東西收起來放就只能先塞進骨架裡面收起來。
把所有head骨架移動時會跟著動的物件放到他的子集
這樣除了方便操作以外，我們也能先透過移動骨架來看到目前動起來的狀態感受一下。
這時旋轉Head骨架，底下的圖片也會跟著Head旋轉
只是個小專案的話其實不整理沒什麼差別啦，但養成良好習慣也不是一件壞事。
五、完整骨架
這步驟跟下一個打網格的步驟順序沒有很重要，但我覺得先打骨架會比較好，打網格的時候可以參考骨架走向比較不會迷失方向。
這邊就是把我們剛沒處理到的什麼頭髮之類的晃動物件阿、表情阿、其他特效還是什麼雜七雜八的骨架都補齊。
那麼我們就來處理頭的部分吧，首先是臉！
臉被我拆成基底、左右眉毛、左右眼、嘴巴共６個部件，所以就每個部件給他們一個骨架就搞定了，有夠簡單的。
之後擺動作時如果只打算做位移的話，骨架的位置打哪裡就沒有什麼影響。但我之後還會使用到縮放，這個就要稍微注意一下了。
擺的位置不同縮放後的位置也會跟著不一樣。如果沒有打在理想的位置上，之後要特別在去調整位移來對位會有點小麻煩。
眼睛我們通常是上眼皮會動的比下眼皮多，甚至有些人下眼皮直接就不動只動上眼皮，這之間的取捨就是每個人的風格不同了。嘴巴跟眼睛類似，不過反過來是下側動比較多。
頭髮的部分我們骨架上完大概是這個樣子，每搓頭髮從髮根的部分一路打到髮尾。較短的前髮大概３根左右，較長的側髮約５至６根上下。原則上沒有固定要多少可以自己斟酌。
頭頂的地方你也可以像重心的center骨架一樣打一個頭髮專用的中心骨架來控制頭髮整體的位移，不過這次我覺得沒必要就沒特別打。
向右側髮這樣有額外的分支翹出來的情況最好是在拆圖層的時候就拆開來，但嫌麻煩的話也可以就直接一體這樣下來，影響不會太明顯。
晃動物件的各節骨架長度沒有一定，不過越靠近尾端的位置通常動的幅度越大，所以為了方便做出差異越靠近尾端的部分可以越短一點。
後髮的結構複雜到我甚至看不出來他是怎樣綁的，所以拆圖的時候也只有整塊拆下來而已。由於她不像前髮是會甩動的樣子，我們這邊就只使用B_hair_Center跟B_hair_Control兩根骨頭來控制。具體方法等動作階段說明。
花的部分有點難確定該怎麼處理，這邊就先擱置著等其他動作都完成之後再來補。
頭部以上處理完後我們來看身體部分。東西越來越複雜了......
Ribon_R跟L是衣服上的兩條長緞帶，這個做法跟頭髮一樣沒有什麼特別的。FlowerF跟B則是花朵特效，這個我目前只打算給他們做簡單的位移而已，既然這樣那各一個骨架來控制就足夠了。
Ribon_B則是我用來控制背後緞帶位置的骨架，他底下還有幾跟控制緞帶飄動的骨架，做法跟頭髮是相同的。基本的晃動做法其實都大同小異，雖然有很多花樣可以處理但這邊就先簡單做就好了。
Black_Cloth_1我是用來控制在更後面那層紅色衣物的的晃動，因為他大部分都被遮住只有露一小塊出來，我覺得不需要搞到太多花樣就跟其他部位一樣用基礎的晃動就好。
至於為什麼Sleeve_R那邊我上了兩排骨架，Sleeve_L只用了一排呢？這個等權重的階段再拿出來提。
胸口處上我還多加了一個Chest的骨架，目的是可以用來表現呼吸時胸腔的起伏之類的，嗯。
骨架到這邊差不多告一個段落，之後如果有需要的話才會回來補。
順便一提，到目前為止已經使用了「79」根骨架。如果為了效能等原因要盡量減少骨架數量，製作晃動物件的時候就要多留意一些。
六、網格製作
像前一段落開頭說的要先打網格還是先打骨架都可以，沒什麼差別。
這個環節要每個部件都貼圖說明會有點多餘，所以就只抓幾個例子出來解說。
那麼我們一樣先從頭部開始！像是側髮這種典型的一搓頭毛就沿著外圈框起來就差不多了，沒有什麼特殊需求內部就也不用再多補網點。
至於網格打的數量要密一點還是少少的就可以，很遺憾的是這個只能靠經驗來判斷了。如果它彎曲的程度很大的話，我們就需要補多一點網格來讓它平順一些。網格太少的話在進行大動作時它稜稜角角會很明顯。
一開始比較不知道該怎麼辦的可能會是這種沒完全拆開來的圖，這個有點難直接說明他打的準則是什麼。不過我們通常可以順著圖片的樣子來打網格，那邊看起來有一條線就打一條線，紋路是這樣走我們就順著它打。
打網格的熟練度很直接地能反應出一個人有多熟練Spine，因為這套軟體的本質就是在控制這一些網點來幫圖片進行形變，骨架只不過是批量移動網格的一個工具罷了。要是能完全理解這點進步就會很快。
簡單的頭髮處理完了，我們來弄一些這次需要表現體積的部分──身體。如果我們只描繪好外框的話會像下圖那樣內部的布線看起來很混亂，布線亂的話就代表到時候它之後會沒辦法照我們理想中的樣子進行變形。
想要整理裡面的布線，你可以在建立網格的模式下按住一個點拖移到另一格點去，這樣中間就會有黃色的線條強制它的布線方式。但這個基本的方法只適用於基本頭髮等看起來較平面也沒關係的物體。
想要讓一個物件具有立體感，我們就必須要在網格階段就給它製造出有立體的感覺。為了達到這個效果，我們要在圖像中間也新增網格點來賦予它立體感。這個環節會有點吃圖像的構成能力之類的，可能有少數人天生對這些比較不敏感製作上會比較困難。
總之我們就在中間亂點一點網格，看起來是比一開始還好一點。但光這樣弄我們沒辦法感受到這個物體原本的體積長怎樣，有點被簡化成奇怪圓柱體的樣子。那到底要怎麼打才會比較好呢？
順著圖像的紋路走。雖然我們沒有把圖上的各個部件都拆開，但透過網格布線我們可以稍微幫它做點區隔，像是把每個地方都切開來一樣。透過這個方式可以表現出一定的立體感，之後要幫它做點花樣也不會太奇怪。
左手大概是長這個樣子。雖然什麼東西都說成是靠經驗的話就沒有教學的意義，但這個每張圖的狀況跟目標差距真的很大一個一個舉實例會沒完沒了，真的很依賴自己的製作經驗。
總而言之，需要表現出體積感的東西內部就必須要多打幾個點整理布線。如果是平的跟一張紙也沒關係的內容，不打影響也不大。
在這個作例中，眼、臉、眉毛、嘴巴等部件我都沒有建立網格。因為我只打算讓他們做簡單的整體縮放，網格打跟沒打不會有什麼表現上的差異。
順便一提，後髮網格我是這樣隨便上一些網格表示出體積就好了。
七、骨架綁定與權重
綁定骨架的操作大家應該都學過了，這邊主要講權重的部分。之前在日本企業舉辦的Spiners Meet Up線上講演中有人提問到:
「請問平常是否會使用自動權重功能呢？」
他們的回答是「會」。倒不如說如果你不用自動權重功能可能就得多花好幾倍的時間在處理這個環節。
通常我們在初次綁定骨架的時候它就會根據綁定的內容自動計算出合適的權重。如果沒有正常計算到的話，有可能是因為你綁定的骨架裡面有包含在圖片外或沒有長度情報的骨架，這時他就會因為計算不出那骨架該有的權重而放棄計算。
簡單的物件綁定好骨骼時就會自動幫你算好權重，基本上不用再去調整
如果自動權重的出來不太理想，我們就只好手動進行調整了。看是要用增減工具刷還是直接調整都可以，看自己哪像比較方便就好。
原本的自動權重讓不該被影響到的部分也跟著移動了看起來有點怪
把權重刷低一點之後看起來就比較理想了！
頭髮之類的部分應該不會太困難，我們來看看前一個段落讓我們搞了老半天的身體吧！
這邊先綁了基本的４跟骨架上去，自動權重的效果看起來好像差不多，微調一下就可以了。
在骨架階段提到的右手骨架，這邊先看一下目前的效果。
藍色的手臂控制下臂的部分應該很好理解，至於衣襬打上兩排骨架的原因則是為了讓它能分開控制衣襬的兩側，這樣飄動時會比較好看。
兩條骨架跟一條骨架的對比
這次的角色右手在前左手在後，我們的視線就比較容易落在前方的右手上。而且左手因為部分被藏在身體後面的關係，細節的多寡相對來說不會對整體畫面有太多的影響。
另外要留意我們這邊手部跟衣襬是拆成兩個部件，他們連結的地方得要小心他們有沒有岔開來沒接好的部分。
雖然左手主要是由手部骨架來控制，但這邊為了配合衣襬的動作也有刷上衣襬的權重讓他們看起來是有連動的，會比較自然。
紅色衣襬的部分與骨架沒有特別分開來操控，不過這邊有多刷一點上臂的權重讓它在飄動的時候移動幅度小一點。這樣可以讓她跟跟上方的衣襬有不同的擺動幅度，會稍微帶出一點他們之間的距離感。
後髮的地方就意思意思一下，有辦法帶出一點立體感就可以了。這邊刷權重的依據大概是越外圈、越靠後的部分位移量就越大。因為主要視線不會停留在這邊，簡單刷一下配上移動、旋轉等就可以有一定的柔軟度，看起來不會太悶。
其他部分應該沒有什麼特別的，處理完之後就可以進到動態囉！
八、主要動態製作
歷經千辛萬苦終於到了最快樂的環節。我們就先來做一個簡單的呼吸循環吧！
製作的時候通常都是從影響最大的部分往下製作到細部，也就是說會按照中心、軀幹、四肢與頭部、剩下的晃動物件這個順序來進行。
做動作的時候各個部件的影響是環環相扣的，只要上半身一移動你的頭、手都會受到它的影響而產生一些變化。如果不太理解的話你可以想像成是甩頭的時候頭髮會跟著甩動的樣子。雖然身體對各部位的影響不會這麼大，但配合並凸顯整體力量走向對自然的動作來說是很重要的一件事情。
總之我們就先來調整角色中心的部分。因為這個角色不是站立在地面上的，我們就讓他稍微上下飄動來表示整體節奏。
這邊整個循環大概抓個兩秒左右，記得動作的速度不要是線性的，要有點漸快漸慢比較符合自然的動作。理論上我們做的所有的動作都應該要包含這個「Slow in slow out」的部分，但有時候速度快到看不太出來時我們會省略掉這塊。
線性、預設的漸快漸慢、強調速度變化的三種差別比較
決定好節奏後，我們接著就是完成身體～四肢的動作，以圖上來說就是藍色骨架的部分。以吸氣的時候身體向外展開、吐氣時向內縮的感覺下去做調整。
除了使用到旋轉以外，這邊也有使用到移動（肩膀）、縮放（小腿）的動作。肩膀的移動是為了讓左手被遮蓋的部分多一點強調他們的前後關係，由於左肩、脖子、右肩三者通常都是連成一條直線的狀態，因此右肩也隨著左肩的動作移動，同時我也希望他能稍微遮住臉來給人一點害羞可愛的感覺。小腿的縮放則是想帶出一點腳彎到後面的樣子。
大致決定整體方向之後，我會先去錯開各個部位的動作時機點。現在所有部位都是同時開始動作、同時慢下來，這樣動作非常僵硬。我們這邊要稍微錯開她們彼此動作的時間，營造出一個部位帶動另一個部位這樣柔軟的樣子來表現力量的流向。
這邊會利用到序列版中「偏移」的功能，這項功能是當你第一幀跟最後一幀相同時，可以拖動它的關鍵影格在不改變他動作與節奏的前提進行整體時間的調整。
總之我們在偏移工具啟用的狀態下將「Body_2」與「Head」上所打的關鍵影格往後分別拖動7幀與15幀，來看一下跟原本的效果差在哪邊。
左側為原本的動作、右側為調整後的樣子
這邊可以看出來比起左邊頭跟身體同步的樣子，右邊頭部動作稍微延遲了一點的樣子比較有柔軟、自然的感覺。這邊主要的力量是在重心上下漂浮的部分，這個力量從中心點傳導到頭部會需要一點時間，因此這邊是讓頭部較晚開始動作來配合這個感覺。
整體的動作調整後差不多是這個樣子，之後我們就會照著上面的方法調整各個部件的晃動了。
這邊是我們完成了髮型、衣物、表情的樣子，整體完成度已經很高了。中間製作過程都是「製作好整體彎曲幅度→使用偏移功能做出柔軟的感覺」這樣子而已，當然效果如果不太理想就回去調整幅度跟時機點。
表情的部分，眼睛就只有上下縮放而已沒有什麼特別的，眉毛的位移程度可以比眼皮大一點點，眉毛的動作幅度其實比我們想像中的還要大很多。嘴巴我則是在縮小的同時有向左右放大一些，算是模擬嘴型從母音「Ｏ」轉變成「Ｅ」或「Ａ」的感覺，自己覺得是比單純縮放還來的柔軟一點。
到這邊應該就差不多了，只是最後我們還是進入一下微調收尾的環節。
九、最後微調
之前建的胸口骨架我們一直都沒去動他，如果前面已經很清楚他要做到甚麼效果也可以隨時先補上，這次我就放到最後微調的部分了。
遠看的話不會很顯眼，近看的影響力比較大一點。做法就是在身體上新增骨架綁定之後，輕輕地刷一點權重上去就好了。大概是越接近乳頭的位置權重越重這樣。
之後我們在來調整一下前後的特效花瓣。他們的任務是要表現出跟角色之間的空間感，因此為了方便他們額外作動，我把他們的父級從角色的Center改到了Root上，這樣他們就不會跟著角色上下飄。比較喜歡他們隨著角色上下動的話也可以維持就是了。
我們接著調整他的移動、旋轉、縮放甚至傾斜或顏色來給他一點環繞的在角色周邊的感覺。就算只有簡單的位移也可以，他比較像是場景的一部分可以不用看太重。完成後差不多是長下面這樣。
最後我們在來調整表情的層級問題。現在表情是會被前髮蓋住的，我們希望它能夠像原圖一樣有點透過前髮的樣子，該怎麼做呢？
首先我們像上圖把眼睛和眉毛的圖層複製一份，並讓它的層級順序所有圖層之上，這樣才不會被蓋住。
然後我們選取他們的插槽，在最左下方顏色的部分將透明度調低，這樣看起來就是會透過去的樣子囉！
完成！
創作內容
【Spine2D】簡易人物動態製作教學
某個工口遊戲的寫手日常 (37)