3DキャラクターをPlayCanvasのState Graphで操作する3/6

キャラクターとアニメーションの作成手順に関しては下記URLをご参照ください。

https://qiita.com/shujimuna1102/items/72ccf4224c66d74bdea4

Vroid/キャラクターを生成

blender/Vroidで生成したキャラクターの調整

mixamo/簡易リグ(ボーンウェイト)生成とアニメーションのダウンロード

上記3つのコンテンツから簡単にキャラクターとアニメーションを作成できます。

 

キャラクターをシーンビューにdrag＆drop

ASSETS内にある[chapter01]フォルダの[maill01_container]を中央シーンビューにdrag＆dropしてください。

キャラクターがシーンビューに表示されます。また、左側HIERARCHYにキャラクターのオブジェクト名が確認できます。DCCツールでFBXへエクスポートした際にボーン構造がある場合、PlayCanvas上でもボーン階層をコントロールすることが可能となっています。また、複数オブジェクトを選択した状態でFBXへエクスポートした際も、各オブジェクトを保持した状態で展開されます。

 

アニメーションを再生させるState Graphを生成する

アニメーションを再生するたに[Anim State Graph]を作成します。

ASSETSの右横にある[+]ボタンをクリック、もしくは右クリックで表示される一覧の一番下にある[Anim State Graph]をクリックします。

chapter01が選択されているのでchapter01のフォルダ内に作成されます。ASSETS chapter01内に[New Anim State Graph]が作成されました。これをダブルクリックするとState Graph用のエディタが開きます。

新規で作成されたState Graphには最初にSTARTから矢印でリンクされた[Initial State]があります。

この[Initial State]をカスタムしてアイドリングアニメーションする様にしましょう。

一旦、State Graphエディタを閉じます。中央シーンの右上の[×]ボタンをクリックすると通常エディターに戻ります。

 

キャラクターのAnim State Graphを適用させる

HIERARCHYから[male01_container]を選択した状態で、右側のINSPECTOR内の[+ADD COMPONENT]をクリックします。

[+ADD COMPONENT]から様々なコンポーネントを選択することができます。今回は[Anim]を選択します。

[Anim]コンポーネントがキャラクターに適用できたら、空きスロットへ先程生成した[New Anim State Graph]をdrag＆dropします。

これで、[male01_container]が[New Anim State Graph]を持っている状態になりました。

 

続いて、下の空きスロットに chapter01/motionフォルダ内にある[idle.glb]をdrag＆dropします。

これでOKです！この設定だけでアイドリングアニメーションが再生されます。

シーンビュー右上の[▶]をクリックして確認してみましょう。

[+ADD COMPONENT]はON/OFFがボタンで可能です。

AnimコンポーネントをOFFにするとキャラクターはビューポート上のキャラクターと同様のＴ字ポーズの状態になりアニメーションも再生しません。

まずは[Anim State Graph]でアイドリングアニメーションの再生ができました！

続いて、キーボード操作でアニメーションを切り替えられるようにします。

 

 -チュートリアル -3DキャラクターをState Graphで操作する-