【spine】快速入門

本頁提供一個簡單的概述，說明如何用 Spine 架設骨骼，建立動畫。

Spine 不限於角色動畫，但角色動畫是最多見也是最好的例子。在 Spine 中角色使用 的不是一張完整的圖片，而是將各個部分切片成一系列的小圖。好比：頭、軀幹、胳膊和腿。 這些小圖片被附加到骨骼上，而後用骨骼自由的設置角色動做。這些切片會隨着骨骼運動而 產生流暢的動畫。

裝配模式 Setup Mode

使用 Spine 從裝配模式開始，在此模式中建立骨骼，附加切片。在編輯區的左上角顯 示着 Setup（裝配）或 Animate（動畫）來指示當前的模式，能夠經過點擊進行切換。

切片 Images

層級樹中的 Images 節點定義了 Spine 從哪裏爲你找到這副骨架要用的圖片。圖片的路 徑 path 默認使用當前項目的相對路徑。也支持絕對路徑。設置完成後，路徑下的圖片會被加 載到圖片 Images 節點中。

Spine 實時監控圖片所在路徑，若是圖片發生改變，馬上更新到項目中。

參考圖片 Template Image

經過將一張完整的角***片做爲參考，能更簡單準確的建立骨骼和放置圖片。操做如 下：把 template 圖片從 Images 節點拖到編輯區域，它會被附加到 root 骨骼點上。在層 級樹底部的屬性面板勾選背景 Background ，被設置成背景後它將不可選，也不會被輸出。

能夠改變參考圖片的顏色，這樣更容易辨認。

角色切片 Character Images

在 Images 節點下，點選切片，而後 shift + 左鍵或 ctrl+左鍵把其它切片所有選中。 把它們拖放到編輯區，Spine 會爲它們建立切片插槽 slots 並所有放在 root 骨骼點下。

對照參考圖片把全部肢體切片對位。

切片不是直接附加到骨骼上的，而是附加到一個切片插槽中，插槽再附加到骨骼上。一 個切片插槽中能夠放置多個切片，但一次只能顯示一個。切片插槽對複雜骨骼的繪製順序提 供更多控制權限。

在層級樹的 Draw Order 節點中拖拽改變繪製順序。在列表上方的切片插槽會顯示在 前面，而下方的插槽會顯示在後面。你還能夠用+或-號鍵來調整順序，按住 Shift 能夠一次 移動5個單位。

當參考圖用完後，能夠點擊層級樹的中的顯示點隱藏它。

Photoshop

若是在使用 Photoshop，那架設骨骼時可使用 Spine 提供的「LayersToPNG.jsx」 PS 腳本。在 Spine 安裝目錄下的 scripts/photoshop/LayersToPNG.jsx 能找到。此腳本能 導出圖層爲 PNG 文件和 Spine 的 JSON 文件。點擊 Spine 左上角的 Spine 標誌，而後 Import Data, Skeleton。導入的骨架包含一個骨骼點和全部的圖片，這些圖片位置和顯示繪製順序 都和 PS 中的圖層一至。留給你的工做就只有建立骨骼了。這在後面會介紹。

另外一個提升工做效率的方案是使用 Adobe Generator . 它能讓 PNG 文件與 PSD 同步， 媽媽不再用擔憂我手動導圖幾萬張圖而發飆了。而 Spine 也是實時同步文件夾中的 PNG 的，這也就至關於 Spine 中的切片素材能夠和 PSD 保持同步了。

建立骨骼 Creating Bones

使用建立 Create 工具，建立新骨骼時，首先要選中一個骨骼做爲它的父級，而後再拖 拽建立出新骨骼。

當建立新骨骼時，按 shift（不用按住不放）選擇光標下的圖片。當拖出新骨骼後，被 選中的圖片將會變成新骨骼的子物體。

使用這個功能來建立骨骼能更高效，由於你同時建立了新骨骼，並改變了圖片的父級。

最後你可能要想改變某個骨頭，插槽，圖片或其它東西的父級。方法以下：選中要改變 父級的對象，按 P 鍵或 Set Parent 按鈕，而後在層級樹中選擇新的父級。若是目前是骨骼 的話，比起在層級樹中選，在編輯區域選可能更方便。

要改變骨骼的長度，選中任意一個變換工具 Rotate, Translate 或 Scale。而後拖動骨 骼的末端。另外骨骼長度也能夠在層級樹下方的屬性面板中調整。若是骨骼長度爲0，在編 輯區它將顯示爲一個特殊的圖標。而在別的地方和其它骨骼沒什麼不一樣。

骨骼能夠在層級樹底部的屬性面板中設置顏色。這將便於區分各個不一樣的骨骼。

在 Compensation 面板中 Image 和 Bone 按鈕用於調整骨骼但保持它的子物體，如附 加在它下面的骨骼和圖片不受影響。

別一個調整已經建立好的骨骼的方法，用 Create 工具選要調整的骨骼，按住 Alt 鍵， 而後點擊拖拽。這樣能夠在新的位置重畫骨骼，而不影響它的子物體。

動畫模式 Animate Mode

點擊編輯區左上角的 Setup 切換到動畫模式。

在動畫模式下，層級樹會顯示動畫 Animations 節點，其中包含全部可編輯和查看的 動畫。

用骨骼擺出姿式，而後設置關鍵幀建立動畫。當動畫播放時，骨骼會自動在關鍵幀之間 添加中間幀以實現平滑的運動。

攝影表 Dopesheet

Dopesheet 按鈕能夠點擊以展開攝影表，它提供更詳細的關鍵幀視圖。能夠在攝影表 中拖動關鍵幀調整動畫。

設置關鍵幀 Setting Keyframes

一般第一個關鍵幀設置在0幀上。經過點擊位移、縮放、旋轉（Translate, Scale, and Rotate）工具後的關鍵幀圖標，設置關鍵幀。綠色表示當前沒關鍵幀，***表示值已經發 生變化，可是沒有再次添加關鍵幀，紅色表示已經添加關鍵幀。

熱鍵 K 能夠爲全部發生改變的值設置關鍵幀。 熱鍵 L 能夠爲當前激活工具設置關鍵幀。 若是 AutoKey 按鈕被按下，全部發生改變的值都會自動被設置關鍵幀。

接着，在時間軸上選到下一個位置，調整骨骼擺出姿式，添加關鍵幀。點擊並拖動時間 線就能看到流暢的骨骼動畫了。

動畫工做流程 Animation Workflow

常見的動畫工做流程，先 K 出關鍵 pose 而後再回頭細化潤色動做。點擊時間軸上方 的 Playback 按鈕，在打開的面板中激活「步進 Stepped」按鈕來實現關鍵 pose 預覽。

它可以禁用補間幀，從而更容易觀察關鍵 pose。一旦全部大動做都建立完成，關閉 Stepped，添加更多 key 優化過分的效果。

曲線編輯器 Graph

曲線 Graph 按鈕能夠展開曲線編輯器。在攝影表中選擇一個關鍵幀，這裏會顯示它與 下一幀之間的補間插值曲線。

經過點擊貝塞爾 Bezier Curve 曲線圖標，啓動非線性插值，要想 K 出栩栩如生的動畫 這是關鍵所在。

在曲線編輯器中拖動 Bezier 手柄改變插值。X 軸表明當前幀到下一幀之間的時間，Y 軸表明值。