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

##はじめに
コードからメカニムの状態遷移を制御する初歩的な内容です。

前回
[ その1 ](https://qiita.com/kurisaka_konabe/items/58934a2f3fbc7a7675d2)
[ その2 ](https://qiita.com/kurisaka_konabe/items/6bdff265cdbe8fd9b846)
## コードでAnimator Controllerの変数を操作する
### スクリプトの用意
[SDK チュートリアル 「当たり判定の設定」](https://docs.live2d.com/cubism-sdk-tutorials/hittest/) にあるCubismHitTest.csを参考に改造してみました。
（クラス名は筆者が適当に付けたものです)
初心者向けに、これでもか！ というほどコメントを盛り込んでいます。

```cs:CubismHitAreaDitector.cs
using UnityEngine;
using Live2D.Cubism.Framework.Raycasting;

public class CubismHitAreaDitector : MonoBehaviour
{
    // アニメーターをコンポーネントを入れておく為の器
    Animator anim;
    // 同様にキュビズムレイキャスター型を入れておく為の器
    CubismRaycaster raycaster;

    // 起動時に1回だけ呼ばれる
    private void Start()
    {
        // 自分にアタッチされているAnimatorコンポーネントを取得、
        // 以後「anim.」で色々呼べる
        anim = GetComponent<Animator>();
        // 自分にアタッチされている CubismRaycaster コンポーネントを取得  ,
        // 以後「raycaster.」で色々呼べる
        raycaster = GetComponent<CubismRaycaster>();
    }

    // 秒間60回くらいぐるぐる回ってUpdate()内に書かれた処理が実行される
    private void Update()
    {
        // もし、左クリック(0ボタン)を押し下げた瞬間じゃなかったら(「！」は否定)
        if (!Input.GetMouseButtonDown(0))
        {
            // Update(){  }から抜けて早々にお帰り頂く(↓以下の処理は実行されない)
            return;
        }

        // -----クリックした瞬間なら以下の処理を実行-------
        
        // クリックした箇所のアートメッシュを最大4つまで取得して覚えておける器を用意
        var results = new CubismRaycastHit[4];
        // マウス座標に向かってメインカメラから出るレーザー光線にする
        var ray = Camera.main.ScreenPointToRay(Input.mousePosition);
        // レーザーを飛ばしてヒット数と結果を取得
        var hitCount = raycaster.Raycast(ray, results);

        // ヒットしたアートメッシュの数だけfor文を回してIDをチェック
        for (var i = 0; i < hitCount; i++)
        {  
            // i番目の検出結果のアートメッシュ名を取得
            var hitID = results[i].Drawable.name;
            Debug.Log("クリックしたアートメッシュIDは" + hitID + "です。");
            if (hitID == "HitAreaHead")
            {
                // アニメーターの指定トリガー型変数をONにする
                anim.SetTrigger("HeadTouch");
            }
            if (hitID == "HitAreaBust")
            {
                anim.SetTrigger("BustTouch");
            }
        }// forの閉じ括弧
    }// Update()の閉じ括弧
}// classの閉じ括弧
 // 初心者は閉じ括弧の数を間違えやすいので、対応する括弧を常に意識すること！ 同じ階層の括弧は縦に揃える
```

まずはこの
CubismHitAreaDitector
というクラス名をコピーしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/fda1d28d-bfcd-e028-e4ec-ba29e7c75d2e.png)

Scriptsフォルダ内で右クリック→Create→C# Scriptを選択し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/bd15635c-5e71-b457-c17d-32c34d260d6f.png)
貼り付けます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/eb06f824-f996-2b76-49ab-a592a9bff95a.png)
Enterで確定したら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/12cbe645-523f-8f1b-0ad9-dd3bcb393510.png)
ダブルクリックするか右クリックからOpenで開きます。
正しくインストールされていれば、VisualStudioが立ち上がる筈です。

↑先程のCubismHitAreaDitector.csの中身を全部コピーして貼り付けてください。

#### ※余談 注意！！
「全部コピーして貼ってね！」っと言うと、
極稀に作ったときに元から書いてある初期コード↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/5de07bf1-bc90-6417-3a5c-513f70126c17.png)
を残したまま追加で貼り付けをされる方がいらっしゃいます。
元からあるコードは全部消して貼り付けてください。
※「class CubismHitAreaDitector」という記述が同一プロジェクト内で2箇所あると、クラスの二重定義でエラーになってしまいます。

また、Visual Studio上で保存するのを忘れないようにしてください(「*」マークは未保存)。
![コメント 2020-06-09 123525.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/89c04100-4c48-91da-ebf9-43f641cbee1e.png)
C# のスクリプトは保存しないとUnity側には反映されないので注意しましょう。

### コンポーネントを追加する(1月10日追記)
hiyoriちゃんのオブジェクトのルート(1番の親オブジェクト)に今作ったCubismHitAreaDitectorコンポーネントを追加します。

InspectorのAdd Componentボタンを押して追加しましょう。
(↓の方にあるgifアニメ参照)

### 他に必要なコンポーネントを追加する
#### 公式参考資料
[SDK チュートリアル 当たり判定の設定](https://docs.live2d.com/cubism-sdk-tutorials/hittest/) を参考にしています。

#### Cubism Raycaster
hiyoriちゃんのオブジェクトのルート(1番の親オブジェクト)にコンポーネントを追加します。
![Raycaster.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/0e9113da-5e21-13bc-ae8d-bc168cf458ac.gif)
hiyoriのオブジェクトを選択し、InspectorのAdd Componentボタンを押して、
**「Cubism Raycaster」**を追加します。
※よく似た名前の「Cubism Raycastable」と間違えないでください。

#### Cubism Raycastable
ヒットを検出したい当たり判定用のアートメッシュのオブジェクトを選択し、
Add Componentで**「Cubism Raycastable」**を追加します。
「レイキャスト可能なもの」という意味です。
![Raycastable.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/21cb7dd6-19a4-3545-cd2c-64d1789fd4ee.gif)

複数当たり判定がある場合は、shiftやCtrlで複数選択して、まとめてAdd Component可能です。

### 実行
実行すると、頭をタッチしたときに当たり判定用のアートメッシュを検出、
Trigger型変数をオンにして、頭タッチのステートに遷移する筈です。
![HeadTouchByCode.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/e76d6d4a-900f-5197-09fb-af4061a9014b.gif)
※Trigger型変数は一瞬でオフになるため、エディタ上ではオンになっている瞬間が視えないですが、他の型の変数だと変化がわかります。

#### 余談 他の変数の操作例
```cs

anim.SetInteger("Hp", 4);  // 整数
anim.SetFloat("Speed", 10.0f);  // 小数
anim.SetBool("IsJumping", true);  // 真偽
```

###応用
これまでの話を理解できていれば、胸タッチも追加できる筈です。
(hiyori_m09の怒っているモーションにしてみました)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/e883f7ee-9dcf-a64a-7625-e0eef24e216b.png)

改造してみましょう。

### 次回
頭をグリグリ動かしたり、パラメータを直接いじる予定…
## 更新履歴
2020年01月10日 CubismHitAreaDitectorをAddComponentする記述が抜けていたのを追記
2019年12月10日 取り敢えず投稿