これから作るパーティクルライブの完成イメージです

パーティクルライブをVRoid StudioとSTYLYで作る -4-

この記事ではVRoid Studioで作成したモデルを使ってパーティクルの演出の中、歌って踊るライブ空間を作成します。
これを応用すれば、自分で作成したオリジナルモデルを利用したり、別の曲を利用したり、またオリジナルのパーティクル演出をしたりと自分好みのライブ空間を作成できます。

これから作るパーティクルライブの完成イメージです

パーティクルライブの完成イメージです

1~11章までを全4回に分けてご紹介します。

本記事では9~11章を扱い、キャラクターのプレゼンスを高めるからSTYLYへのアップロードまでをご紹介します。

キャラクターのプレゼンスを高める

キャラクターのプレゼンスを高めるため、顔の表情、口の動き、髪・服を揺れるようにします。

これらはすべてAnimation Clipとして作成しTimeLineとAnimatorControllerで制御します。(C#スクリプトはSTYLYにアップロードできないため)

※secondaryオブジェクトに設定されているVRM Spring BoneスクリプトはSTYLYにアップロードできません。

顔の表情を作成する

顔の表情を簡単にアニメーションクリップとするスクリプトが公開されているのでこちらを利用させていただきます。

下記のページにあるリンクから「BlendShapeEditHelper20150913.zip」をダウンロードしてください。

ブレンドシェイプをAnimationClipとして保存する | Unity

BlendShapeEditHelperスクリプトをダウンロード

BlendShapeEditHelperスクリプトをダウンロード

 

zipファイルを解凍しBlendShapeEditHelper.unitypackageをダブルクリックしてプロジェクトにImportします。

BlendShapeEditHelperスクリプトをインポート

BlendShapeEditHelperスクリプトをインポート

キャラクターにBlendShapeEditHelperスクリプトをAdd Componentしてください。

BlendShapeEditHelperスクリプトをAdd Component

BlendShapeEditHelperスクリプトをAdd Component

ここから6パターンの表情を作成していきます。

  • パターン1(楽しい)
    • InspectorのM_F00_000_Fcl_All_Funの値を100にします。(その他はすべて0)
    • ワイヤーフレームで表情が見にくいときはHide Wireframeボタンをクリックしてワイヤーを非表示にできます。
      顔の表情を設定

      顔の表情を設定

    • Create ClipボタンをクリックしてAnimation Clipを作成します。
    • ClipはAssets直下にvroid001 Clipという名称で作成されるので名称をAllFunに変更してFaceフォルダの下に移動します。
      表情のアニメーションクリップ作成

      表情のアニメーションクリップ作成

      アニメーションクリップ名をAllFunに変更

      アニメーションクリップ名をAllFunに変更

  • パターン2(喜び)
    • InspectorのM_F00_000_Fcl_All_Joyの値を100にします。(その他はすべて0)
    • Clipの名称はAllJoyにします。
  • パターン3(両目を閉じる)
    • InspectorのM_F00_000_Fcl_Eye_Closeの値を100にします。(その他はすべて0)
    • Clipの名称はEyeCloseにします。
  • パターン4(右目を閉じる)
    • InspectorのM_F00_000_Fcl_Eye_Joy_Rの値を100にします。(その他はすべて0)
    • Clipの名称はEyeJoyRにします。
  • パターン5(左目を閉じる)
    • InspectorのM_F00_000_Fcl_Eye_Joy_Lの値を100にします。(その他はすべて0)
    • Clipの名称はEyeJoyLにします。
  • パターン6(両目を閉じる(笑顔))
    • InspectorのM_F00_000_Fcl_Eye_Joyの値を100にします。(その他はすべて0)
    • Clipの名称はEyeJoyLにします。
      表情のアニメーションクリップを6パターン作成

      表情のアニメーションクリップを6パターン作成

タイムラインに作成したAnimation Clipを設定していきます。

TimeLineエディターのAdd→Animation Trackを選択しTrackを作成します。

Trackは一番下に追加されるので、D&Dで一番上に配置します。Animation Clipの配置順により読み込み順が変わり挙動も変わるので注意してください。

表情のTrackをタイムラインの一番上に移動

表情のTrackをタイムラインの一番上に移動

TrackのゲームオブジェクトにキャラクターをD&Dします。

ここからは全体のアニメーションや曲に合わせて地道にパターン1~6の表情をClipにD&Dしていきます。

TimeLineエディターのスケールがフレーム単位で分かりにくい場合は歯車アイコンから秒単位に変更できます。

曲に合わせてClipに表情を設定

曲に合わせてClipに表情を設定

また表情パターンの切り替えはClipを重ねると自然な表情になります。

クリップを重ねる

クリップを重ねる

最終的には画像のような表情を作成しました。表情設定が全体を通して一番手間がかかるところでした。

表情設定済みのタイムライン

表情設定済みのタイムライン

口を動くようにする

CRSプロジェクトからPrefab(LipSyncController)を移植し、Editor再生時に口を動くようにします。

その後に再生した口の動きをスクリプトでAnimation Clipにします。

CRSプロジェクトからPrefabの移植

CRSプロジェクト検索窓に「LipSync」と入力すると「LipSyncController」Prefabが見つかります。

こちらを選択した状態で右クリック→Export Packageで出力します。

LipSyncController.prefabのエクスポート

LipSyncController.prefabのエクスポート

Packageをダブルクリックして作成中のプロジェクトにImportします。

LipSyncControllerスクリプトをインポート

LipSyncControllerスクリプトをインポート

ImportしたPrefab(LipSyncController)をVRoid用に修正します。

まずPrefab(LipSyncController)にアタッチされているLipSyncControllerスクリプトのVRoid版を作成するためCtrl+Dで複製してスクリプト名をVroidLipSyncControllerにします。

VroidLipSyncControllerスクリプトを開いてvoid LateUpdate()以下を次のように書き換えます。

ここで設定している値はFaceオブジェクトにアタッチされているBlendShapesのFace.M_F00_000_Fcl_MTH_A、I、U、E、Oになります。

スクリプトに設定するBlendShapes

スクリプトに設定するBlendShapes

VRoidのバージョンにより設定値は異なるので注意が必要です。

次にPrefab(LipSyncController)をHierarcyにD&DしてLipSyncControllerスクリプトをVroidLipSyncControllerに置き換えます。

パラメータは画像の通りに設定します。

VroidLipSyncControllerスクリプトを設定

VroidLipSyncControllerスクリプトを設定

ここまででEditor再生時に口が動くようになります。

Editorで再生した口の動きをAnimation Clipにする

サンプルプロジェクトのScriptsフォルダにあるCreateBlendShapeAnimeClipスクリプトを利用します。

Hierarcyに空のオブジェクトを作成します。名称をCreateAnimationに変更しCreateBlendShapeAnimeClipスクリプトをアタッチします。

InspectorのTarget NameにはBlendShapesをもつオブジェクト名を設定します。当プロジェクトではFaceになります。

またMTH_A、I、U、E、OにはBlendShapesのFace.M_F00_000_Fcl_MTH_A、I、U、E、Oを設定します。

CreateBlendShapeAnimeClipスクリプトを設定

CreateBlendShapeAnimeClipスクリプトを設定

Editorを再生と同時にAnimationの作成が開始しますので、口の動き一通り終わったタイミングでSpaceキーを押すとAssetsの直下にTarget Nameで指定した名称のAnimation Clipが作成されます。

作成したAnimationをTimeLineに設定します。

TimeLineエディターのAdd→Animation Trackを選択しTrackを作成し、上から2つ目に配置します。

TrackのゲームオブジェクトにキャラクターをD&Dします。

Clipに作成したAnimation ClipをD&DしClip TimingのStartを0にします。

口のアニメーションをタイムラインに設定

口のアニメーションをタイムラインに設定

Hierarcy上のLipSyncControllerを非アクティブにして口が動けば完了です。

※CreateBlendShapeAnimeClipスクリプトは以降利用しないため非アクティブにします。

髪・服を揺れるようにする

VRoidから出力したモデルはデフォルトでVRMSpringBoneスクリプトが設定されているためEditor上では髪・服は揺れますが、C#スクリプトはSTYLYにアップロードできないためアニメーションクリップとして揺れを作成します。

サンプルプロジェクトのScriptsフォルダにあるCreateBoneAnimeClipスクリプトを利用します。

CreateAnimationオブジェクトにCreateBoneAnimeClipスクリプトをアタッチします。

ここからCreateBoneAnimeClipスクリプトの利用方法になります。

RootPathにはRootBonesで指定するどのオブジェクトよりも親のオブジェクトを指定します。今回は「J_Bip_C_Hips」とします。

CreateBoneAnimeClipスクリプトを設定

CreateBoneAnimeClipスクリプトを設定

RootBonesにはsecondaryオブジェクトにアタッチされているVRMSpringBoneスクリプトのRootBonesに指定されているオブジェクトをすべて指定します。

CreateBoneAnimeClipスクリプトのRootBonesに指定するオブジェクト1

CreateBoneAnimeClipスクリプトのRootBonesに指定するオブジェクト1

指定したオブジェクトに紐づく子オブジェクトの動きがAnimation Clipになります。

指定する対象は次の12オブジェクトとJ_Bip_C_Head直下のHairJointの名称の13オブジェクトになります。

CreateBoneAnimeClipスクリプトのRootBonesに指定するオブジェクト2

CreateBoneAnimeClipスクリプトのRootBonesに指定するオブジェクト2

  1. J_Sec_L_Bust1
  2. J_Sec_R_Bust1
  3. J_Sec_L_LowerSleeve
  4. J_Sec_L_TipSleeve
  5. J_Sec_R_LowerSleeve
  6. J_Sec_R_TipSleeve
  7. J_Sec_L_SkirtBack1
  8. J_Sec_L_SkirtFront1
  9. J_Sec_L_SkirtSide1
  10. J_Sec_R_SkirtBack1
  11. J_Sec_R_SkirtFront1
  12. J_Sec_R_SkirtSide1

オブジェクトの指定が完了したらEditorで再生し、曲の終わりにSpaceキーを押すとAssetsの直下にRootPathに指定したオブジェクト名のClipが作成されます。

揺れアニメーションクリップの作成

揺れアニメーションクリップの作成

SpaceキークリックからAnimation Clip作成まで10分強かかりました。この処理メモリ21.3GB使用していたので、メモリ16GB以下のPCは厳しいかもしれません。VRoidでキャラクターを作成する際の髪のBoneを多く設定すると対象が増えその分時間がかかります。

新規にAnimatorを作成(Create→AnimatorController)して、作成したClipを設定します。

揺れAnimatorの作成と設定1

揺れAnimatorの作成と設定1

RootPathで指定したオブジェクト(J_Bip_C_Hips)にAnimatorをAdd Componentし、Controllerに先ほど作成したAnimator Controllerを設定します。

揺れAnimatorの作成と設定2

揺れAnimatorの作成と設定2

最後にsecondaryオブジェクトを非アクティブにして揺れを確認できれば完了です。

※CreateBoneAnimeClipスクリプトは、課題(パフォーマンス、揺れが大きい場合の挙動)、改善点(Inspectorでの指定を自動化)がいくつかあります。時間があれば改修しますが当面は触らない予定です。

Post Processing Stackでエフェクトを調整

最後にPost Processing Stackでエフェクトの調整を行います。

STYLYでPost Processing Stackを利用するには無料のPost Processing Stackと有料AssetのPlaymakerをインポートする必要があります。

Post Processing Stack(free)

https://assetstore.unity.com/packages/essentials/post-processing-stack-83912

Playmaker($45.5)

https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-368

具体的な利用方法は下記の記事に詳細がまとまっていますのでここでは、profileの設定のみ公開します。

profileの設定は画像の通りです。

profileの設定1

profileの設定1

profileの設定2

profileの設定2

STYLYへのアップロード

Prefabを作成してSTYLYにアップロードします。

Prefabの作成

アップロードするため空のオブジェクトを作成し、名称を「StylyLiveUpload」とします。

ここまでに作成したキャラクター、パーティクルオブジェクトを全て「StylyLiveUpload」の子オブジェクトにします。

「StylyLiveUpload」をProjectビューへD&Dし、Prefab化します。

STYLYにアップロード

アップロード方法は下記の記事を参照ください。

UnityからSTYLYにアセットをアップロードする方法

Sceneの調整

記事に沿ってアップロードとキャラクターの配置後にSkyboxの変更とDefaultGroundをOffにします。

Skyboxを変更します。

Assetsボタンからアセットリストを表示し3D Modelを選択します。

Assetsボタン

Assetsボタン

Assetsリスト

Assetsリスト

Sky and Groundタブ内の[Skybox]Darkを選択します。

Skybox Dark

Skybox Dark

最後にDefaultGroundをOffにします。

DefaultGroundをoff

DefaultGroundをoff

以上で完成です。

パーティクルライブ完成

パーティクルライブ完成

いかがだったでしょうか。以上でパーティクルライブをVRoid StudioとSTYLYで作るは終わりです。
キャラクター、曲、アニメーション、パーティクル演出をカスタマイズしてぜひ自分好みのパーティクルライブを作ってみてください!

[関連記事]