spine筆記

ps>>spine

下載 PhotoshopToSpine.jsx ，可將psd圖層輸出png & json檔（置入spine用）。

在PS作圖後（圖層abc是關節rig測試用、圖層123是seq測試用、圖層x是條狀物rig測試用、圖層f是網格動畫測試用。）執行下載的action即輸出，建議將Padding改0再OK，開啟spine讀取剛從ps輸出的json。見圖：

若發現圖變成missing框格請在path指定圖檔位置：

.
.
.
.
.
.
.

關節rig

選取root物件>>
點建立骨頭按鈕（Create）>>
按ctrl＋點選關節>>
拖曳拉出骨頭
各關節才能與相對應骨頭連結

選骨頭轉轉看，連結都正確即完成測試。

點或拖曳建立的骨頭只是呈現不同，本質是一樣的，
另spine的特性之一是建立骨頭(熱鍵為N)同時設定了連結：
母物件選取狀態下（亮藍色）建立骨頭皆為子物件。

若要變更連結關係，直接在清單物件拖曳：

.
.
.
.
.
.
.

seq播放

將圖片統一於同一Slot（圓點物件）
Slot只能顯示一張圖片，設好就能在作圖片切換動畫
（視窗左上角setup模式按一下進入Animation模式）

.
.
.
.
.
.
.

條狀物rig

選擇圖片物件>>options旁的mesh勾選>>edit mesh

.
.
.
.
.
.

New = 自行勾勒外框邊
Create = 自行勾勒佈線
不過我們直接選Generate來增加面數就好

.
.
.
.
.

選root後才可建立path物件等（剪刀icon是遮罩物件，待會會提到）

path調整好再來建立長度接近線條的骨頭

.
.
.
.
.

用Split來切成數根，數量多寡決定後續動態製作的流暢度
適中就好，Nested勾選切出來的骨頭才有連結

. 
.
.
.
.

接著在骨頭選取狀態下按New建立path Constraint：讓骨頭依附在線條上

.
.
.
.

選條狀物按Weights再按Bind一一加入所有的骨頭（居然沒法一次選取加入…）

.
.
.
.

按auto自動調整影響權重
圓點內顏色表示被哪些顏色骨頭影響權重，可自行調整：
選骨頭>>選要影響的點>>上下拖曳控制權重（游標會變成有上下箭頭的icon）

.
.
.
.
.

取消Weights，選取線條物件動看看～

.
.
.
.
.
.
.

網格動畫

點跟線條兩者在於動畫模式時的選取，
選一條等於兩點都選取到，通常設定於立體交界線
＊設置好後若有點變形，按tree面板下方的Reset

.
.
.
.
.
.
.

如何變色

圖片物件選取後點白色色塊即可變色，包括透明度

若是變色動態，在animation模式以圖片的slot來作設定：

.
.
.
.
.
.
.

切換圖層順序

點選插槽後點選略下方、三個藍方塊疊的按鈕可以直接在清單切換至繪製順序（Draw Order），如PS般挪動順序即可，若有動態切換則要先啟動繪製順序旁的綠色鑰匙（紅色為啟動）

.
.
.
.
.
.
.

遮罩

所有物件一定都有個slot，包括遮罩
建立遮罩開始畫遮罩範圍>>在Draw Order作順序改變

.
.
.
.
.
.
.

選取注意

spine的物件層級架構：

1. Bone：骨架，設置Solt的移動旋轉變形等動態。
2. Solt：插槽，設置Region顯示隱藏變色、序列圖等動態。
3. Region：圖片，只有顯示隱藏變色，作網格動態。

多物件整理必須要依賴篩選，在setup模式中複選物件後：

選取後選擇篩選	Solt篩選	region篩選

＊取消篩選後，只會選取region物件
＊Slot篩選狀態可拖曳改變Draw Order堆疊排序
＊region篩選後取消篩選，可將選取圖片置於同一Solt

做序列圖要將region置同一Slot的操作示範：

.
.
.
.
.
.
.

外觀更換

動態相同但要各種不同外觀情況下就需要用到Skins：

Setup模式於Skin新增New Skin並命名（暫定m1），在需要更換的Slot中新增Skin placeholder（暫命名為obj1），將圖片放至於衣架內即完成第一個外觀設定。要製作下一組更換直接選m1複製再來作圖片置換。建議以點兩下更名來置換，可以先弄一簡易模組來做外觀更換的測試。

.
.
.
.
.
.
.

複製注意

首先介紹一下spine的堆疊概念是從Draw Order做調整，
一開始置入物件時會先以名稱做排序，之後可以手動調整。

	複製只需點選母物件在執行Duplicate即複製（包含動態）

複製出來的物件在排序預設是往上堆疊，見下左Draw Order:
建議將複製物件另命名以利管理與辨識＊註，全選子物件後按Find and replace…執行更名，下右為設置。

註：spine在變動圖層順序的設計蠻糟糕的，只能一個一個點選再作拖曳變動順序…希望新版能改善。

.
.
.
.
.
.
.

熱鍵

詳細請點我

重點整理：
X =Scale
C =Rotate
V =Translate
D =Play forward/stop
W =Next key
S =Previous key
R =Next frame
F =Previous frame
SHIFT+R =Jump 10 frames forward
SHIFT+F =Jump 10 frames backward
L = 为当前工具设置关键帧

.
.
.
.
.
.
.

.
.
.
.
.
.
.

合併動畫

一組Skeleton會輸出一份atlas、json、png檔，若要其他動態合併同一skeleton，先import project選skeleton再來將整組骨架移至輸出同一skeleton…
挺麻煩但稍微了解一下。先合併skeletonImport Project >> Import skeleton

物件名稱要一致，稍微確認一下吧！

.
.
.
.
.
接下來再執行Import Project >> Import Animation
第一欄 要置入的動態skeleton
第二欄 置入的動態Animation
第三欄 要置入哪個skeleton，預設就好
第四欄 置入動態名稱為何，隨便打個名字

.
.
.
.
.
.
.
.
.
.
.
.

輸出相關

. 節省輸出空間
spine有圖素相同會在輸出時自動判斷單一圖素的特性，如圖：

輸出時可看到只有三個圖素，好好善用此特性將會大大節省空間。

. 輸出動態尺寸
若有切邊，裁剪物件關掉即可

範圍若過大則檢視物件位置是否在某角落

. 物件邊緣不乾淨
指令列texture packer/Pack Settings中將Options/Fast勾選取消，如圖：

. 建議勾選
將輸出的png為對遊戲有幫助：