Spine 2D骨骼動畫教程
文章目錄
大家好，我是笨笨，笨笨的笨，笨笨的笨，謝謝！
歡迎加入專業Spine技術交流羣 Spine2D骨骼動畫 7708065
轉載請保留原始鏈接：https://blog.csdn.net/jx520/article/details/83057477
如果你曾經開發過2D遊戲並需要使用精靈動畫，你可能要求美術人員創建逐幀動畫，例如這個教程中的iOS Games by Tutorials:
然後你可能會寫一些代碼來快速播放這個圖片序列，以模擬出動畫效果，就像這樣：
這個方法實現起來很簡單，但有幾個嚴重的缺陷：
- 內存和閃存佔用率高。
要因爲你要爲動畫的每一幀生成一張精靈圖片，它們會佔用大量存儲空間。你要動態處理一個不小的精靈，而在你的動畫中有大量的精靈要處理，這會帶來一個坑爹的問題。這個問題在移動設備上尤爲嚴重，因爲內存容量和閃存容量都很有限。 - 製作動畫的成本高昂。
繪製完整的一幀需要花費美術人員很多時間。如果在動畫完成後，要進行調整將會更耗時。 - 能自已做動畫的碼農畢竟不多。
因爲要手繪每一幀，如果你是個碼農那就得跪求美術人士來做動畫，如果隨後要加特效你還得去跪求人家。
在您的遊戲中使用2D骨骼動畫系統，就能解決這些麻煩。 它並不會把動畫中的每一幀存儲下來，取而代之的是存儲像下面這樣身體的各個部分：
然後你可以創建一個很小的動畫文件，它定義瞭如何移動身體各個部分，使其按照你想要的效果表演動畫，如走、跑或跳。然後你可以在遊戲中用代碼讀取動畫文件，自動爲身體的每個部分創建精靈，然後按照文件中描述的數據動畫它們。
當然手動創建一個2D骨骼動畫系統，是項瘋狂的工作。幸福的是Esoteric Software 已經爲我們創建了這樣偉大的工具Spine。
Spine的圖形界面能讓你以交互的方式，爲每一個精靈創建骨骼，然後用骨骼創建你要在遊戲中使用的動畫。
Spine還自帶了龐大的預製運行庫Spine runtimes，這是一個奇妙的方式“在你的遊戲中添加讀取Spine文件的代碼，然後它爲創建動畫。”Spine的運行庫，支持目前所有主流的遊戲引擎Unity, Sprite Kit, cocos2d 等等。
在本教程中，你將用Spine製作一個笨拙的小精靈行走和跌倒的動畫。這個過程中你將學會：
- 導入圖片到Spine中
- 爲精靈構建一套骨架
- 創建兩個不同的動畫
- 保存和導出你的成果
要注意的是本教程不包括將動畫結果導入到遊戲中；那將是一個獨立的教程。本教程的重點是如何使用Spine本身，而不理會你將選擇哪種遊戲引擎。
如果你已準備好邁出Spine的第一步，那就讓我們開始吧！
開始（Getting Started）
首先第一件事：你要先下載並安裝Spine.
Spine支持 Windows, Mac 和 Linux. 有三個版本，五種授權方式供你選擇。詳情看下面說明。
( 教程原文中關於購買Spine這一塊的資料年代過於久遠，這裏直接看官方的購買頁面吧： http://esotericsoftware.com/spine-purchase )
對於本教程的內容，你在試用版中都可以做到。然而在教程最後，你會發現試用版無法導出你的動畫。如果你完成了教程的其它本分，並且渴望在你的應用中看到自已製作的動畫，那你應該考慮購買基本版或專業版Spine許可，這樣你就可以保存和導出你的成果了。
那麼選擇一個版本下載吧，安裝並運行它。如果你用的是Mac，當你試圖運行Spine時你可能會看到下面的提示信息：
點擊繼續你將打開Apple的支持頁面。在頁面中的第一段裏點擊http://xquartz.macosforge.org鏈接。跳到X Quartz下載頁面。下載並安裝X11，然後再次運行Spine,現在它能正常啓動了。
一旦你順序打開Spine,歡迎你的將是一個示例項目。
當你準備開始學習如何創建自已的動畫時，如果你有興趣，可以隨意研究示例項目。
Spine導入圖片
導圖的工作已經有導圖腳本可以實現了，但你還是應該明白它都自動幫你做了些什麼
爲了讓你專心學習Spine，我爲你準備好了小精靈的切片素材，接下來你將用它創建制作動作。
點擊這裏下載素材，把文件夾解壓到桌面，這樣便於在Spine中找到它。
點擊左上角的Spine標誌，選擇新建項目New Project.
在右邊的層級樹面板中選擇圖像節點Images,然後點擊下面的瀏覽Browse.
在你的桌面上找到 SpineElf_START 文件夾，選中後確定。
現在文件夾中所有的圖片顯示在了Images節點下。
現在按正常情況來說你應該保存項目了，第一條準則“在整個過程中，隨時保存！”。
遺憾的是如果你用的是試用版，就木有保存功能。當然拉，如果你升級到基礎版或專業版，你就可以按Ctrl+S 或Cmd+S 保存項目了，把它保存在SpineElf_START 文件夾中。
如要你使用的是試用版，也別煩惱。你在使用Spine製作動畫的過程，也就是體驗一場刺激的冒險遊戲的過程。到於Ctrl+S是膽小鬼才乾的事，對於威武雄壯的你自然是不屑一顧的。
裝配角色
要創建你的角色，你需要去當地的大學裏，報名參加點解剖學和美術學方面的課程。呵呵！騙你的！其實本教程爲你提供了美術素材，你只要拖放切片素材到場景中就行了。
在Images節點中選中body 然後拖放到場景中。
一開始我不知道怎麼平移動畫布，所以我用一個超搓的辦法來改變畫布位置。用鼠標滑輪先縮放，然後光標放到另一個位置放大，這樣來移動畫面。後來Update:@mig_akira告訴我，可以按住右鍵移動鼠標來移動畫布！非常感謝他。
現在再把head拖到場景中。
拖動lArm, lLeg, rArm 和rLeg到場景中，但是head2和head3不動。
如果你手抖把它們拖進場景了，別擔心。Ctrl+Z或Cmd+Z撤銷剛纔的錯誤操作。儘管你有膽在製作中不保存，但再倔強的人也不會拒絕Ctrl+Z的。
現在要裝配精靈了，我看好你哦。在變換欄Transform中,找到位移工具Translate tool ，然後選中精靈的頭部。
把精靈的頭放到他的身體上邊。如果場景不夠寬，你可以用鼠標滾輪縮放視口，也可以用Spine左下角的縮放工具來操作。
還是使用位移工具Translate tool 移動精靈的手臂和腿放到適當的位置。
改變顯示順序
等等！…爲毛左臂和左腿在身體的上面？而不是在身體背後。看起來你得調整一下各部分的順序。
在Images上方你會看到繪製順序Draw Order列表。如果你熟悉Adobe Photoshop 或Sketchbook Pro，可以想象繪製順序Draw Order就類似於層。列表中顯示在上方的切片，在場景中也相應的顯示在上方。
要調整繪製順序只需簡單的在列表中上下拖動。調整順序從上向下像這樣**:rArm, rLeg, head, body, lLeg** 和lArm.
現在你的精靈看起來應該是這個樣子了：
現是一個漂亮的小精靈了。最後一步，讓小精靈的腳對齊地平線。你可以一個一個的手動調整，也可以全選後一下搞定，很簡單吧。
在繪製順序Draw Order節點下通過Shift+點擊來選擇所有部件。
然後仍然使用Translate tool工具，拖動小精靈讓它的腳正好落在地平線上。
你可能會問，另外兩個頭的圖片應該怎麼辦？總之head2 和head3 先放在哪別管，我們接下來會講到。
肢體使用多張圖片
在Draw Order節點上方有一個root節點，點擊root 邊上的下拉箭頭。你會看到所有肢體部件被列出來。
點擊head 邊上的下拉箭頭，你將會看到附加在身體上的頭部。
你可以爲每一肢體添加多張圖片，並切換它們進行動畫。從Images節點中把head2 拖放到root下的head節點中。
另外當你把head2 拖到畫布上時，他可能默認位於原點位置，只要把它移動到正確的位置就行了。head3也同樣的操作。
如果你想切換精靈不同的表情，在樹狀態層級中點擊眼睛圖標這一列的點。
現在所有的圖片都擺好了，你可以開始爲小精靈創建骨骼了。
添加骨骼
是時候給你的精靈創建骨骼了，否則他怎麼動呢。
在樹形層級中，選中root 列表。
然後在Spine下方的Tools面板中選中Create 工具。
在小精靈的胸部中點，點擊，這將創建一個骨點叫作bone1(也可能就叫bone).
現在從小精靈的頭部的下邊沿拖拽到帽子（從1點下，拖到2，放開）。這將會在他的脖子處創建一個新的骨骼。
附加的骨點自動命名爲bone2，出現在bone1的層級下面。因爲bone2是bone1的子節點。這意味着，你只要移動bone1，那麼bone2和bone1的其它所有子節點都會隨着移動。
在層級窗口中選擇bone1，這將使新創建的骨骼成爲bone1的子節點。
在手臂與身體相接的位置擊並向下拖拽至肘部創建出bone3。
對右臂、雙腿重複上面的步驟，首先在層級窗口中點選bone1。
然後在右臂與身體相交的位置點擊拖拽到肘部。
再回到層級窗口選中bone1。
接着，在左腿與身體相接的位置點擊拖拽到膝部。
在右腿上重複同樣的操作。
現在小精靈的骨架架設完成了。頭部、手臂、雙腿的骨點都連在身體的骨點下！
注意：如果有需要的話，你可以給角色創建更復雜的骨架。可以有肩、肘、腕、腳踝、尾巴甚至可以有服飾。如果你要添加上臂和前臂，那你需要把前臂作爲上臂的子物體，而上臂作爲身體的子物體。這樣手臂的所有切片素材就連成了一個整體。
裝配骨骼到身體上
現在看上去小精靈的身體的骨架都有了，但它們之間還沒建立聯繫。你不相信？激活旋轉工具Rotate然後選擇任意骨骼。
在場景上任意空白區域，按下左鍵拖拽。骨骼在轉，但是小精靈的身體沒動。
Ctrl+Z 撤銷剛纔的旋轉。現在來看層級樹。你會看到骨骼和肢體圖片並沒有相互匹配，而是分開的放着。
如何裝配它們呢？你必須…
你猜對了：直接拖放！點中body拖到bone1。
注意！現在body到了bone1下面。他們已經裝配成功了，就像合體了一樣。
把head拖到bone2裝配好精靈頭部的骨骼。
如果你還是對層級關係感到迷惑。判斷身體各部分是否匹配正確的最好辦法就是像你前面做過的那樣，用旋轉工具轉一下骨頭，如果圖片也隨着骨頭相應的在動，那就正明OK了。你隨時可以Ctrl+Z 撤銷剛纔錯誤的操作。
拖放順序如下：（這裏要說明一下，這個教程有點坑，骨骼還是應該創建同時就命名好。其實有技巧的《Spine入門之認識界面》裝配模式》技巧8 ）
- lArm 到bone3
- rArm 到bone4
- lLeg 到bone5
- rLeg 到bone6
你現在有了一套功能完整的骨骼系統。但有沒有發覺？目前爲止你所做的就不過只是拖放、拖放、拖放。接下來給你的小精靈添加動畫吧。要做的仍然還是拖放、拖放、拖放，你猜到了嗎？
一個站立動畫
你要做的第一個動畫就是讓小精靈站着。你可能會問“他不是已經站着了嗎？這不用做了啊！”
是的，聖誕老人的小助手已經站好了，但是他乾站着多無聊的說。你將給他添加一些微妙的變化，這會很有意思的。
點擊Spine左上角的SETUP切換動畫模式，在屏幕下方可以看到時間線了。
選中層級樹中的動畫節點，然後按底部的新建動畫按鈕New Animation。
命名就叫“standing”（站立）吧。
使用攝影表Dopesheet和自動關鍵幀 Auto Keying
假設你在用的是調用版或專業，高級功能是可以訪問的。但如果你用的是基礎版像自動關鍵幀這類功能就木有了。
想象攝影表就是有更多高級設置的時間線。自動關鍵幀：當你爲你的角色調整動作時，Spine會自動爲你創建關鍵幀。也許你會問“嘛是關鍵幀”？
顧名思義就是最關鍵的幀。比如你要做一個小球從左邊滾到右邊的動畫。你需要創建兩個關鍵幀，一個小球在最左邊時，別一個是小球在最右邊時。中間的幀是自動計算出來的叫“中間幀”，也叫“補間”。
在Spine下方的面板中，點擊攝影表Dopesheet 和自動關鍵幀Auto Key。
按住Ctrl鍵選擇left arm, right arm和head骨骼
在Transform面板中有三個綠色的鑰匙圖標。點擊它們，讓其變成紅色。
很簡單，你已經爲它設置了初始關鍵幀。在攝影表中可以看到它們。
在這個動畫裏，不用設置腿，因爲他是站着不動的。此外一但你啓動了自動關鍵幀Auto Key，那之後就不用再手動去點小鑰匙圖標了。你只管調動作，Spine會自動爲你創建關鍵幀。
先擇旋轉Rotate 工具，然後選中精靈的頭部骨骼。
在攝影表的時間線上點擊第5幀，把時間線移到這裏。爲了簡單點，你後面就都用5幀爲間隔好了。
現在在場景中點擊拖拽精靈的頭部，讓他有一點微妙的前傾。這裏的關鍵點是微妙的前傾，除非你想要一個非常卡通的效果，那就猛拖吧。因爲你打開了自動關鍵幀功能，所以Spine爲你在第5幀自動創建了關鍵幀。
你還能改變他的面部表情。在層級樹中找到bone2，點擊邊上的小三角圖標，展開層級，下面有一張head圖片。
點擊顯示列（眼睛圖標的那一列）的控制點，把精靈的微笑表情head顯示出來。
如果你看到（鑰匙圖標）這一列的顯示紅色的點，表顯示OK了。如果你看到的一個黃色的點，它表顯示你進行了操作，但還沒有創建關鍵幀。點一下黃色的點，把它變成紅色，這就成功的設置了一個圖片切換關鍵幀。
在攝影表的時間線上，點擊第10幀的位置。在場景中旋轉精靈的頭部，使其微微前傾。
爲了提高動畫製作效率，你可以複製粘貼關鍵幀。確保選中頭部的骨骼（1），在時間線的第5幀，standing這行，在選中白色的關鍵幀圖標，然後點擊複製按鈕（2）。
點一下時間線，切到第15幀（1），然後按下粘貼按鈕（2）。
現在選擇第0幀，然後點複製，選中第20幀，再點粘貼。
在播放控制區，激活“循環播放”按鈕，然後播放。你的精靈現在前後點頭。
注意：如果你想進一步試驗，可以在其它幀上改變精靈的頭部圖片。選中你要操作的幀，在層級樹中選中別的頭部圖片，然後把黃色的點切成紅色，設置一個圖片切換幀。
完成動畫
現在製作手臂動畫。切到第0幀，然後選中右臂的骨骼。接下來是和前面頭部動畫一樣的步驟。
切到第5幀，並把他的右臂略向外轉。
第10幀，再向外略轉一點。
在第5幀standing行，選中白色條形圖標，然後複製，粘貼到第15幀。
在第0幀standing行，選中白色條形圖標，然後複製，粘貼到第20幀。
重複同樣的製作，爲左臂設置動畫。然後播放查看效果。現在小精靈有一套完整的動作了。
行走並被絆倒的動畫
如果你是個動畫新人，剛纔看上去好像做了很多工作。事實上，剛纔所做的全部內容只不過是：選擇關鍵幀，移動精靈的肢體，複製粘貼關鍵幀。在傳統動畫的年代，你剛剛做的這些起碼要花一整天才能完成。
現在你會創建一個新動畫，小精靈走兩步，然後被絆倒。既然你已經用自已的方式成爲了一名專業的動畫師，那下面這些步驟看上去會非常熟悉和快捷。
在樹層級窗口中選中Animations，然後點New Animation創建一個名叫walking的動畫。
你已經創建了一個創新的動畫，所以Spine把小精靈重置爲了默認的綁定POST。** (綁定POST是指在綁定模式下，裝配角色的最終效果。在未添加任務動畫時，這就是角色默認的姿勢。) 來到第0幀**，按住Shift鍵，在層級樹中選中所有骨骼。
在變換面板Transform中把所有綠色的鑰匙圖標點成紅色。這一步是爲它們設置初始關鍵幀。
首先走兩步
來到第5幀，選中精靈的左腿骨骼向前微微旋轉，然後選中右臂骨骼向前微微旋轉。當人類（包括精靈）行走時，手腳是左右交替運動的。所以別讓你的角色甩“同邊手”哦。
到時間軸第10幀，把左腿和右臂向前多轉一點。把右腿和左臂向後多轉一點，把頭也向轉一點
在第15幀做相反的動作，把左腿轉向後，右腿轉向前，等等。
如果你爲精靈的腳不踏地而煩惱，可以選中body的骨骼，然後用Translate移動工具，移動軀幹來使精靈的腳合適的踩踏在地平線上。這就是前面的教程中，爲什麼要把body的骨骼作爲其它骨骼父級的原因。
然後摔倒
摔倒動作從第20幀開始。當一個人被絆倒時，他的腳停滯在身後，兩臂揮向前，並且頭向後仰。現在開始在小精靈身上模擬出這一瞬間的狀態。
還有，現在是把頭部的圖片切換成head2 的時候了。記住要顯示head2，就得在層級樹窗口中找到它，把眼睛圖標那一列的顯示點選上。然後單擊head節點（slot類型的那個）前面鑰匙圖標那一列的小黃點，讓它變成紅色。
在第25幀，使用移動工具Translate 把body 骨骼向上提起，讓精靈離開地面。然後用旋轉工具Rotate 旋轉精靈讓他表現出向前摔倒的動作。然後繼續旋轉手、腳、脖子等等。
如果你發現有些肢體脫離了軀幹，用移動工具Translate 把它們移回去。
到第30幀，可以讓你的精靈像超人一樣在空中心飛翔了。
在第35幀，小精靈開始落回地面。
第40幀，精靈開始接觸地面。
在第45幀，切換精靈頭部圖片爲head3。以表現出地面的衝擊給精靈造成的影響。(臉着地很疼的說)
在第50幀，讓你的精靈臉部着陸。現在你可以選擇添加一下細節來提高動畫的效果。當一個臉着陸時，它的頭會略有反彈，我們在第51幀把head骨骼向上旋轉一點，然後再第53幀，再轉回來。
現在你已經制作了一個小精靈站立和一個用臉着陸的動畫。任何時候只要你想切換兩個動畫，只要點它前眼睛圖標那一列的點就行。
導出你的成果
如果你把Spine從試用版升級成基礎或專業版，那就可以使用導出功能 了。首先點擊左上角的Spine標誌，然後在彈出菜單中選導出（Export）。
JSON導出，大概就是你要的。它以簡潔的方式記錄了Spine運行庫能識別的動畫數據。將elf.json保存在桌面的SpineElf_START文件夾。
如果你還不知道如何將動畫應用到你的APP中，你可以看下Spine運行庫相關的資料。
接下來何去何從？
這是篇非常基礎實例教程，向您演示了Spine能做些什麼。你可以試着繼續添加過度幀來調整時間節奏（Timing），添加不同的圖片素材，創建更復雜的骨骼，或是其它你能想到的任何東西。
我創建了一個更加複雜點的精靈摔倒動畫。你可以下載它。你如你沒有基礎版或專業版的Spine，那麼你沒法打開工程文件。但是你可以將我提供的JSON文件，導入到你的遊戲中。
如果你對動畫有興趣，那《動畫師生存手冊》這本書絕對值得拜讀的。據我所知，每個動畫師的工作室裏都會有一本，它就如同一位動畫的導師一樣。如果你不喜歡普通的紙製書，它也有iPad版。
最後，如果你喜歡我們的教程，敬請期待即我們即將推出的“如何將你的動畫整合到Sprite Kit引擎”
如果你有任何問題、評論或建議，請在下面隨意留言。
一不做二不休，再來個廣告吧
教程PDF版+素材，以防萬一打包了一份到 https://download.csdn.net/download/jx520/10719966