Unity2019の2D Animationでいらすとやを走らせた

# はじめに

[前回の記事](https://qiita.com/naninunenoy/items/54d0f3e9a4949a7cc696)ではUnity2018の2D Animationで[いらすとや](https://www.irasutoya.com)の素材を使ってスプライトアニメーションを作りました。

1年経ってUnity2019.3が出て、2D Animationもとうとう preview が外れたらしいので改めてまとめました。

 * https://docs.unity3d.com/Packages/com.unity.2d.animation@3.0/manual/index.html

今回は前回より少し頑張って走るアニメーションです。
(色々荒いのが見えてますが、これが私の限界です...)

![irasutoya_run.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/3c9e00ad-799c-3731-b782-41f90b8f1f34.gif)

* [新社会人・新入社員のイラスト「走る男性社員」](https://www.irasutoya.com/2012/02/blog-post_1278.html)

なお環境は 

 * Unity 2019.3
 * 2D Animation 3.0.8

です。

# 作り方

2D Animationを[Window] > [Package Manager]からimportしてください。

動かしたい画像をUnityのプロジェクトにドラッグ&ドロップなどで追加します。
その際、inspectorから画像のTexture Typeが `Sprite (2D and UI)` になるようにします。

inspectorの[Sprite Editor]を押すと編集windowが開きます。
window左上のプルダウンから `Skinning Editor` を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/d7e67476-22d5-2a0c-0a7d-d7c3224dc93a.png)

[Create Bones] から設定したいようにボーンを追加していきます。
また、ボーンを消したい場合は ⌘+[delete] で消せます。(windowsなら ctrl+deleteかな?)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/b7ccc7fa-ffe5-e111-39f6-4928bfdfb97b.png)

画像の輪郭線を `Geometry` から設定します。[Auto Geometry] を選択し、3つのパラメータをいじって[Generate For Selected]を押すと、輪郭が設定できます。
`Weights` にチェックを入れておくと同時に設定してくれるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/8c265574-351d-f4db-4cdf-aec649fee7ad.png)

値をいじって再生成して合わせるなり、[Edit Geometry]から自分で編集するなりして下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/fe59bcdb-c6ce-67c8-e6e0-b4aad4b6acbd.png)

ちなみにですが、この時点でボーンを動かしてみることが出来ます。

![arm.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/0d553ea9-4117-c0c3-49f6-dc6c7ba5fbad.gif)

また、編集も⌘+[z]でUndoできるなど、機能のパワーアップが見られます。

ここから先はあまり変わっておらず、空のGameObjectをシーンに追加して、先ほど編集した画像を空のGameObjectにドラッグします。

そして、inspectorの [Add Component] から `Sprite Skin` を追加して、[Create Bones] すればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/49c2b356-2956-7185-87ee-e6aa27456bec.png)

## しかし、

鞄を持った腕を動かすとあられもない姿になります。

![スクリーンショット 2019-12-24 17.34.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/7f8b4b68-e9c5-099e-dcc0-695e1c4af244.png)

一枚絵にボーンを設定しているので、肩のボーンを動かすと顔にも影響してしまいます。おまけに鞄が体にめり込んでしまっています。

流石にこの辺りが一枚絵で行う限界のようです。走るアニメーションのためパーツ分けを行いました。
(2D Animationの説明はここでほとんど終わりになります)

# クオリティアップのために

## パーツ分け

パーツ分けには PhotoShop を使いました。ほぼ初めて使うツールでしたが、なんとかなりました。
無料でやるなら GIMP などで作業することになると思います。

パーツ分けは Live2Dのページを参考にしました。

 * [素材分けについて](https://docs.live2d.com/cubism-editor-manual/divide-the-material/?locale=ja)

基本的には腕や顔など切り分けたい箇所が含むように四角で選択。選択部分を別レイヤにコピーして、腕など目的の部分以外を消しゴムツールで削いでいく。そして全パーツできたら1枚の画像に合わせるという手順で作りました。(もっと確立された方法があると思いますが)

<img width="971" alt="スクリーンショット 2019-12-24 18.39.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/8f999ad2-d78e-0a7e-ddfd-48b44c859840.png">

今回は諦めましたが、さらにクオリティを高めるなら、

 * 腕や胴の接合部は丸くする
    * 角ばってると動かした時に不自然見える
 * 消し残しを徹底的に消す
    * あとでUnityでSpriteを分ける時に、ゴミのピクセルも拾ってしまう

必要もあるかと思いました。

## Unityにインポート

PhotoShopで出力した画像をUnityのプロジェクトに持ってきます。
そして1枚の画像を複数のSpriteに分けるのですが、Sprite Modeを `Multiple` にしないとSprite Editorの[Slice]が選択できないので注意してください。

![スクリーンショット 2019-12-24 17.40.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/d2140d88-8fbb-c6a0-fecb-d48cb20e1e3c.png)

前述のゴミピクセルがあるとここのSpriteが必要以上に増えます。
(不要な領域は⌘+[delete]で消せます)

ボーンの設定もこの時行いますが、一枚絵では無くなったので設定するボーンも減ります。基本的には

* 頭など関節の無いSprite
    * ボーンを1本だけ設定する

* 腕など関節を設定したいSprite
    * ボーンを設定する
    * GeometryとWeightも設定する

ことになると思います。関節のないSpriteでも、ボーンを設定しないと回転中心が画像の真ん中になってしまうので、ボーンを設定した方が意図通りに回転させやすいです。
顔だとボーンを設定すれば首中心に回転させられますが、無ければ鼻のあたりが回転の中心になってしうといった具合です。

## 組み立てる

前回同様、空のGameObjectに画像を設定します。しかし今回はSpriteが分かれているので、Spriteの数だけ追加してやる必要があります。 `Sprite Skin` の設定とボーンの作成もこの時にやっておきましょう。

![スクリーンショット 2019-12-24 19.27.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/f47ad3bd-1923-8dd0-7050-251818cb14ab.png)

この時は人の形をしていません。自力で人の形に直す必要があります。この時ボーンの親子関係も考慮した階層にした方があとで楽かもしれません。

![スクリーンショット 2019-12-24 19.29.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274974/0e85aa7e-2173-6033-07a7-4e80edf5d6b9.png)

この時点で Prefab 化しておくのが無難でしょう。

この時少し混乱したのが、先ほど `Sprite Skin` を設定したGameObjectを回転させてもボーンの回転にはならないということです。ボーンの末端を軸に動かしたいのであれば、子の Transform を回転させてください。

これで肩を回しても顔などに影響しなくなりました。

## Sorting Order

しかし、腕が体にめり込む問題が依然としてあります。
`Sprite Skin` には **Order in Layer** の設定があり、Sprite同士の前後関係を定義できます。整数で設定しますが、**数が大きいほど前に来ます**。負の値も設定可能です。

デフォルトでは `default` のLayerにSpriteが属しているので、そのLayerの中での前後関係になります。別途Layerも追加定義すれば、レイヤ同士の前後関係も定義できるようです。

胴を基準に `0` として以下のように設定しました。

* 右手と右足：-1
* 胴：0
* 顔と左足:1
* 左手と鞄:2

あとはUnityでキーフレームアニメーションを作れば最初のアニメーションの完成です。

# 感想

最近のスマホゲームのアニメーションを作ってる人たちは凄まじいなと思いました。