既存のアニメーションを自分好みのアニメーションに変えよう！



# はじめに
本記事は[Life is Tech ! #1 Advent Calendar](https://qiita.com/advent-calendar/2020/life-is-tech)の12日目の記事になります。

Unityメンターのふくたんです。

今回の記事は結構狭い話になるとは思いますが、最後まで見てもらえると嬉しいです〜

Unityを触っている人で、3Dのゲームを作ってる時にアニメーション選定とかで結構頭抱えることが多いと思います。

Unityを使ってゲーム開発をしている人は結構共感してくれると思うのですが、
**「こんなニッチなアニメーションは自作でしかできん...」**とか
**「このアニメーションにこの動きが少しあるだけで理想のアニメーションなんだよなぁ...」**とか思うケースがあります。
そうなったときの対処法として、

- 別のアニメーションで代用する
- 圧倒的マネーパワー
- モデリングソフトに入れて根気よく1から自作でアニメーションを作る

とかで解決に持っていくのが大半じゃないでしょうか？

そう思っている中で、研究室のプロジェクトにおいて、実際にその状況にブチ当たりました。

どんな状況かというと、自分の両手の位置とユニティちゃんの両手の位置が連動し、ユニティちゃんがあたかも自分をくすぐっているのを表現させるといった感じです。
くすぐっているイメージは以下の動画を見ていただいたら。

![output-palette5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/19796bd1-977b-196d-9849-e1ed2e4bd399.gif)


正直これを要求されたときは、少し頭を抱えましたが、これはPreview版Packageの**Animation Rigging**を使うしかないと思いAnimation Riggingを使って実装しました。

その際にAnimation Riggingの素晴らしさに気づいたのでそれに関する記事を今回書けたらなと思います。

<details>
<summary>補足</summary>
上の映像は[IVRC2020](http://ivrc.net/2020/seed/)（国際学生対抗バーチャルリアリティコンテスト）SEED Stageに進出した作品の概要です。より詳しく知りたい際は[こちら](http://ivrc.net/archive/%E3%81%8F%E3%81%99%E3%81%90%E3%81%A3%E3%81%A6%E3%81%BF%EF%BD%9E%E3%81%AA-2020/)からご覧ください。
</details>


# Animation Riggingとは
Animation Riggingとは、ゲームの再生中でも動いているアニメーションをプログラマブルに変更が可能におり、既存のアニメーションに対して動かしたい動きをブレンドできたりします。

例えば、このようなユニティちゃんの歩くアニメーションがデフォルトで入っていると思うのですが
![gif_animation_001001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/a69b25d8-91a6-78a6-8cfb-1073dc8ae050.gif)

Animation Riggingを使えば、こんな感じで周りを見渡しながら歩くアニメーションを作ることができます。

![gif_animation_002002.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/6a71ed0d-777d-75a9-2717-b6da139f9fa4.gif)

実はデフォルトの歩くアニメーションに対して設定を混ぜ合わせることで周りを見渡しながら歩くような自作アニメーションになっています。

今回はこいつの作り方を話しつつ、応用できる場面とか話せたらなと思います！

# 実行環境
- Unity2019.3.15f
- Animation Rigging preview-0.2.7

※Unity2019.1から使用できるのですが、僕自身がこのプロダクトを作成する時にUnity2019.3を使用したので、Unity2019.3で説明します！予めご了承を！


# 実際に作ってみましょ〜
## Animation Riggingのパッケージのインストール

まず、Animation Riggingのパッケージをインストールしていきます。
上タブにある Window / PackageManager を押してこのようなWindowを開いてください。
![スクリーンショット 2020-12-12 15.56.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/0bee3127-dfea-71b2-c34f-46857f8594d5.png)

ただ、このままだと左の一覧にAnimation Riggingは出てこないので、出てくるように設定しましょう。
上にある Advanced ボタンから Show preview packages を選択してください。
![スクリーンショット 2020-12-12 15.58.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/cda7e3af-cb3f-5903-76c6-66192171ba29.png)

すると、こんな感じでAnimation Riggingが出てくるので、右下に install があるのでそれを押してインストールをしてください。

![スクリーンショット 2020-12-12 16.05.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/e3dd247d-34ff-8570-2d4c-54b0440c9f7e.png)

するとインストール完了です。

あとは、ユニティちゃんを使うのですが、Asset Storeから[ユニティちゃんのモデル](https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705?locale=ja-JP)をimportしてください！
import方法に関しては、Asset StoreからのAssetの入れ方と同じなので、割愛させてもらいます〜

環境がセットアップできたら次はモデルの配置です。

## モデルの設定方法
### モデルの配置
下の画像のようにCubeとユニティちゃんを配置してあげてください。

↓MainCameraから見た映像
![スクリーンショット 2020-12-12 16.18.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/e61343bd-927a-625a-ed24-deb741ca28ca.png)
配置が終わったらユニティちゃんのコンポーネントを設定します。
デフォルトでアタッチされてる IdleChanger・FaceUpdate・AutoBlink はいらないので削除または、チェックを外してください。
![スクリーンショット 2020-12-12 16.24.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/00c69bd1-9f8a-85ca-0b1e-446416ec5cf9.png)

### Boneの設定方法
unitychanの既存のアニメーションに動きをブレンドさせるBoneを設定していきます。
unitychanのGameObjectにRigBuilderとBoneRendererを入れます。
![スクリーンショット 2020-12-12 16.32.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/65b8c80f-5e07-dfab-8d4f-a9ca87225bfb.png)
<details>
<summary>Componentの補足説明</summary>
**RigBuilderとは**
RiguBuilderComponentはAnimatorComponentを持つゲームオブジェクトに入れることで、既存のAnimationに入れたい動きを混ぜ合わせるのを許可する感じです。
なので複数の動きを入れたい場合は、RigLayersに混ぜ合わせたい動きをいくつか入れていきます。<br>
**BoneRendererとは**
BoneRendererComponentを入れることで、モデルの骨格を視覚化することができます。BoneRendererを設定することでどの骨格を動かしたいのかがわかりやすくなるので入れてください。
</details>

今回は腰骨を回転させることで周りを見渡すので、腰骨のBoneを見えるようにしていきます。
unitychanのGameObjectの子オブジェクトに腰骨を位置するオブジェクトがこんな感じで設定されます。
![スクリーンショット 2020-12-12 16.53.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/a43ae18f-9f64-0526-46c6-e30a91b45bc9.png)
この3つをBoneRendererのTransformsに入れます。こんな感じで。
![スクリーンショット 2020-12-12 16.57.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/bf182d89-3f69-fd44-6a91-ff9c2738e1cd.png)
すると腰骨の部分がScene上で可視化されます。
![スクリーンショット 2020-12-12 17.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/ea8740d3-92b1-044a-3891-a4e213564f07.png)

これだと見にくいとおもうので、BoneRendererのBoneSize・Shape・Colorを変更することでより見やすくなります。
色とか緑にするとより見やすくなります。
![スクリーンショット 2020-12-12 17.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/c02d0ac2-815c-4d84-3ae8-6a71caa09646.png)

### Rigの設定方法
ここからはRigを設定してきます。
Rigとは、混ぜ合わせたい動きを設定するイメージを持ってもらって大丈夫です。

unitychanのGameObjectのすぐ下の階層にSpineRigといった空のGameObjectを作成してください。
その下の階層にOffSetという名前の空のGameObjectを作成してください。
![スクリーンショット 2020-12-12 17.21.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/c3f8b770-a332-e5b9-6716-d913702e0503.png)

次にSpineRigにRigComponentをアタッチします。
![スクリーンショット 2020-12-12 17.28.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/0e0f5fc0-715f-4a86-40f6-a385d77a407a.png)
<details>
<summary>Componentの補足説明</summary>
**Rigとは**
RigComponentを入れることで、混ぜ合わせたい動きの重み付けを設定できます。<br>
</details>

さらにOffSetのGameObjectにOverrideTransformComponentをアタッチしてください。
![スクリーンショット 2020-12-12 17.31.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/76668cf5-231c-7bea-fa8d-54125e0b9a78.png)

#### OverrideTransformComponentとは
OverrideTransformComponentを設定することで、Animationに依存されたGameObjectのTransformを上書きすることができます。
つまりこの上書きさせるGameObjectを腰骨に割り当てることで、このOverrideTransformがアタッチされたGameObjectを回転すると腰骨も回転されるといった仕組みになっています。
このように動きを既存のアニメーションに反映させるComponentはいくつかあって、**Constraint Components**と呼ばれています。

Constranit Componentsには位置や回転の値をブレンドできるのはもちろん、ある一定方向を向くように設定できるComponentも存在してたりします。

詳しくは[公式マニュアル](https://docs.unity3d.com/Packages/com.unity.animation.rigging@0.3/manual/ConstraintComponents.html)を見てもらうとイメージがつくのではないかと思います。

では、あたりを見渡すように腰骨を回転させる設定をしていきましょう。

OverrideTransformをこのように設定してください。
![スクリーンショット 2020-12-12 18.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/691d9b62-baca-74c1-7c22-8d261b221dfd.png)

変更したのは、
- Constrained Object
- SourceObjects / Override Source
- Settings / Position Weight
の3つを変更しました。
それぞれがどのような役割を果たしているのかは以下に説明します。

| プロパティ | 概要 |
|:-----------|:------------|
| Weight | 反映させる動きの重み付け。0にすると反映させなくなります |
| Constrained Object | 上書きさせられるTransform（今回でいうと腰骨） |
| SourceObjects / Override Source | 動きを上書きさせる元のGameObjectのTransform |
| Settings / Space | 上書きする座標軸の設定 (World / Local / Pivot) |
| Settings / Position Weight | 上書きさせる値の重み付け（位置） |
| Settings / Rotation Weight | 上書きさせる値の重み付け（回転） |

つまりこのOffSetを回転させることで連動して腰骨が回転します。
ただ、このままだと回転させるオブジェクトがどこにあってどれくらい回転しているのか視覚的にわからないのでわかるように設定します。

#### RigEffectorの設定
Scene上でOffSetを視覚化するためにRig Effectorを設定します。
SceneViewの右端にこのようなUIがあると思うので、**+ボタン**を押してください。

![スクリーンショット 2020-12-12 18.31.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/db11b630-708c-04c2-7109-01f507bebec8.png)

するとこのような表示になると思います。
![スクリーンショット 2020-12-12 18.33.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/d94eb695-764a-4949-a5de-fefdbe4d37e8.png)

ただ、Effectorは足もとに下図のように表示されていて非常に見にくいです。
![スクリーンショット 2020-12-12 18.34.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/0704f7db-4000-7bc5-21ac-f791385823d5.png)

なのでこのEffectorをより見やすくします。先ほどEffectorを設定したUIの画面のShapeを**LocalEffector → BoxEffector**に設定してください。
![スクリーンショット 2020-12-12 18.37.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/4a9989bb-e1a1-423b-6251-8904fd5bcb48.png)

するとこんな感じで見やすくなります。
![スクリーンショット 2020-12-12 18.40.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/e997f8b7-09ce-6638-9204-d93d9d613f76.png)


#### Effectorの動きを背骨にブレンド
unitychanのGameObjectにアタッチされたRigBuilderComponentの中のRigLayersにSpineRigを入れます。

![スクリーンショット 2020-12-12 18.51.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/310ef236-71bc-6b0b-bfda-100974e64b54.png)

これを行うことでEffectorの回転に合わせて、腰骨が回転するようになりました。

### ユニティちゃんのアニメーションの設定
ユニティちゃんのアニメーションを新しく設定していきます。
新しくAnimation Controllerを作成し、Animation Controller内の遷移をこのようにしてください。
**WALK00_F**のStateは 
Assets/unity-chan!/Unity-chan!Model/Art/Animations/unitychan_WALK00_F
にあります。
![スクリーンショット 2020-12-12 19.03.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/641eb311-00c8-98ca-956a-bf7965f9de4c.png)

この設定したAnimation ControllerをunitychanのAnimatorのControllerの中に入れてください。

その状態でゲームを起動するとユニティちゃんがこのような歩くモーションになります。![output-palette2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/ffa40322-5320-b318-aa59-ea147457ad7c.gif)

この状態でOffSetのEffectorを回転させるとこんな感じであたりを見渡すような動きになります。
足も含めて体全体が回転せずに良い感じですね！
![output-palette3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/4ed0264a-1e6f-4c5a-f4b0-f346e03e3a1c.gif)

つまり、このOffSetのエフェクターをAnimationなりスクリプトなりでY軸
回転させれば自動的に腰骨が回転するようになります。
こんな感じのAnimationをOffSetにアニメーションとして反映させると周りを見ながら歩いている感じになると思います。
![output-palette4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/92546d44-8b5d-4b1c-c1cb-310bf7f553bf.gif)

### ユニティちゃんを前に歩かせる
最後にユニティちゃんを前に歩かせて終わりですね。
以下のスクリプトをunitychanのGameObjectにアタッチすると良い感じにユニティちゃんが前に歩いてきます。

```UnitychanWalk.cs
using UnityEngine;

public class UnitychanWalk : MonoBehaviour
{
    private void OnAnimatorMove()
    {
        transform.position += transform.forward * Time.deltaTime;
    }
}
```
こんな感じになると思います。
![gif_animation_002002.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/fd859188-01ab-fe20-a1e7-7db825d69123.gif)
これで完成です〜！

これをスクリプト等で応用してもらえばこんな感じで、Targetを見つけたら走り出すとか

![gif_animation_001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/8dba9412-2c7a-e9bb-e4cd-9cab4649c14f.gif)

こんな感じでやばめのアニメーションも簡単に作れたりします。
![gif_animation_002.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/baacc0dc-0c6f-edfd-8fd7-ac87017c6c99.gif)

可能性は無限大ですね〜

ちなみに完成プロジェクトは[こちら](https://github.com/fukuchang/AnimationRiggingDemo)にあげておくので、興味があったら是非ダウンロードしてみてくだされ〜

# 最後に
いかがだったでしょうか？
僕自身一昔前まではUnityはアニメーション関連にすごく弱いイメージがあったのですが、このAnimation Riggingの登場によって
**簡単でよりリッチな作品を作れる可能性が広がった**
と思っています。
今回紹介したもの以外も様々な機能があり、それを駆使すれば剣を振りかざすアニメーションや銃を撃つ反動も表現できたりします。
つまり、**「あのアニメーションはそこらへんに転がってないし諦めよ」**とか**「細かなアニメーションはなしで良いでしょ」**という考えは徐々になくなる気配がしています！

ぜひみなさんも**Let's make animation!!**ですね。

さて、明日はかすぴー大先生が"**深層強化学習**"についてお話をしてくださるそうです。笑
字面のエグさが際立ってますね。笑

引き続き[Life is Tech！Advent Calendar](https://qiita.com/advent-calendar/2020/life-is-tech)をお楽しみに！

# 参考記事

- [Animation Rigging | Animation Rigging | 0.2.7-preview](https://docs.unity3d.com/Packages/com.unity.animation.rigging@0.2/manual/index.html)
- [Unity 2019での新アニメーション・リギング - Unite Tokyo 2019](https://www.youtube.com/watch?v=yg3jV2IzATc)


この記事は[ユニティちゃんライセンス条項](https://unity-chan.com/contents/license_jp/)のもとに提供されています。
![imageLicenseLogo (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207868/79aa03e2-6f68-c77c-34c2-7a627f4e067b.png)