【spine】快速入門

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

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

裝配模式 Setup Mode

使用 Spine 從裝配模式開始,在此模式中創建骨骼,附加切片。在編輯區的左上角顯 示着 Setup(裝配)或 Animate(動畫)來指示當前的模式,可以通過點擊進行切換。

Setup Mode

切片 Images

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

Images

Spine 實時監控圖片所在路徑,如果圖片發生改變,立刻更新到項目中。

參考圖片 Template Image

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

Template

可以改變參考圖片的顏色,這樣更容易辨認。

角色切片 Character Images

在 Images 節點下,點選切片,然後 shift + 左鍵或 ctrl+左鍵把其它切片全部選中。 把它們拖放到編輯區,Spine 會爲它們創建切片插槽 slots 並全部放在 root 骨骼點下。

Placement

對照參考圖片把所有肢體切片對位。

Transforms

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

Slots

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

Draw Order beforeDraw Order after

當參考圖用完後,可以點擊層級樹的中的顯示點隱藏它。

Visibility

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(不用按住不放)選擇光標下的圖片。當拖出新骨骼後,被 選中的圖片將會變成新骨骼的子物體。

Create Bone

使用這個功能來創建骨骼能更高效,因爲你同時創建了新骨骼,並改變了圖片的父級。

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

Set Parent

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

Change Length

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

Bone Color

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

Compensate

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

動畫模式 Animate Mode

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

Animate Mode

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

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

攝影表 Dopesheet

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

Dopesheet

設置關鍵幀 Setting Keyframes

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

No keyKey setKey values changed

熱鍵 K 可以爲所有發生改變的值設置關鍵幀。 熱鍵 L 可以爲當前激活工具設置關鍵幀。 如果 AutoKey 按鈕被按下,所有發生改變的值都會自動被設置關鍵幀。

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

Timeline

動畫工作流程 Animation Workflow

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

Playback optionsStepped mode

它能夠禁用補間幀,從而更容易觀察關鍵 pose。一旦所有大動作都創建完成,關閉 Stepped,添加更多 key 優化過度的效果。

曲線編輯器 Graph

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

Graph

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

Bezier curve

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

Bezier handles


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章