# spine筆記

## ps>>spine
<a href="https://github.com/EsotericSoftware/spine-scripts/blob/master/photoshop/PhotoshopToSpine.jsx">下載 PhotoshopToSpine.jsx</a> ，可將psd圖層輸出png & json檔（置入spine用）。

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


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

<img class="alignnone size-full wp-image-3316" src="https://linx690505.files.wordpress.com/2017/11/05.png"/>

.
.
.
.
.
.
.

##
## 關節rig

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

<img class="alignnone size-full wp-image-3318" src="https://linx690505.files.wordpress.com/2017/11/07-rig1.gif"/>

選骨頭轉轉看，連結都正確即完成測試。<img class="alignnone size-full wp-image-3319" src="https://linx690505.files.wordpress.com/2017/11/07-rig2.gif"/>

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

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

.
.
.
.
.
.
.

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

<img class="alignnone size-full wp-image-3317" src="https://linx690505.files.wordpress.com/2017/11/06.png" />
<br/><br/>
<img class="alignnone size-full wp-image-3333" src="https://linx690505.files.wordpress.com/2017/11/22-pice58887e68f9be.gif"/>

.
.
.
.
.
.
.

##
## 條狀物rig
選擇圖片物件>>options旁的mesh勾選>>edit mesh

<img class="alignnone size-full wp-image-3320" src="https://linx690505.files.wordpress.com/2017/11/08-00.png"/>

.
.
.
.
.
.

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

<img class="alignnone size-full wp-image-3321" src="https://linx690505.files.wordpress.com/2017/11/08-02.png"/><br/>
.
.
.
.
.

<img class="alignnone size-full wp-image-3322" src="https://linx690505.files.wordpress.com/2017/11/08-03.png" />

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

<img class="alignnone size-full wp-image-3323" src="https://linx690505.files.wordpress.com/2017/11/08-04.png" />

path調整好再來建立長度接近線條的骨頭<img class="alignnone size-full wp-image-3324" src="https://linx690505.files.wordpress.com/2017/11/09.png"/>

.
.
.
.
.

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

<img class="alignnone size-full wp-image-3325" src="https://linx690505.files.wordpress.com/2017/11/10.png"/><br><br><img class="alignnone size-full wp-image-3326" src="https://linx690505.files.wordpress.com/2017/11/11.png"/>

. 
.
.
.
.

接著在骨頭選取狀態下按New建立path Constraint：讓骨頭依附在線條上<img class="alignnone size-full wp-image-3327" src="https://linx690505.files.wordpress.com/2017/11/12.png"/>

<img class="alignnone size-full wp-image-3331" src="https://linx690505.files.wordpress.com/2017/11/13.png" />

.
.
.
.

選條狀物按Weights再按Bind一一加入所有的骨頭（居然沒法一次選取加入....）<img class="alignnone size-full wp-image-3328" src="https://linx690505.files.wordpress.com/2017/11/13-01.png" /><br/><br/><img class="alignnone size-full wp-image-3329" src="https://linx690505.files.wordpress.com/2017/11/13-02.png"/>

.
.
.
.

按auto自動調整影響權重
圓點內顏色表示被哪些顏色骨頭影響權重，可自行調整：
選骨頭>>選要影響的點>>上下拖曳控制權重（游標會變成有上下箭頭的icon）<img class="alignnone size-full wp-image-3330" src="https://linx690505.files.wordpress.com/2017/11/13-03.png" />

.
.
.
.
.

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

<img class="alignnone size-full wp-image-3350" src="https://linx690505.files.wordpress.com/2017/11/1509588745184.gif" />

.
.
.
.
.
.
.

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

<img class="alignnone size-full wp-image-3332" src="https://linx690505.files.wordpress.com/2017/11/21.png"/>

.
.
.
.
.
.
.

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

<img class="alignnone size-full wp-image-3338" src="https://linx690505.files.wordpress.com/2017/11/linx_-2017-11-01-e4b88be58d885-45-47.png" />

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

<img class="alignnone size-full wp-image-3355" src="https://linx690505.files.wordpress.com/2017/11/linx_-2017-11-06-e4b88be58d882-32-35.png" />

.
.
.
.
.
.
.

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


.
.
.
.
.
.
.

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

<img class="alignnone size-full wp-image-3347" src="https://linx690505.files.wordpress.com/2017/11/linx_-2017-10-17-e4b88be58d884-26-14.png" />

.
.
.
.
.
.
.

##
## 選取注意
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...執行更名，下右為設置。

<br/><br/>
<br/><br/>
<br/><br/>

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

.
.
.
.
.
.
.

##
## 熱鍵

<a href="http://esotericsoftware.com/spine-cheat-sheet">詳細請點我</a>

重點整理：
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 = 为当前工具设置关键帧

<img class="alignnone size-full wp-image-3343" src="https://linx690505.files.wordpress.com/2017/11/linx_-2017-07-03-14-20-56.png" />

.
.
.
.
.
.
.

.
.
.
.
.
.
.

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


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

##
## 輸出相關
**. 節省輸出空間**
spine有圖素相同會在輸出時自動判斷單一圖素的特性，如圖：
輸出時可看到只有三個圖素，好好善用此特性將會大大節省空間。
<br/><br/><br/>

**. 輸出動態尺寸**
若有切邊，裁剪物件關掉即可
範圍若過大則檢視物件位置是否在某角落

<br/><br/><br/>

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

**. 建議勾選**
將輸出的png為對遊戲有幫助：
<br/><br/><br/>