Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@VirtualDollRio(月夜 莉央)

【Unity初心者向け】VRMモデルでCandy Rock Star踊ってみた

Last updated at Posted at 2019-11-08

VRoidモデル完成したしせっかくだし踊ってみたい！！！！！！
なるほどVRMLiveViewerを使えば簡単に踊ることができるんですね……Macだと使えないじゃないですかー！！！やだーーーーーーー！！！！！！！！！！

ということでUnityのインストールから始めてみたものの参考記事が古かったり色々あって苦戦したので、これからチャレンジする方のためにもUnityインストールからの手順を残しておこうと思います。

完成動画はこちら↓
【踊ってみた】Candy Rock Star【VTuber月夜莉央】

##Unityのインストール
既にインストールが完了している方はプロジェクト作成まで読み飛ばしてください。

###UnityID作成/ログイン
まずはじめにUnityトップページへアクセスし、UnityIDを作成します。既に作成済みの方はログインを行ってください。
画像の赤枠で囲ったボタンを押すとCreate a Unity IDのメニューが出てくるので必要な項目を入力して登録します。
スクリーンショット 2019-11-07 11.38.05.png

###Unity hubのダウンロード
Unityダウンロードページの赤枠のボタンからUnity hubをダウンロードしてインストールを実行します。
スクリーンショット 2019-11-07 11.57.27.png

###Unity hubの起動/サインイン
インストールしたUnity hubを起動すると画像のような画面が表示されます。赤枠で囲ったボタンから先ほど作成したUnity IDでサインインを実行してください。
スクリーンショット 2019-11-07 12.03.56.png

###Unityのインストール
インストールボタンを押すとUnityのバージョン選択画面が出てきます。特別な理由がなければ最新正式リリース版で問題ないのでそのまま次へボタンを押してモジュール選択画面へ行きましょう。

モジュール選択画面ではUnityに追加するモジュールを選択することができます。
今回はアプリに書き出したりするわけではないのでドキュメントと日本語化パックを入れました。実行ボタンを押すとインストールが始まります。

スクリーンショット 2019-11-07 12.12.31.png スクリーンショット 2019-11-07 12.17.17.png

##プロジェクト作成
メニューからプロジェクトを選択し、新規作成ボタンを押します。
新規作成ボタンの左にある▼ボタンでUnityのバージョンが選択できますので、複数バージョンのUnityがインストールされている場合はここでバージョンを指定してください。
２枚目の画像の画面が出てきたらテンプレートを3Dに指定し、プロジェクト名と保存先を指定して作成ボタンを押します。
Unityが起動して3枚目の画面が出てきたらプロジェクト作成成功です。

スクリーンショット 2019-11-07 12.37.24.png
スクリーンショット 2019-11-07 12.51.34.png
スクリーンショット 2019-11-07 13.00.04.png

##ユニティちゃんライブステージ！ -Candy Rock Star- 導入
まずは動作確認としてユニティちゃんを躍らせてみます。

###ライブステージのダウンロード
ここからzipファイルをダウンロードして解凍します。

###Assetsのコピー
解凍したファイルのAssetsフォルダの中身を全て選択し、UnityのProjectツリーのAssets内にドラッグ&ドロップでコピーします。（完了まで少し時間がかかります）
コピーが完了するとUnityのAssets内が２枚目の画像の状態になります。
スクリーンショット 2019-11-07 13.13.16.png
スクリーンショット 2019-11-07 13.14.40.png

