Spineで簡単なアニメーションをつくるメモ

Spineの使い方メモ

画像取り込み〜アニメーション作成まで

バージョンは基本機能までは使えるEssential




![Spine16.png](https://qiita-image-store.s3.amazonaws.com/0/51624/27cff793-4c02-3664-fb54-e7d67b280847.png)


左上のロゴの下で
SET UP と ANIMATEの切り替え
SET UPで画像配置とBone作成をおこなう
ANIMATEで動きをつける


1. Rotate 回転
2. Translate 移動
3. Scale 拡大・縮小

## キャラクターの作成
### 画像の読み込み


右側のTreeからImagesを選択
Browseから画像が保存されているフォルダを選択する。

![Spine1.png](https://qiita-image-store.s3.amazonaws.com/0/51624/9af2cc20-6617-b033-1b57-d5b5291e6da5.png)


画像が読み込まれる。

![Spine2.png](https://qiita-image-store.s3.amazonaws.com/0/51624/9f881679-c26c-491c-143a-fbab4125f69c.png)



###ガイドとなる画像を配置

![Spine3.png](https://qiita-image-store.s3.amazonaws.com/0/51624/bb597c5c-8f58-8bcf-a21c-2bdd5df48e99.png)![Spine10.png](https://qiita-image-store.s3.amazonaws.com/0/51624/9d2a4436-47df-e053-b651-49619fcac4a8.png)


Images内に読み込まれた画像からキャラクターの全体像を配置する。
この画像は各パーツを配置するためのガイドとなるものなので半透明にする。

ドラッグで画像を配置し、右下のColorをクリック
Set region colorの左のバーで透明度を決める。




###Boneを作成

![Spine4.png](https://qiita-image-store.s3.amazonaws.com/0/51624/51d264c4-d896-203e-0d29-a9c44af477c3.png)

toolsのCreateを選択しキャラクターの中心となる体にドッラグでBoneを作成する。
首から腰に向かってドラッグするとよい。

続けてその他のパーツのBoneも作成する。

![Spine5.png](https://qiita-image-store.s3.amazonaws.com/0/51624/4b53e337-ce39-1164-5bf8-7b4e39c36c6e.png)

このときの注意点

**一度中心となるBoneをクリックし選択状態でドラッグする**

腕等は接続するパーツを選択状態にしてからドラッグで作成する。

![Spine6.png](https://qiita-image-store.s3.amazonaws.com/0/51624/36fd19a1-7758-92c8-6574-e0faae958b7e.png)

すべてのパーツのBoneをつくると下画像のようになる。

![Spine7.png](https://qiita-image-store.s3.amazonaws.com/0/51624/00e4add4-736d-c792-7a77-6945a2925317.png)

Boneを作成したら適当に名前を付けておく。


###各パーツを配置する

imagesからドラッグでガイドに合わせて各パーツを配置する。
この時、画像が切り替わる表情等は無視しておく。

![Spine8.png](https://qiita-image-store.s3.amazonaws.com/0/51624/7aa949a5-30ed-51d6-38aa-1dce99bb3a13.png)


レイヤーの順番がおかしくなるのでTreeの中にあるDraw Orderで順番を変更する。


![Spine9.png](https://qiita-image-store.s3.amazonaws.com/0/51624/0fd3766d-a07b-09d4-56c8-72d7ba975b00.png)



###Boneと画像を紐づける

![Spine10.png](https://qiita-image-store.s3.amazonaws.com/0/51624/160a3ed7-041a-99e8-3230-604a077fb97a.png)

1. root内のパーツを選択
2. 画面下のSet Parentをクリック
3. パーツと紐づくBoneを選択

###表情を作成

![Spine11.png](https://qiita-image-store.s3.amazonaws.com/0/51624/df01616a-6374-163c-76ed-a28f2750260b.png)

頭パーツの中に表情をつくるので、まず頭のBoneを選択し、下部のNewからSlotをクリックする。名前を適当につけて新しいSlotをつくる。
今回はeyeとkao

![Spine12.png](https://qiita-image-store.s3.amazonaws.com/0/51624/f157067b-326d-6468-7f76-7ad9d39db022.png)

Skinsを選択し下部にあるNew Skinをクリックし新しいSkinを表情の分だけつくる。
eye-normal、eye-closeなど

![Spine14.png](https://qiita-image-store.s3.amazonaws.com/0/51624/bcb4f64c-e0bd-7ee6-d025-eb75a25f3427.png)

imagesにある表情の画像を作成したSkinのなかに当てはめる。

![Spine15.png](https://qiita-image-store.s3.amazonaws.com/0/51624/e5857ab7-eea0-038a-1395-9ebdbd502726.png)

当てはめた画像をガイドに合わせて位置を調整する。

調整し終えたらガイドにしていた画像を非表示もしくは削除する。

##アニメーションを作成する

![anime1.png](https://qiita-image-store.s3.amazonaws.com/0/51624/482775f0-b414-91c1-6de4-e4a554c71dde.png)

Treeの中にあるAnimationsを選択し下部のNew Animationをクリック。
適当な名前を付ける。

左上のSet Upをクリックし、ANIMATEに切り替える。

動かすパーツを選択する。
たとえばキャラクターが歩く動きを作成する場合、足を選択。

画面下部のDopesheetのフレームが0になっていることを確認する。

Transformで
回転させたければRotate
移動させたければTranslate
拡大縮小させたければScale
のカギアイコンをクリックする。

![anime2.png](https://qiita-image-store.s3.amazonaws.com/0/51624/37afe251-c19a-d0a5-8420-f6a9acb53492.png)

次に１０フレーム目を選択。

足を回転させる。

パーツを動かすとTransformのカギアイコンがオレンジ色に変わるのでクリックする。
カギアイコンが赤くなるはず。

カギアイコンが赤くなっていないと反映されないので注意。

![anime3.png](https://qiita-image-store.s3.amazonaws.com/0/51624/4a9f2794-4fec-8e75-7e6c-9aabd078640a.png)

続けて20フレーム目、30フレーム目…とアニメーションさせる。
繰り返しで使うアニメーションの場合は最終フレームと0フレームを同じものにする。
0フレームを選択しコピー
→最終フレームにペースト

![anime4.png](https://qiita-image-store.s3.amazonaws.com/0/51624/633a0f3a-f514-e64d-37cf-9b076895bd41.png)


表情を変える場合は
表情をかえるフレームを選択し
rootのなかの対象となるskinを選択し表示させる。
そうするとカギアイコンがオレンジ色に変わるので、カギアイコンをクリック。
色が赤くなり反映される。

![anime5.png](https://qiita-image-store.s3.amazonaws.com/0/51624/bfe2454d-aab8-431e-5df1-d579fcb8a966.png)



Play、repeatなどで確認しながら、これらの作業を各パーツに行う。