【Unity】VRoidStudioで作ったキャラクターと戯れる〜表情操作とアニメーション作成〜

マイケル

みなさんこんにちは！
マイケルです！！

エレキベア

こんにちクマ〜〜〜

マイケル

今日は前回に引き続き、
VRoidStudioで作ったモデルを触っていこうと思います！

【Unity】VRoidStudioで作ったキャラクターと戯れる〜キャラ作成と取込〜

マイケルみなさんこんにちは！マイケルです！！エレキベアクマ〜〜〜マイケル今日は息抜きに VRoidStudio というソフトを使って、３Dキャラクターを作って遊んでみるよ！！VRoid...

↑前回の記事

マイケル

とりあえずアセットのアニメーションを使って動かすことはできたけど
何だか物足りない・・・
表情を付けて、アニメーションも自分で作ってみよう！

エレキベア

楽しみクマ〜〜〜

表情を変えてみる
表情を作ってみる
がんば●ぞいを作る
おわりに

表情を変えてみる

マイケル

それじゃ手始めに表情を変えてみよう！
実はVRoidStudioで作ったモデルには既に、デフォルトで表情が割り当てられています！

エレキベア

VRoidStudio便利すぎクマ

マイケル

この表情をスクリプト上から呼び出してみよう！
まず準備としてAnimationControllerは下記のように設定します！

マイケル

表情はImmediatelySetValueメソッドを呼び出すことで設定できます！
下記スクリプトを、VRMBlendShapeProxyが
アタッチされたオブジェクトに追加しましょう！

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using VRM;

/// <summary>
/// 青葉操作クラス
/// </summary>
public class AobaController : MonoBehaviour
{
    private VRMBlendShapeProxy _blendShapes;
    private Animator _animator;
    
    void Start()
    {
        _blendShapes = GetComponent<VRMBlendShapeProxy>();
        _animator = GetComponent<Animator>();
    }
    
    void Update()
    {
        // タップされたら怒る
        if (Input.GetMouseButtonDown(0))
        {
            _animator.SetTrigger("isAngry");
        }
        
        // 怒っていれば呆れる
        var isAngry = _animator.GetCurrentAnimatorClipInfo(0)[0].clip.name == "AGIA_Idle_angry_01_hands_on_waist";
        _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Sorrow), isAngry ? 1.0f : 0.0f);
    }
}

↑アニメーションによって表情を変える

マイケル

すると、このように表情が変わることを確認できました！

エレキベア

簡単クマ〜〜〜〜

表情を作ってみる

マイケル

それでは次に表情を作ってみましょう！
BlendShapeファイルからCreate BlendShapeClipボタンをクリックしてファイルを作成します。

マイケル

ここでは名前をCrazyとします。

エレキベア

（クレイジー・・・？）

マイケル

作成したら、自由にスライダーを調整して表情を作りましょう！

エレキベア

（なんだこの顔はクマ・・・）

マイケル

選択するプリセットについては、glTF_VRM_BlendShape.cs
に追記することで追加できます！

    public enum BlendShapePreset
    {
・・・略・・・

        Crazy, // 追加

    }

    [Serializable]
    [JsonSchema(Title = "vrm.blendshape.group", Description = "BlendShapeClip of UniVRM")]
    public class glTF_VRM_BlendShapeGroup
    {
        [JsonSchema(Description = "Expression name")]
        public string name;

        [JsonSchema(Description = "Predefined Expression name", EnumValues = new object[] {
・・・略・・・

            "Crazy", // 追加

        }, EnumSerializationType = EnumSerializationType.AsString)]
・・・略・・・
    }

↑Presetの追加

マイケル

あとは先ほどと同じように、表情のパラメータを変更することで
設定することができます！

エレキベア

(やる気なさそうクマ・・・)

マイケル

これをスクリプトからも呼び出してみましょう！
雑ですが下記のようにしてみます！！

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using VRM;

/// <summary>
/// 青葉操作クラス
/// </summary>
public class AobaController : MonoBehaviour
{
    private VRMBlendShapeProxy _blendShapes;
    private Animator _animator;
    
