【Unity】2Dモデルでアニメーションを共有する・スキンエディットを実装する

　Unityでは<b>3Dモデルのタイプをヒューマノイドに指定することでモデル間でのアニメーションの共有</b>ができる。しかし、2Dに関して言えば標準機能ではアニメーションに関する設定がない。アセットやlive 2Dなどの外部ツールなどを使うことで、以前のような全ての動きを描くほどの作業は不要になったが、それでも<b>個別にアニメーションを作成するのは根気が必要</b>だ。
　そこで<b>パッケージマネージャーからインポートできる無料アセットを使ってアニメーションを共通利用</b>する方法を紹介する。なお、ここで作成できるモデルは<b>2DSpriteモデル</b>であり、Canvas上で動くUI Imageではないことに注意してほしい。
環境:Unity2019.4.13f
必要なもの
アセット:2D Animation、2D IK、2D PSD Importer
その他:モデル用のPSBファイル
![EC08F6A4-8612-4F95-92D9-3466424552D3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/7ca0c409-4f5d-b0bb-b497-3c9b437ba481.gif)
※製作中のゲームをサンプルに使っているので動画やここでは一部のみしか変更していないが、犬とライオン、人間とロボット等見た目が違うものでもアニメーションを共有できる。
[企業が2Dアニメーションを利用している例](http://techblog.sega.jp/entry/2018/03/26/100000)

## 必要なものを準備する
　2D Animation、2D IK、2D PSD Importerを利用することで2D spriteにボーンを設定して、アニメーションが作成できるようになる。インポートはUPMから行う。
![FC48632D-4258-49BA-9E15-328048E1BF81.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/0921f1c3-1718-5a3c-184c-bc3df5639cec.png)



　 Photoshopで作成できる<b>psbファイル（一定以上のサイズだとpsdはなくpsbになる）が必要</b>なので、お絵描きツール等でpsdファイルを出力し、拡張子をpsbに書き換える。その後上記アセットがあれば、psbをインポートすると自動でオブジェクト化される。

　通常であれば使用するモデルを直接取り込むが、<b>アニメーション共有するために汎用的なモデル（以下、骨格モデル）を用意</b>する。ここでは骨格のような絵にしたが実際は棒人間でもいい。注意点としてはscaleを変更することでそれぞれの部位の長さを変更できるが、それぞれ取得して変更する必要があるので頭身を変える場合は作業数が増える。<b>なるべく全キャラクターで利用できる骨格モデルを用意</b>した方がいい。頭身さえ同じであればobjectのサイズを変えるだけで大きさは変更できる。

　この上にスキンを乗せるため、あらかじめイメージ図を描いておくのがいいかもしれない（図の灰色部分）。スキンで隠れるため正確にレイヤー分けする必要もないが、レイヤー分けしておくとスキンを描く際に各パーツがどの程度の大きさか判断でき、また最初のモデルを作成する時に少し楽になる。あとからの作業を厭わないのであれば隠れる部分なのでレイヤー分けは不要。
![9960C495-64C8-4151-8918-911305593DDE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/fc7f2df6-01ed-7896-8a15-3bf8a76588c9.png)


## ボーンとメッシュの設定
　psbファイルをエディタにインポートすると自動でレイヤーごとに分割されたオブジェクトができる。<b>オブジェクトのsprint edit</b>からボーンの設定ができる。<b>Skinning Editorに変更し、Create Boneからボーンを設定</b>する。このボーンを元にアニメーションを作成するため、骨格を想定して設定するのがいい。

![2A3C16E9-D8A1-4E99-A6F2-01AA07E3686A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/cbf820d7-f76e-b5d3-9b83-ff60056454a1.jpeg)


![9815623A-D189-49DB-A27D-8482F9ED528A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/a0e438f6-480f-6467-5e36-671b4c9e44cc.jpeg)
　ボーンを作成し終わったらジオメトリを設定する。<b>Auto Geometery、Generate For All Visible </b>でモデルが自動的に分割される。メッシュは画面上に表示されないため、雑に削ってもいい。
詳しい説明は　[【Unity】2Dモデルをアニメーションさせる](https://blog.skeyll.net/how-2d-animation) を参照


##スキンの用意
　スキンはpng等で用意する。骨格モデルの方は画面に表示されないためレイヤーを分けなくても良かったが、スキンはレイヤー分けが必要になる。<b>境目は多少はみ出て書いておくとアニメーションさせた時に自然に見える</b>。
![DBFCCF0D-C057-41F0-B0F9-8B9F717B053B.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/c8f1fa69-15f6-0e47-292d-67b2878269a1.jpeg)
　容量節約のためにマルチSpriteを使っているが、<b>スライスされた時にそれぞれの部位が同じ大きさでなければスキンを変更する時に配置の調整が必要</b>になる。羽を生やしたい、角を生やしたいなど分割された枠よりも大きくはみ出ることが予想される部位は個別にpngで用意して上下左右にあらかじめ余白を作っておくのがいい。余白を作る場合は身体や頭の中心点は常に同じぐらいにする必要がある。（おそらく顔なら顎の位置が同じぐらいなら全く別の輪郭に変更しても自然に見える）
![034387F8-8EE9-4EEF-BEE1-61D156BCBE27.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/af34cae4-f0eb-561f-1368-f5fd8e5ce95b.jpeg)


## スキンの設定
　ここからがアニメーションを共有する方法の本題になる。スキンの乗せ方にはやや癖がある。まず、<b>ボーンを設定したオブジェクトをヒエラルキー上にドラッグ</b>する。そして、<b>子オブジェクトを開き、ボーンではなく骨格モデルのsprintが格納されているオブジェクトを右クリックして、子オブジェクトに2D sprintを追加</b>する。骨格モデルを追加していた場合は各オブジェクト下にsprintを追加していくだけでいいが、レイヤー分けしていなかった場合は自分で位置や角度を調整していく。

![712E523D-3E8B-46F5-9005-9A9F3202B641.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/0498f922-f888-8307-801c-16040af2c70e.png)

　ボーンは骨格モデルだけを制御するので、この状態ではアニメーションがスキンに反映されない。そのため、これらの<b>スキンを対応する各ボーンオブジェクト下に配置</b>していく必要がある。全てのSpriteを移動させたら2Dモデルが完成する。この完成したオブジェクトはオリジナルのPrefab化しておくといい。

![26C6B979-4F66-4A0C-AD4E-682E0E4916EA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/cfa90d55-bd6b-4353-f98e-5fa0c69ce55f.png)

　<b>スキンを変更する場合はボーン下にあるスキンオブジェクトのSpriteを他のスキンに入れ替える</b>。各Sprite Rendererを取得してスクリプトから入れ替えることもできる。キャラ数が少ないアクションゲーム等ならスキンを入れ替えたものをそれぞれPrefab化して利用してもいいかもしれない。

※スキン変更の例
![B3DE54AD-7934-4FC6-86F0-CD8948D8DA7E.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924887/8c404f45-dba1-d615-f93c-fba59f0aba7e.gif)
これはUI Imageでモデルを作り直して変更している。スクリプトからやる場合は大体こんな感じでスキン変更できる。

## まとめ
　仕組みとしてはアニメーションがボーンと骨格モデルのセットで登録されることを利用している。スキンはボーンオブジェクトの子としてアニメーションさせることで、スキンを変更してもボーンと骨格モデルだけが結びついているアニメーションには影響がないので共有できる。

　多少手間はあるが<b>最初のモデルさえ作ればあとはあとは同じサイズのpngにスキンの絵を描いてSpriteを作るだけでアニメーションの共有とスキン機能を実装</b>できる。完全無料でアニメーションの共有ができるので2Dゲームを作るならばぜひとも試してほしい。