VRMのキャラをランタイムで読み込んで、ボタンでモデルを変更できるようにした

今回は、VRMをランタイムで読み込み、ボタンによってキャラを変更できるようにしてみました。読み込み時にモーションも追加して、↑ボタンで走るモーションも追加されています。

今回つくったもの

youtu.be

やりたいこと

VRMをランタイム中に読み込んで、uGUIを介して今の自分のモデルから他のモデルに変更できるようにしたい。その中で、待ち/走りのモーション追加、ボタンによる滑らかな表情の変更を実装しする(表情の実装はまだ)

使用したツール / 環境

• Unity 2018.13f1
• UniRx
• UniVRM
• ニコニ立体から拝借したVRMファイル3つ(今回は、ニコニ立体ちゃん、マグロナさん、ユニティちゃんのVRMファイルをお借りしました)

実装

github.com

ランタイムになってから、モデルの名前が書いてあるボタンを押すとロードが始まりモデルを表示します。別のモデルを押すと同じ様に切り替わります。ロード時にWAITのモーションをつけているのと、"up"ボタンで走るモーションに遷移するようにAnimatorControllerの設定をしています。

Button→モデルの表示

MV(R)Pパターンを使用しています。ModelにReactivePropertyを書いて、View(Button)からの入力をPresenterで受けてReactivePropertyの値を変えて、その反映をPresenterを通して行っています。

ボタンの設定

[SerializeField] private Button AliciaButton;
[SerializeField] private Button MaguronaButton;
[SerializeField] private Button UnitychanButton;

ボタンから入力を受けたときのストリームを定義。今回のSelectではファイル名直打ち。

var AliciaStream = AliciaButton.OnClickAsObservable().Select(_ => "AliciaSolid");
var MaguronaStream = MaguronaButton.OnClickAsObservable().Select(_ => "Magurona");
 var UnitychanStream = UnitychanButton.OnClickAsObservable().Select(_ => "Unitychan");

ストリームの生成(Subscribe)処理。現在のモデル情報と新しく入力を受けたモデル情報を比較して、異なっていればReactivePropertyの値が変更される。これを三体分かいてあります。

AliciaStream.Subscribe(name =>
{
    if (characterConfig.charaName.Value != null && characterConfig.charaName.Value != name)
    {
           characterConfig.beforeCharaName.Value = characterConfig.charaName.Value;
     }
           characterConfig.charaName.Value = name;
});

ランタイムでロードする処理

こちらの記事を参照。
qiita.com

読み込むコードは同じですが、今回は下記のコードを追加することで、モーションを追加しています。読む込が完了してオブジェクトが生成された段階で付与されるので、ロード時にモデルが動いてくれます。

 //DefaultのAnimation
var addAnimation = new AddAnimation();
addAnimation.AddAnimationController(gameObject);

 //Running用のスクリプトを追加する
gameObject.AddComponent<CharacterMove>();

感想