見出し画像

Cubism 4 SDK for Unity お試しガイド (2/4)

←前の記事:Cubism 4 SDK for Unity お試しガイド (1/4)
→次の記事:Cubism 4 SDK for Unity お試しガイド (3/4)

前回はUnityをインストールし、プロジェクトにCubism SDKをインポートするところまで行いました。
今回はそのプロジェクトにCubismのモデルをインポートし、シーンの設定を行います。

4. モデルのインポートをしよう!

まず事前にCubism SDKのモデルのインポート設定を変更します。

画像1Unityのメニューバーから
「Live2D > Cubism > OriginalWorkflow > Should Import As Original Workflow」
をクリックして、チェックを入れた状態にします。
この設定により、Cubism SDKがOriginal Workflow形式のモデルを読み込むための準備が整います。

画像2チェックを入れたら、モデル一式が入っているフォルダーごと「プロジェクトウィンドウ」にドラッグアンドドロップします。

画像3インポートが成功すると、「プロジェクトウィンドウ」ではこのようになります。
Cubism SDK for Unityでは、一部のモデルに関係するファイルはUnityで使えるように変換されます。
これにより、Unity標準のコンポーネントでも楽にCubismのモデルを取り扱うことができます。

画像4Cubismのモデルも変換されて、アイコンが水色のキューブのファイルとなり、Unityで使えるように変換されたモデルとなります。

