Unity2018の新2DAnimationツール(Bone Editor &Weight Editor)の使い方を学ぶ

# はじめに

本文書はUnity2018で追加される予定の[新アニメーションツール](https://github.com/Unity-Technologies/2d-animation-samples)を使用して見て、Unity2018以降の2Dゲームワークフローを掴んで見たい人向けです。

# 新アニメーションツールとは

[フォーラム](https://forum.unity.com/threads/2d-animation-preview-packages.521778/)の情報によると本ツールは以下のようなものです

- Unityネイティブのアニメーション機能である
- すでにUnityに取り込まれたAnima2Dとは別物である
- Spineのような頂点モーフまでサポートされる
- Unity内で完結する
- もちろん無料である

![2DAnimation.gif](https://qiita-image-store.s3.amazonaws.com/0/18557/cc3533ad-7922-d5d5-b987-6aedee16ed9b.gif)
※フォーラムの動画

# 導入

[Githubのサンプル手順](https://github.com/Unity-Technologies/2d-animation-samples)どうりに進めればOKです

## Unity2018の取得

https://unity3d.com/jp/unity/beta-download
からUnity2018.1以降をダウンロードします。本文書作成環境は2018.1.0b11です。

## パッケージの取得

簡単なのは[Github](https://github.com/Unity-Technologies/2d-animation-samples)からプロジェクト丸々ダウンロードする方法です。

マニュアルな導入方法はmanifest変更する方法があるらしいです。
プロジェクトルート直下(Assetsとおなじ階層)のPackage/manifest.jsonに以下を書き込んでUnityを立ち上げるとUnity Package Managerがパッケージを取得してくれるようです。Package Managerって便利ですね。

```
{
  "dependencies": {
  "com.unity.2d.common":"1.0.8-experimental",
  "com.unity.2d.animation":"1.0.13-experimental",
  "com.unity.2d.ik":"1.0.3-experimental"
  },
  "registry": "https://staging-packages.unity.com"
}
```

# 素材の準備

まずはアニメーションさせる素材を用意しましょう。簡単にアニメーションがつけられそうで、動かすモチベーションが保てそうな奴を用意しましょう。

私は[ニコニコ静画](http://seiga.nicovideo.jp/seiga/im3467128)で見つけたSD島風のフリー素材の島風を利用することにしました。かゆらゆか様が書いておられる内容的に、Web上＆再配布出ない&権利表記をするならば使用して良さそうです。

ぜかましの耳がピョコピョコしたら可愛いと思いませんか？私は思います。

![スクリーンショット 2018-03-21 21.09.14.png](https://qiita-image-store.s3.amazonaws.com/0/18557/4d1b029f-fa22-98ef-0e35-882534113527.png)

©2014 DMM.com POWERCHORD STUDIO / C2 / KADOKAWA All Rights Reserved. http://www.dmm.com/netgame/feature/kancolle.html
©かゆらゆか http://www7b.biglobe.ne.jp/~kayurayuka/

# Spriteセットアップ

## インポート

![スクリーンショット 2018-03-21 21.19.42.png](https://qiita-image-store.s3.amazonaws.com/0/18557/57952762-8b39-5128-d580-2ea05830c710.png)

普通にAssets/Spritesに放り込みます。以上

## SpriteEditor

![スクリーンショット 2018-03-21 21.20.45.png](https://qiita-image-store.s3.amazonaws.com/0/18557/16b5d96f-76c4-90b2-5d3a-7da07a915c0f.png)

放り込むとSpriteとしてImportされるのでSpriteEditorを開きます。
今までだとSpriteのpivotなどを編集するEditorだったのが、左上のボタン内にBone Editorというのが追加されているかと思います。

![スクリーンショット 2018-03-21 21.22.13.png](https://qiita-image-store.s3.amazonaws.com/0/18557/61e35e26-7c8f-051a-8759-d73aef2eca09.png)

BoneEditorを選択するとBone Toolsが表示されます

## ボーンを入れる

![スクリーンショット 2018-03-21 21.24.20.png](https://qiita-image-store.s3.amazonaws.com/0/18557/0e78de1b-dfc7-7b42-af73-2d31ce9e039a.png)

一番左にある「Create Bone」を選択しおへそをRootとし、耳？の先まで関節っぽく繋いであげます。なんとなく折り曲げたい位置ごとに左クリックして繋げましょう。右クリックすると一旦キャンセルできます。耳？の先まで繋いだら右クリックしてキャンセル、頭をクリックして頭からもう片方の耳までクリックで繋いでこんな感じにします。

![スクリーンショット 2018-03-21 21.29.26.png](https://qiita-image-store.s3.amazonaws.com/0/18557/3455eea0-4ff9-2673-b966-77cb022e4daa.png)

## メッシュをわる

頂点モーフをするために頂点を割ります。左上のボタンから今度は「Skin Weight And Geometry Editor」を選択します。その横のボタンの「Geometry」を押すと頂点編集モードになります。マニュアルで頂点を割ることもできますが、今回はめんどくさいので自動で割ります。「Generate」ボタンを押して出てくるダイアログでパラメータを３つとも大きめにして「Generate」ボタンを押します。

![スクリーンショット 2018-03-21 21.32.12.png](https://qiita-image-store.s3.amazonaws.com/0/18557/bd252adc-4cd4-4a77-b5c4-496aae29eb5a.png)

はい割れました。今回は耳のあたりが動かしたいので、耳周りが細かく割れている感じになっているので良しとします。

![スクリーンショット 2018-03-21 21.36.21.png](https://qiita-image-store.s3.amazonaws.com/0/18557/66e955e2-ad1e-c797-81cf-7bcee44cef56.png)

## ウェイトをつける

あとは作ったボーンの影響ウェイトをさっき割った頂点にどのように反映するかを調整します。上部の「Weights」ボタンを押すとWeightEditorが表示されるのでBrushモードにします。

![スクリーンショット 2018-03-21 21.39.01.png](https://qiita-image-store.s3.amazonaws.com/0/18557/60e95cfd-ee35-4671-235a-65ab3a668018.png)

Brushモードにした状態で各ボーンを選択(メニューから選ぶからボーン自体をクリック)して、頂点のあたりをドラッグします。するとボーンの色がつきます。面を塗るというより頂点をどのボーンに割り当てるか？というイメージで塗ります。

![スクリーンショット 2018-03-21 21.46.35.png](https://qiita-image-store.s3.amazonaws.com/0/18557/333a8073-9d8b-ae47-bc5d-59553d7810f5.png)

まあこんなもんでいいんじゃ無いでしょうか。基本的にこれでセットアップは完了です。

# コンポーネントを用意する

## Skiningをセットアップする

スプライトをシーンにドロップし、SpriteSkinをAddComponentします。
![スクリーンショット 2018-03-21 21.51.35.png](https://qiita-image-store.s3.amazonaws.com/0/18557/064092c5-85ba-b562-84d9-94c10e1f2fc9.png)
AddComponentしたら「CreateBones」ボタンをクリックします。すると先ほどセットアップしたBoneがGameObjectとして生成されます。
![スクリーンショット 2018-03-21 21.53.54.png](https://qiita-image-store.s3.amazonaws.com/0/18557/1b003453-981d-f70e-51d6-10300a4cae70.png)

ここで生成されたGameObjectの例えばHeadなどのZ回転をいじってみると、アニメーションが確認できます。ここでAnimationを作ってしまってもいいですがAnimationつけるのを楽にするためにIKをセットアップします。

## IKをセットアップする

先ほどSpriteSkinをつけたGameObjectにIKManager2Dをつけます。

![スクリーンショット 2018-03-21 21.58.52.png](https://qiita-image-store.s3.amazonaws.com/0/18557/3002cdef-5e9e-397a-00f6-d0c708662cda.png)

![スクリーンショット 2018-03-21 21.59.54.png](https://qiita-image-store.s3.amazonaws.com/0/18557/de1d6919-6f59-cfe3-fa15-7432c2b52526.png)

### コンポーネントつける

IKSolverのリストに新しいSolverを足します。まだよくわかって無いですが「Limb」を足します。できたSolverをRigheEarSolverとし、もう一個足してLeftEarSolverとします。

![スクリーンショット 2018-03-21 22.14.03.png](https://qiita-image-store.s3.amazonaws.com/0/18557/1099b742-6ff8-453b-1cd5-712fd92aacff.png)
こんな感じ。

SolverにはTarget(IKで動かす先っちょのGameObject)と、Effectorをつけます。

### Targetを作る

まずはTargetとなるGameObjectを追加します。lear2までは自動的に作られたBoneなので、その先に新しくGameObjectを作って調整します。同じく右耳の先にも新しいGameObjectを作って、耳先の位置になるように調整します。

こんな感じ
![スクリーンショット 2018-03-21 22.15.22.png](https://qiita-image-store.s3.amazonaws.com/0/18557/dbece3b1-9f6b-e793-08ac-e4a0eaae63be.png)

### Effectorつける

作ったTargetをSolverにセットしたら「Create Effector」を押します。
![スクリーンショット 2018-03-21 22.18.35.png](https://qiita-image-store.s3.amazonaws.com/0/18557/f0aaf242-1dae-15ac-7ec3-1434b58b5ce9.png)

### 動かしてみる

![zekamashi1.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/18557/a2879fd9-c27d-0b3e-991d-f2f5fcce32f7.gif)

作ったEffectorを動かしてみると耳がひょこひょこします。可愛いですね。

あとはUnityのAnimation&AnimatorでEffectorを動かすアニメーションをつけます。

![zekamashi2.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/18557/df3a92eb-36f5-e9f8-4862-e04e90c05b2f.gif)

気持ち悪いですね。でもそれはアニメーションつけた奴のセンスが悪いからです。きっとあなたならもっといいアニメーションがつけられます。

#　まとめ

Unityネイティブでスキニングアニメーションまでできるようになったのは大変嬉しいですね。そのうちSpineの代替として使えるようになりそうな未来も感じました。

# 参考

- フォーラム https://forum.unity.com/threads/2d-animation-preview-packages.521778/
- Github https://github.com/Unity-Technologies/2d-animation-samples)
- かならゆか様の島風(http://seiga.nicovideo.jp/seiga/im3467128)