「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
最終更新日:2018.12.15

「VRoid Studio」で作った3Dモデル動かすだけじゃ満足できない方・・・!
ユニティちゃんライブステージ! -Candy Rock Star-を使っておどらせてみましょう〜

「VRM」ってなんだろう?「Unity」とは?という方はこちらの記事をチェックしてみてください〜
下準備の方法を説明も加えつつ詳しく書いています!

VRoid Studio v0.4.0 ~ v0.4.0-p1 がリリースされて髪揺れ機能が追加されました。
公式さんが動画をUPしてくれています。

おおおーーーめっちゃふぁぁさーーーってなってる!これは踊らすしか無いですね!!
髪揺れ対応前はバックダンサーとして踊ってもらいましたが今回はメインになってもらいましょう♪


髪へのボーン設定

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

「VRoid Studio」を開いて髪の毛にボーンを追加してください。

まって、昔のデータ開いたらハゲ散らかしてる

毛がないぞーー!!!調整しましょう。

  • 「VRoid Studio」でアップデート前に作ったモデルを開くと髪の毛がどっかいってる!!
    「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

  • どうやら足元に移動している模様。
    「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

  • パラメーターの位置を調整するともとに戻ります
    「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

おっけい!!

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

ボーン設定が終わったらエクスポートでVRMファイルを書き出ししてください。

「Unity」をダウンロード

次に「Unity」をダウンロードして動かす環境つくりをしていきます。

  • Unity Hub(プレビュー版)をダウンロード
    「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
    日本語化したいので「Unity Hub(プレビュー版」をダウンロードしてください。
    ダウンロードはこちら
  • Unity Hub(プレビュー版)を立ち上げるとランチャーが表示されます
    「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
    日本語化されているのが2018.1.以降になるので最新VERをダウンロードします。
    ①【Install】タブの②【official Releases】内
    ③Unity 2018.2.2f1「Download」を選択してください。
  • POPUPがでてくるので一番下までスクロールして「日本語」にチェックをいれます。
    「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
ダウンロード完了!!

macの場合
Unity/Hub/Editor/2018.2.2f1/Unity.appにアプリがはいっています。
起動してみましょう。

「Unity」に必要なファイルをインポート

VRMファイルを編集するのに必要なものをインポートしていきます。

  • VRMを編集できるようにする追加パッケージ
  • 作った3Dモデルのデータ
  • 動きのモーションセット

VRMを編集できるようにする追加パッケージ

UnityだけではVRMをフォローできないので、編集できるようにパッケージを追加します。
UniVRM/releasesから最新のunitypackageをダウンロードし、Assets/VRMにインストールします。

今回は最新の「UniVRM-0.40.unityパッケージ」をダウンロードしましょう。

UniVRM-0.40.unityパッケージ

Unity起動後ダウンロードしたファイルをダブルクリックするとインストール出来ます。

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

Importをクリック!

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
追加されました〜

作った3Dモデルのデータ

「VRoid Studio」で書き出した3DモデルのVRMファイルを、UnityのAssetsにドラッグ&ドロップする

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

追加されました〜

動きのモーションセット

モーションはユニティちゃんライブステージ! -Candy Rock Star-を使わせていただきます〜

■Unity-chan!
「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
© Unity Technologies Japan/UCL

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
ユニティちゃんライブステージ! -Candy Rock Star-公式サイトからダウンロードして「Unity」内Assetsエリアに以下ファイルをドラッグしてくださいてください。

DLしたファイル内にあるAssetsフォルダすべてを「Unity」内Assetsエリアにドラッグ!

ダウンロードはこちら

下準備完了!

下準備はこれで完成です!
次はいよいよ動かしてみましょう〜

ユニティちゃんライブステージ!の要素を配置する

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

プロジェクト>Assetsの中にあるUnityChanStageのPrefabsディレクトリの中身をヒエラルキーにドラッグしてください。

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

stageがセットされたらOKです。

カメラの調整

あわせてカメラ位置など微調整しましょう。
バックモニター用のカメラが妙な位置にあるので真ん中が映るように位置調整をしてください。
ほんとうはカメラチェンジするはずなのですがやり方不明・・・!
わかったら追記します。

なこ
初心者つらお

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
①Assets内にある『Main Camera Rig』内『Main Camera』の②Screen Overlay(Script)の歯車を右クリックして削除するかチェックを外してください。

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

「VRoid Studio」で作った3Dモデルを配置する

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
①Assets内にある②インポートしたVRMファイルをシーンにドラッグしてください。

次に立ち位置を調整します。インスペクタータブ内にある追加したVRMファイルの情報を表示して
トランスフォームの位置をX 0Y 0Z 0にしてください。

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

次はダンスアニメーションを設定します。インスペクタータブ内にある追加したVRMファイルの情報を表示して
アニメータのControllerをMocapC86にしてください。

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
これでUnityちゃんと同じ動きをしてくれます。

音楽を流す

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
Assets内『UniteInTheSky』フォルダ『Prefabs』の中にある【MusicPlayer】をシーンにドラッグしてください。

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ
Assets内『UniteInTheSky』フォルダの中にある【Unite In The Sky (full)】をシーンにドラッグしてください。

これで音楽が流れるはずです〜。でもなんかずれてる!なんでだろ

瞬きを追加する

インスペクタータブ内の【コンポーネントを追加】ボタンを押してください。
ScriptsVRMBlinkerを選択します。

VRMデフォルトの瞬きScriptです

口の動きを追加する

インスペクタータブ内の【コンポーネントを追加】ボタンを押してください。
ScriptsVRMAIUEOを選択します。

あいうえおをランダムで表示するScriptです

インスペクターにBlinkerAIUEOコンポーネントが追加されたのを確認後、
上のほうにあるプレイボタンを押してみてください

「VRoid Studio」で髪の毛が揺れるようになったから「Unity」で踊らせてみた。やり方まとめ

完成!!!

プレイボタンを押すと踊ってくれます〜

髪の毛ふぁさー−−なってる!!!きんもちいぃいぃぃい

ユニティちゃんライブステージ! -Candy Rock Star-

ダウンロードはこちら
https://vroid.pixiv.net/index.html