【非プログラマ対象】UnityでLive2Dの売り子アプリを、コードを触らずに作りたいひとを鍛え直してコードを触らせる Cubism SDK 入門 その2

[その1](https://qiita.com/kurisaka_konabe/items/58934a2f3fbc7a7675d2) の続きです。
[次回→  その3](https://qiita.com/kurisaka_konabe/items/50eaa3247f2b9737a2d4)

## Animator内変数による状態遷移
状態と状態を繋ぐ矢印(Trasition)には、遷移する条件を書けます。
先ずはその遷移条件を書くための変数を用意します。

### 変数を作る
![make_trigger.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/a6ee6a25-1599-7d2b-f4d6-aa6cf5cf5a21.gif)
Animator内のタブをLayersタブからParameterタブに切り替えて、＋ボタンを押し、**Trigger型**変数を作ります。

変数は4種類あり…

- Float: 小数(実数)を保存できる
- Int: 整数を保存できる
- Bool: 真 or 偽(オン・オフ)を保存できる(チェックの有無)
- Trigger: Boolに似ているが、オンにすると自動的にすぐオフになる

変数名は半角英数なら**好きな名前**を付けられますが、判りやすいように**「HeadTouch」**とします。
これはUnityのAnimator Controller自身が管理する変数です。

### 遷移条件を設定する
![maked_head_tra.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/74e897e4-ca71-763a-56c7-e07fac6cc452.gif)

頭タッチ時のAnimation clip (ここではhiyori_m07)をドラッグ&ドロップし
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/09b335fa-9aba-c057-5276-854db16a19aa.png)

- Trasitionの矢印をhiyori_m01からm07に繋げ
- 矢印を選択状態にして
- InspectorのHasExitTimeのチェックを外し(遷移条件が「モーションが終わったら」じゃなくなる)
- Conditionsの「＋」ボタンを押す（本来なら複数ある変数の中からどれかを選択するが、現時点ではひとつしか変数がないのでHeadTouchになっている）
- m07からm01に戻る遷移条件は特に弄らない(頭タッチのモーションが終わったらm01に戻る)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/78f93fb7-e023-e497-3de0-a9a77f193ea1.png)

ステート（状態）の名前がAnimation clipの名前のままだと意図がわかり難いので、変更します。
ステートを選択状態にして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/7c28df57-2c4b-79ba-8949-23d4b5d0c21a.png)
Inspectorのここで名前を入力して変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/3e2af299-4b38-1b52-15c0-ec8fa3bf4030.png)

※半角英数名が無難ですが、ここでは説明の都合で全角で書いています
![head_touch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/fad23b98-fe2a-9285-6e7d-5904d94907a5.gif)
ゲームを再生ボタンで実行し、アイドリング01が再生中のときにParameterタブのTrigger型変数「HeadTouch」をクリックしてオンにしてやります。すると、矢印の遷移条件が満たされて頭タッチ時のモーションが再生されます。
その後、頭タッチのモーションが再生して終えると、アイドリング01の状態へ戻る遷移条件(HasExitTimeのチェック)が満たされたので戻ってきます。

#### ※あくまでエディタ上でのテストです
最終的には頭をタッチしたら、スクリプトでAnimator Controllerの変数にアクセスして書き換えます。
今回は、スクリプトは書かずに、エディタ上で実行中に直接変数の値を書き換えることによって簡易なテストをするに留めておきます。

※実行中の変数の変更は保存されません、再生を止めると元の値に戻ります

#### 余談（他の変数）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/edb852b8-62c7-4815-e6c6-79efae7f0e70.png)
Int(整数型)、float（小数型）、Bool型(真偽)も遷移条件として使えますし、実行中にUnityエディタ上でTrigger型変数と同様に変更が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/820af345-d7a4-001c-2305-25051553a457.png)
↑ 例えば、このように条件を複数書くと(＋ボタンで条件追加、－ボタンで条件削除)全ての条件を満たさないと遷移しません。（HeadTouchトリガーが押され 且つ Hpが10より大きく 且つ Speed が50 より小さく 且つ IsJumpingが真 なら遷移）

### アイドリング01からだけじゃなく、02と03からも遷移したいんだが？
ごもっともです。
じゃあ、書くか！ えっと…02と03からも同じ様に同じ線を引いて…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/b87e0db2-be06-7e49-d95c-dbf54b7c4356.png)
**↑ ダメな例です！** 
何がダメなんでしょう？

- まず、単純に同じ線を引くのがかったるい、面倒
- ごちゃごちゃと線がスパゲッティにこんがらがって見にくい、醜い
- アイドリングが10種類とかになったらどうする気だ！
- 遷移条件に変更が入ったら全箇所手動で変更→メンテナンス性が悪い

などが挙げられます。
なので **「Any State」** という便利なステートを使います。最初から鎮座していた奴です。
名前の通り **「どんな状態でも」** という便利なステートです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/26dee75a-0175-3b83-d4fd-a53a0488471f.png)
Any Stateから頭タッチへ**HeadTouchトリガー**を条件に繋ぎましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/2646e6b3-01c4-0cd1-549b-4815baadc1d7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/fc521c58-0f80-f201-c7c2-cbf84208e66e.png)

**HasExitTimeのチェックを外すの忘れずに**(非常によく忘れる)
ただし、戻り先が困りました。頭タッチからAny Stateには繋がりません。
なので、取り敢えずアイドリング01に戻しておきます。

これで実行すれば…
![aniy_touch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/78a6b679-f5d6-4375-3172-8c0feafee260.gif)

どのモーション中であってもHeadTouchトリガーがオンになれば、頭タッチ状態に遷移します。
ただし、**戻り先が必ず01になってしまう**問題があります(別に問題ないってひとも居ると思いますが…)。

#### もっと言えば、できればアイドリング01～03をランダムに再生したい
ランダムは手段が色々ありすぎるのと、どの方法もトリッキー過ぎて初心者にはちょっと難しいです。

色々改善の余地はありますが、取り敢えず今回はこれで通します。
次回はいよいよ、実際の頭タッチから遷移できるように、コードから制御していきます。

[次回→  その3](https://qiita.com/kurisaka_konabe/items/50eaa3247f2b9737a2d4)


## 更新履歴
2019年12月09日 取り敢えず投稿