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

エレキベア
こんにちクマ〜〜〜

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


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

エレキベア
楽しみクマ〜〜〜
表情を変えてみる

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



エレキベア
VRoidStudio便利すぎクマ

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


マイケル
表情はImmediatelySetValueメソッドを呼び出すことで設定できます!
下記スクリプトを、VRMBlendShapeProxyが
アタッチされたオブジェクトに追加しましょう!
下記スクリプトを、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ボタンをクリックしてファイルを作成します。
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という名前で作ってみました!
Fightという名前で作ってみました!



マイケル
変化が少ないけどまあいいでしょう!

エレキベア
(いいのかクマ・・・)
動きの作成

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

マイケル
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();
}
}


マイケル
これでどうだ!!!


エレキベア
おおーー!!
なんか見栄えがよくなったクマ〜〜!!
なんか見栄えがよくなったクマ〜〜!!

マイケル
だいぶキャラクターが活きてきたね!!
(動きは違和感あるけど・・・)
(動きは違和感あるけど・・・)
おわりに

マイケル
というわけで今回はVRoidStudioで作ったキャラの表情操作と
アニメーション作成でした!
どうだったかな??
アニメーション作成でした!
どうだったかな??

エレキベア
やっぱりキャラクターを動かすのは楽しいクマね
だんだんと愛着も湧いてくるクマ
だんだんと愛着も湧いてくるクマ

マイケル
楽しいしやっぱりかわいいね!
もっと思い通りに動かしたいね!!
かわいいね!
もっと思い通りに動かしたいね!!
かわいいね!

エレキベア
(キモいクマ・・・)

マイケル
それでは今日はこの辺で!
アデュー!!!
アデュー!!!

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