    /// <summary>
    /// クレイジー判定用
    /// </summary>
    private float _crazyChangeTime = 3.0f;
    private float _crazyTotalTime;
    private float _crazyValue;
    private bool _isCrazy;
    
    void Start()
    {
        _blendShapes = GetComponent<VRMBlendShapeProxy>();
        _animator = GetComponent<Animator>();
        // クレイジー用変数初期化
        _crazyTotalTime = 0.0f;
        _crazyValue = 0.0f;
        _isCrazy = false;
    }
    
    void Update()
    {
        // タップされたら怒る
        if (Input.GetMouseButtonDown(0))
        {
            _animator.SetTrigger("isAngry");
        }
        
        // 怒っていれば呆れる
        var isAngry = _animator.GetCurrentAnimatorClipInfo(0)[0].clip.name == "AGIA_Idle_angry_01_hands_on_waist";
        if (isAngry)
        {
            _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Crazy), 0.0f);
            _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Sorrow), 1.0f);
        }
        else
        {
            // 一定間隔でクレイジーになる
            _crazyTotalTime += Time.deltaTime;
            if (_crazyTotalTime >= _crazyChangeTime)
            {
                _isCrazy = !_isCrazy;
                _crazyTotalTime = 0.0f;
            }
            _crazyValue = Mathf.Lerp(_crazyValue, _isCrazy ? 1.0f : 0.0f, _crazyTotalTime * 3.0f);
            _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Crazy), _crazyValue);
        }
    }
}

マイケル

問題なく表情が変わっていることが確認できました

エレキベア

人間らしさが出てきたクマ〜〜〜

がんば●ぞいを作る

マイケル

表情の操作を覚えたところで、オリジナルの動きも作ってみましょう！
ここでは例の がんばるぞい っぽいのを作ってみます！

エレキベア

有名なやつクマね

表情の作成

マイケル

まずは表情の作成！
Fightという名前で作ってみました！

マイケル

変化が少ないけどまあいいでしょう！

エレキベア

（いいのかクマ・・・）

動きの作成

マイケル

そして次はアニメーションを作ります！
外部の３Dツールを使用してもいいですが、ここではUnity内部で作成できるVery Animationというアセットを使用しました！

マイケル

Very Animationは下記の記事で紹介しているので
こちらも是非みてみてください！

【Unity】「Very Animation」を使って３Dアニメーションを作成する

マイケルみなさんこんにちは！マイケルです！！エレキベアこんにちクマ〜〜〜〜！！マイケル今日はUnityのアセット、「Very Animation」を使ってアニメーションを作成してみるぞ！...

エレキベア

なつかしクマ〜〜〜〜

マイケル

手順はざっくりですが下記の通り！

エレキベア

(マジでざっくりクマ・・・。)

マイケル

そんな感じで出来たアニメーションがこちら！

エレキベア

違和感あるクマがそれっぽいクマね

組み合わせる

マイケル

あとは表情とアニメーションを組み合わせましょう！
まずはアニメーションを呼び出すためのボタンを用意して・・・

マイケル

下記のようにそれぞれのアニメーションに対する表情を設定します！
さっきよりは綺麗になったんじゃないかな！

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using VRM;

/// <summary>
/// 青葉操作クラス
/// </summary>
public class AobaController : MonoBehaviour
{
    private VRMBlendShapeProxy _blendShapes;
    private Animator _animator;
    
    /// <summary>
    /// クレイジー判定用
    /// </summary>
    private float _crazyChangeTime = 3.0f;
    private float _crazyTotalTime;
    private float _crazyValue;
    private bool _isCrazy;

    void Start()
    {
        _blendShapes = GetComponent<VRMBlendShapeProxy>();
        _animator = GetComponent<Animator>();
        // クレイジー用変数初期化
        _crazyTotalTime = 0.0f;
        _crazyValue = 0.0f;
        _isCrazy = false;
    }
    