画像5Unity上の「Game」というビューが実際の画面になります。
(これを「ゲームビュー」と呼びます。公式ドキュメント

画像6最初の画面では、「Scene」というビューが表示されています。
(これを「シーンビュー」と呼びます。公式ドキュメント
「シーンビュー」と同じ位置に「ゲームビュー」もあります。
「ゲームビュー」に、さきほどインポートしたCubismのモデルを表示させてみましょう。

画像7画面左側の「Hierarchy」というウィンドウに、水色のキューブのファイルをドラッグアンドドロップします。
(これを、「ヒエラルキーウィンドウ」と呼びます。公式ドキュメント

画像8「ヒエラルキーウィンドウ」内に、さきほどドラッグアンドドロップしたモデルが配置されていればOKです。

画像9もしなにも表示されていない場合、「ヒエラルキーウィンドウ」内のUnityのロゴの左にある▶をクリックしてリストを開いてください。

※Unityのオブジェクトは、必ずシーンの下に配置されているため、「ヒエラルキーウィンドウ」のシーンの中に折りたたまれている可能性があるためです。

画像10それでは、Unity上部にある再生モードの「再生ボタン」(▶)を 2回 押してください。
これによりCubism SDKが実行されて、CubismのモデルがUnity上で表示する準備が整います。

画像11Cubism SDKとCubismのモデルが正常にインポートされていれば、このように「ゲームビュー」に表示されます。

画像12表示されるモデルが小さかったり大きかったりする場合は、「ヒエラルキーウィンドウ」の「Main Camera」オブジェクトを選択して、「Inspector」というウィンドウから「Camera」と書いてあるビュー内にある「Size」の値を調整してください。

Tips:
「Inspector」というウィンドウは、「インスペクターウィンドウ」と呼びます。公式ドキュメント
「インスペクターウィンドウ」は、Cubismの「インスペクタパレット」と似たようなもので、オブジェクトに対する設定を行うウィンドウです。
ここに表示されている設定項目の入っているビューを「コンポーネント」と呼びます。
(今回触ったコンポーネントは「カメラコンポーネント」です。)
「コンポーネント」は「オブジェクト」と呼ばれる入れ物に取り付けられて、Unityで実行されます。
Cubism SDKは「コンポーネント」となり、モデルのデータがひもづけられている「オブジェクト」に取り付けられて、Unity上で実行されます。

では次は当たり判定やモーション再生など一通りの機能をモデルにセットアップしましょう。

5. マウスカーソルに視線追従させよう!

Cubism SDKの機能を使って、モデルを視線追従するよう設定しましょう。

ここで行う設定は、クリックで選択状態にしたり、ファイルやオブジェクトをドラッグアンドドロップするだけです。

試しに一つ設定してみましょう。
※この設定はその後の設定に必要なものです。飛ばさず行ってください。

画像13「プロジェクトビュー」内にある、さきほどインポートしたCubismのモデルのフォルダーの中に、「[モデル名].fadeMotionList」というファイルが作られています。
Unity 2019以降では、線で描かれたキューブに「{}」が描かれているアイコンのファイルです。

画像14Cubism SDK for Unityでは、同様のアイコンのファイルは複数使用しています。
表示状態などによって名前が見切れている場合、選択したら「インスペクターウィンドウ」に「Motion Instance Ids」「Cubism Fade Motion Objects」が表示されるものが「[モデル名].fadeMotionList」です。
ファイルを選択すると「インスペクターウィンドウ」に表示されるので、こちらで確認してください。

このファイルをモデルに設定します。

画像15まず、「ヒエラルキーウィンドウ」でモデルを選択します。

画像16すると「インスペクターウィンドウ」にモデルの情報が表示されます。

画像17CubismFadeControllerの「Cubism Fade Motion」に、先程の「[モデル名].fadeMotionList」をドラッグアンドドロップします。

これでfadeMotionListの設定は完了です。

Cubism SDK for Unityでは、このような作業でモデルをセットアップしていくことができます。

ここの設定で操作するウィンドウは「ヒエラルキーウィンドウ」、「インスペクターウィンドウ」、そして「プロジェクトウィンドウ」の3つです。
これらのウィンドウを使いやすいよう並び替えておくことをおすすめします。

それでは、視線追従を設定してみましょう。

画像18

画像19「インスペクターウィンドウ」の一番下にある「Add Component」をクリックして、「CubismLookControllerコンポーネント」を追加します。
検索欄に「CubismLookController」とコンポーネント名を入力すると、楽に探し出すことができます。

画像20

画像21続けて、もう一度「Add Component」ボタンをクリックして
「CubismLookTargetコンポーネント」を検索して追加します。

Tips:
「CubismLookTargetBehaviourコンポーネント」と名前がよく似ていますが、別のコンポーネントなので、間違えて追加してしまわないようご注意ください。

画像22間違えて追加してしまった場合、削除したいコンポーネント右上のボタンをクリックして「Remove Component」をクリックします。

画像23

画像24上記の2つを追加したら、「ヒエラルキーウィンドウ」のモデルを、「CubismLookControllerコンポーネント」の「Target」にあるフィールドへドラッグアンドドロップしてください。

次に、視線追従させるパラメータを指定します。

画像25「ヒエラルキーウィンドウ」で[モデル名]/Parameters/の階層を開きます。
左にある「▶」をクリックすると階層が開きます。

ここにはモデルに設定されたパラメータIDが並んでいます。

画像26このIDの中から、視線追従させたいIDを選択状態にします。
Ctrlキー(macOSの場合はCmdキー)を押しながらクリックすると複数選択できます。

画像27

画像28「インスペクターウィンドウ」最下部の「Add Component」をクリックして「CubismLookParameterコンポーネント」を検索して追加します。

これで視線追従の設定が終わりました。

画像29この状態で再生モードの「再生ボタン」をクリックして実行し、「ゲームビュー」の中でマウスでドラッグしてみてください。

設定に間違いがなければ、「ゲームビュー」に表示されたモデルがマウスカーソルを追いかけるはずです。

ここで一旦現在のシーンを保存しておきましょう。

画像31メニューバーから「File」 >「Save」をクリック、またはCtrl + Sを押して現在の状態を保存します。
現在の状態(=シーン)はファイルとして保存されます。
現在のシーンがプロジェクト作成時に開かれていたものであれば上書き保存されます。

もし新たに作成したシーンなら、名前をつけて別のファイルとして保存します。

画像31保存先はプロジェクトのAssetsフォルダー以下であればどこでも大丈夫です。
最初から開かれている「SampleScene」を編集していた場合、ダイアログが開かれません。「SampleScene」は、プロジェクトが入っているフォルダ内の「/Assets/Scenes/」 の中に保存されています。

画像32もし現在のシーンを保存した場所がわからなくなってしまった場合、「ヒエラルキーウィンドウ」右上のボタンから「Select Scene Asset」をクリックすると、「プロジェクトウィンドウ」でハイライトされます。

次はモーション関連を設定します。

6. モーションのセットアップをしよう!

ここで行う設定ができると、アイドリングモーションの再生や、タップした部位によってモーションや表情の切り替えができるようになります。

●モーション再生

画像33「インスペクターウィンドウ」の一番下にある「Add Component」をクリックして、「CubismSampleControllerコンポーネント」を検索して追加します。

画像34「CubismSampleControllerコンポーネント」が追加されると、同時に「CubismMotionControllerコンポーネント」、「CubismRaycasterコンポーネント」が自動的に追加されます。

次に、追加した「CubismSampleControllerコンポーネント」に再生させるモーションを設定します。

.motion3.jsonは、Cubism SDK for UnityではUnity標準の形式である「アニメーションクリップ」に変換されます。
これにより、UnityのMecanimを使ってモーションを再生することも可能になります。

画像35「アニメーションクリップ」は、Unity 2019.3.1f1ではこのようなアイコンのファイルになります。
※アイコンはUnityのバージョンによって変わります。

画像36先程追加した「CubismSampleControllerコンポーネント」の「Body Animationフィールド」に、アイドリングとして再生させたいモーションの「アニメーションクリップ」をドラッグアンドドロップします。

ドラッグアンドドロップではなくクリックをしてしまうと、「インスペクターウィンドウ」の表示がクリックしたファイルやフォルダのものに切り替わってしまいますのでご注意ください。
別のオブジェクトをクリックしてしまった場合、再度「ヒエラルキーウィンドウ」に配置したモデルをクリックします。

画像41もし不安であれば、「インスペクターウィンドウ」右上のロックボタンをクリックして錠が閉じた状態にすれば、現在の表示状態から切り替わらなくなります。
この状態を解除するには、もう一度ロックボタンをクリックして錠を開いた状態にします。

注:SDKサンプルの「CubismSampleControllerコンポーネント」を使用した場合、そのままではアイドリングモーションは一つしか設定できません。
複数設定したい場合はスクリプトをカスタマイズする必要があります。

画像37同様に「CubismSampleControllerコンポーネント」の「Tap Body Motionsフィールド」に、胴体を触ったときに再生させたいモーションの「アニメーションクリップ」を文字部分に直接ドラッグアンドドロップします。

画像38「Tap Body Motionsフィールド」は、標準で複数のモーションを設定可能です。
再生するモーションはランダムに選ばれます。

これでモーションが設定できました。

●表情

※表情の設定は必須ではありません。

画像40表情の設定は、「CubismExpressionControllerコンポーネント」の「Expression Listフィールド」へ、「プロジェクトウィンドウ」のモデルが入っているフォルダー内の「[モデル名].expressionList」ファイルをドラッグアンドドロップします。
[モデル名].expressionListも、(.exp3.jsonがあれば)[モデル名].fadeMotionListと同様に上記のフォルダ内にあります。

画像39上の画像のようになっていれば表情の設定は完了です。

以上でモデルの設定はすべて完了です。

この状態で再生モードの「再生ボタン[▶]」をクリックし、シーンを実行状態にした上で、「ゲームビュー」内をドラッグやクリックすると、ドラッグ中のマウスカーソルをモデルが視線追従したり、モデルのモーションや表情が切り替わります!

せっかく作ったシーンですから、忘れないうちに現在の状態を保存しましょう。
上記の手順で説明している通りメニューバーの「File > Save」、
またはCtrl (Cmd) + Sで保存することができます。

次の記事では、作成したプロジェクトをUnityから書き出す手順を説明します。


←前の記事:Cubism 4 SDK for Unity お試しガイド (1/4)
→次の記事:Cubism 4 SDK for Unity お試しガイド (3/4)

この記事が気に入ったらサポートをしてみませんか?