###起動
Assets内のScenes 1をダブルクリック→MainをダブルクリックしてHierarchyのトップがMainになったら**再生(▶︎）**ボタンを押します。
ユニティちゃんが踊り出したら正常にAssetsが取り込めた状態です。
スクリーンショット 2019-11-07 13.14.40.png
スクリーンショット 2019-11-07 13.26.57.png
スクリーンショット 2019-11-07 13.32.28.png

##VRMモデル導入
さぁここからが本番です！ユニティちゃんと自分のVRMモデルを差し替えていきましょう。

###UniVRMの導入
UniVRMはUnityにVRMモデルをインポートするためのパッケージです。
ここから最新版のunitypackageをダウンロードしてください。2019年11月08日時点で最新版のファイル名はUniVRM-0.53.0_6b07.unitypackageです。

ダウンロードしたファイルを開くと画像のような画面が出てくるので、Importボタンを押すと起動しているUnityのプロジェクトにパッケージが適用されます。
スクリーンショット 2019-11-07 17.17.27.png

###VRMモデル書き出し/Unityへインポート
ここで一旦Unityは最小化しておいてVroid Studioを起動しましょう。
撮影・エクスポートタブでエクスポートを選択すると画像２枚目の画面が出てきます。必要な項目を入力してOKボタンを押すとファイルダイアログが出てくるのでファイル名やフォルダを指定します。
出力が完了したらVRMファイルをUnityのAssetsにドラッグ&ドロップでインポートしてください。インポートが完了するとVRM名と同様の名前のファイルが２つ、フォルダが４つ追加されます。
スクリーンショット 2019-11-07 16.34.36.png
スクリーンショット 2019-11-07 16.35.06.png
スクリーンショット 2019-11-07 18.05.33.png

###StageDirectorの設定
Hierarchyビュー内にあるStageDirectorを選択します。
InspectorビューからStageDirector(Script)→PrefabOnTimeLine→Element0の横のボタンを押すとダイアログが表示されるので、自分が作成したVRMを選択して変更します。
スクリーンショット 2019-11-07 18.59.59.png

###VRM Prefabの設定
Assetsフォルダを表示し、モデルの素体が表示されているファイルをダブルクリックするとHierarchyにvrmモデルの階層が表示されます。
スクリーンショット 2019-11-07 18.34.58.png

####アニメーションの追加
Hierarchyの一番上にあるモデル名のオブジェクトを選択し、InspectorビューからAnimatorのController横のボタンを選択します。出てきたダイアログからMocapC86を選択してください。
また、Appley Root Motionのチェックボックスを有効にします。（これをしないとモデルが前後左右へ動いてくれません）
スクリーンショット 2019-11-07 18.50.49.png

####ライトの追加
Hierarchyの一番上にあるモデル名のオブジェクトを選択し、右クリックのメニューからLight→DirectionalLightを選択するとモデルにライトが追加されます。
スクリーンショット 2019-11-07 18.37.21.png
スクリーンショット 2019-11-07 18.42.11.png

####カメラターゲットオブジェクトの追加
Hierarchyの一番上にあるモデル名のオブジェクトを選択し、右クリックのメニューからCreateEmptyを選択して空のオブジェクトを作成し、名前を「Camera Target」に変更します。
同様の方法でもう１つ空のオブジェクトを作成し、名前を「Character1_Head」に変更します。
スクリーンショット 2019-11-07 18.43.45.png
InspectorビューのTransformのYの値をモデルの身長に合わせて変更してください。Camera Targetがメインカメラ、Character1_Headがバックスクリーン表示用のカメラに対応しています。Camera Targetは胸、Character1_Headは頭の位置ぐらいを目安に調整してみてください。

ここまで設定して実行すると自分のVRMモデルが踊るようになります！
せっかくなのであと一歩頑張ってみましょう！！

###表情変化の設定
ユニティちゃんの表情変化と同様のものを割り当てます。
Hierarchyの一番上にあるモデル名のオブジェクトを選択し、Inspectorビューの一番下にあるAdd Componentボタンを押して一覧からNew scriptを選択します。
Nameに「FaceChanger」と入力してCreate and Addボタンを押します。
Script右のFaceChangerの文字をダブルクリックでファイルを開き、下記のコードを入力してください。

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

public class FaceChanger : MonoBehaviour {
    VRMBlendShapeProxy proxy;

    void Start() {
        proxy = GetComponent<VRMBlendShapeProxy>();
    }
    //表情を変えるイベントをここで受け取る．
    public void OnCallChangeFace (string str) {   
        switch(str) {                                    //受け取ったメッセージが
            case "eye_close@unitychan":                 //「目を閉じる」であれば
                proxy.ImmediatelySetValue("BLINK",1);   //目を閉じる
                break;
            case "smile3@unitychan":                    //「笑顔」であれば
                proxy.ImmediatelySetValue("JOY",1);     //笑顔
                break;
            case "conf@unitychan":                      //「怒る」であれば
                proxy.ImmediatelySetValue("ANGRY",1);   //怒る
                break;
            case "default@unitychan":                   //それ以外なら
                proxy.ImmediatelySetValue("BLINK",0);   //初期化
                proxy.ImmediatelySetValue("JOY",0);
                proxy.ImmediatelySetValue("ANGRY",0);
                break;
        }
    }
}

###リップシンク(口パク）の設定
表情の変化はつきましたが歌っている最中の口元が寂しい状態ですのでリップシンクを適用しましょう。
AssetsからUniteInTheSky→Scripts→LipSyncControllerダブルクリックで選択し、下記のように修正します。
また、UniteInTheSky→Prefabs→LipSyncControllerを選択し、InspectorビューからLipSyncController(Script)内のTargetNameを**VRMPrefab名(Clone)**に変更してください。

LipSyncController.cs

using UnityEngine;
using System.Collections;
using VRM; //追加

public class LipSyncController : MonoBehaviour {
    public string targetName;

    public Transform nodeA;
    public Transform nodeE;
    public Transform nodeI;
    public Transform nodeO;
    public Transform nodeU;

    public AnimationCurve weightCurve;

    VRMBlendShapeProxy target; //変更

    void Start() {
        target = GameObject.Find(targetName).GetComponent<VRMBlendShapeProxy>(); //変更
    }

    float GetWeight(Transform tr) {
        return weightCurve.Evaluate(tr.localPosition.z);
    }

    void LateUpdate() {
        var total = 1.0f; //変更

        var w = total * GetWeight(nodeA);
        target.ImmediatelySetValue(BlendShapePreset.A, w); //変更
        total -= w;

        w = total * GetWeight(nodeI);
        target.ImmediatelySetValue(BlendShapePreset.I, w); //変更
        total -= w;

        w = total * GetWeight(nodeU);
        target.ImmediatelySetValue(BlendShapePreset.U, w); //変更
        total -= w;

        w = total * GetWeight(nodeE);
        target.ImmediatelySetValue(BlendShapePreset.E, w); //変更
        total -= w;

        w = total * GetWeight(nodeO);
        target.ImmediatelySetValue(BlendShapePreset.O, w); //変更

        target.Apply(); //追加
    }
}
スクリーンショット 2019-11-08 12.36.30.png

##効果の編集
ここまででも十分素敵な動きになっていますが、プラスアルファで効果を追加、変更してみましょう。

###手からパーティクルを出す
AssetsからUnityChan→Prefabs→CandyRockStarをダブルクリックで選択し、Hierarchyの検索画面にSprayと入力します。
両腕と両腰に設定された計４つのパーティクルのオブジェクトが出てくるので、選択してコピーします。
Assetsから自分のモデルのPrefabを選択し、コピーしたオブジェクトをペーストします。
Root配下のパーティクルを表示させたいオブジェクト下にペーストされたSprayを移動させ、位置を調整すると、該当のオブジェクトの移動に合わせてパーティクルが表示されるようになります。
スクリーンショット 2019-11-08 1.33.59.png
スクリーンショット 2019-11-08 10.37.42.png

###エフェクトの変更
AssetsのUnityChanStage→Effects配下にステージ装置やエフェクトの設定が纏まっています。
ここのオブジェクトを変更することで色などを変更することができます。
例えばレーザーの色を変えたい場合はLaser→Materials→light_greenを選択してInspectorのBaseとEmissionを調整することで色が変わります。
スクリーンショット 2019-11-08 10.48.59.png

##完成！！
諸々調整してこのような動画になりました！！やったー！！！！！！！！！
高評価、チャンネル登録お願いします！！！！！！！！！！！！！！！！！！（定型文）
【踊ってみた】Candy Rock Star【VTuber月夜莉央】

##最後に
日本語化のモジュール入れたのに最後まで設定変更するの忘れてましたっ！！(・ω<) ﾃﾍﾍﾟﾛ
UnityメニューのPreferences→Languageで変更できます！！

##参考
- オリジナルVRMモデルにCandyRockStarを踊ってもらう （2）VRMの導入・設定
- ユニティちゃんライブのシーン構造について軽く解説してみる
- 「VRoid Studio」で作った3Dモデルを「Unity」で踊らせてみよう
- ユニティちゃんステージ（Candy Rock Star)をいじる
- 【Unity】VRM（VRoid）をライブステージで踊らせるアプリを作ってみた

##ライセンス
imageLicenseLogo.png

この作品はユニティちゃんライセンス条項の元に提供されています

12
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?