    void Update()
    {
        // 表情初期化
        _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Fight), 0.0f);
        _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Crazy), 0.0f);
        _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Sorrow), 0.0f);
        
        // 再生中のアニメーションに合わせて処理を変える
        switch (_animator.GetCurrentAnimatorClipInfo(0)[0].clip.name)
        {
            // がんばるぞい
            case "Fight":
                _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Fight), 1.0f);
                break;
            // 怒っている
            case "AGIA_Idle_angry_01_hands_on_waist":
                _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Sorrow), 1.0f);
                break;
            // 通常
            default:
                // タップされたら怒る
                if (!EventSystem.current.IsPointerOverGameObject() && Input.GetMouseButtonDown(0))
                {
                    _animator.SetTrigger("isAngry");
                }
                // 一定間隔でクレイジーになる
                _crazyTotalTime += Time.deltaTime;
                if (_crazyTotalTime >= _crazyChangeTime)
                {
                    _isCrazy = !_isCrazy;
                    _crazyTotalTime = 0.0f;
                }
                _crazyValue = Mathf.Lerp(_crazyValue, _isCrazy ? 1.0f : 0.0f, _crazyTotalTime * 3.0f);
                _blendShapes.ImmediatelySetValue(BlendShapeKey.CreateFromPreset(BlendShapePreset.Crazy), _crazyValue);
                break;
                
        }
    }

    /// <summary>
    /// ぞいボタン押下時
    /// </summary>
    public void PushZoiButton()
    {
        _animator.SetTrigger("isFight");
    }
}

↑アニメーション呼び出しと表情設定

マイケル

これでがんばるぞいの完成です！！

エレキベア

かわいいクマ〜〜〜〜〜

まだまだ改良

マイケル

しかしまだまだ迫力が足りない・・・！
改良していくぜ！

エレキベア

（これに迫力は必要なのかクマ・・・）

マイケル

まずは下記のようにがんばるぞい用のサブカメラを作成します！

マイケル

そしてセリフ表示用のCanvasを作成して、
アニメーションをつけたセリフを配置します！

マイケル

あとはこれらを切り替える関数とクラスを用意して・・・

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// Scene管理クラス
/// </summary>
public class SceneManager : MonoBehaviour
{
    /// <summary>
    /// Camera関連
    /// </summary>
    [SerializeField] private Camera _mainCamera;
    [SerializeField] private Camera _zoiCamera;
    
    /// <summary>
    /// Canvas関連
    /// </summary>
    [SerializeField] private GameObject _mainCanvas;
    [SerializeField] private GameObject _zoiCanvas;
    
    void Start()
    {
        SetMainDisplay();
    }

    /// <summary>
    /// メインの表示
    /// </summary>
    public void SetMainDisplay()
    {
        _mainCamera.gameObject.SetActive(true);
        _zoiCamera.gameObject.SetActive(false);
        
        _mainCanvas.SetActive(true);
        _zoiCanvas.SetActive(false);
    }
    
    /// <summary>
    /// ぞいアニメーション用の表示
    /// </summary>
    public void SetZoiDisplay()
    {
        _mainCamera.gameObject.SetActive(false);
        _zoiCamera.gameObject.SetActive(true);
        
        _mainCanvas.SetActive(false);
        _zoiCanvas.SetActive(true);
    }
}

マイケル

アニメーション開始時と終わりに切り替えてあげれば完成！！

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using VRM;

/// <summary>
/// 青葉操作クラス
/// </summary>
public class AobaController : MonoBehaviour
{
    /// <summary>
    /// Scene管理クラス
    /// </summary>
    private SceneManager _sceneManager;

・・・略・・・

    void Start()
    {
        _sceneManager = FindObjectOfType<SceneManager>();
・・・略・・・
    }

・・・略・・・

    /// <summary>
    /// ぞいボタン押下時
    /// </summary>
    public void PushZoiButton()
    {
        _animator.SetTrigger("isFight");
        _sceneManager.SetZoiDisplay();
    }

    /// <summary>
    /// ぞいアニメーション終了時
    /// </summary>
    public void EndZoiAnimation()
    {
        _sceneManager.SetMainDisplay();
    }
}