この記事は、PlayCanvas Meetup #3の投稿になります。

1回目から引き続きで、アニメーションステートグラフについて書いていきたいと思います。
今回はキーボードのWASDで待機、前、右斜め前、左斜め前、右、左、後ろ、右斜め後ろ、左斜め後ろの合計9つアニメーションをMixamoからインポートして、PlayCanvasで動かすということをしたいと思います。

最終的な出来上がりは、こんな感じのものになります。

PlayCanvasにVRoidを適当にぶっこんでみた！PlayCanvasめっちゃ遊べるhttps://t.co/JVhNuBvvb8 #PlayCanvasAcademy #WebGL #playcanvas pic.twitter.com/ZIrfyTdK3c
— Kazuya (@kazuyaplus) September 28, 2022

※1回目の記事はこちら
https://qiita.com/Itokazuya/private/9db5a4f0b703c1c7009a

Mixamoからアニメーションをダウンロード

まずは、Mixamoから必要なアニメーションをダウンロードするところから始めます。
※Mixamoへのインポート方法は1回目の記事をご確認ください。

今回モデルを動かすにあたって、下記の9つのアニメーションをMixamoで用意します。

Idle(待機)
Jogging(前)
Jog Forward Diagonal_R(右斜め前)
Jog Forward Diagonal_L(左斜め前)
Jog Strafe Right(右)
Jog Strafe Left(左)
Jog Backward(後ろ)
Jog Backward Diagonal_R(右斜め後ろ)
Jog Backward Diagonal_L(左斜め後ろ)

Mixamoの左上の検索欄に上記のワードを入れて検索していきます。
それぞれ複数の候補が出てくると思いますが、好きなもので構いません。

適切なアニメーションを見つけるにあたって注意する点は2つあります。

1つ目は、移動値を含むアニメーションは[ InPlace ]にチェックを入れることです。(下画像 : 緑枠)
たとえば[ Jogging ]のようにもともと移動値がアニメーションに入っているものは後でループをさせるときに移動値が邪魔になるため、[ InPlace ]にチェックを入れてその場でアニメーションさせるようにします。

2つ目は左右でアニメーションを反転して使っても問題ないものに関しては、[ Mirror ]ボタン(下画像 : 赤枠)の機能を使ってダウンロードすることです。たとえば[ Jog Backward Diagonal_RL ]などが該当します。

好きなアニメーションをそれぞれ見つけたら、[ DOWNLOAD ]ボタンを押します。
ダウンロードするときは、Skinの項目を[ Withoutskin ]にしてください。

MixamoでダウンロードしたアニメーションをPlayCanvasにインポート

PlayCanvasに移ります。1回目で作成したプロジェクトをそのまま使用します。
まずは適当な空のフォルダを作成します。ここではAnimationという名前でフォルダを作ります。
フォルダができたらダウンロードしたアニメーションをインポートします。
※[ mixamo.com.glb ]をこの後、使用するので名前をわかりやすく変えておきます。インポートしたアニメーションの数だけこの作業が必要になります。

全部、入れ終わると下記のようになっていると思います。

次に、AnimStateGraphを右クリックで作りましょう。

作ったらダブルクリックでAnimStateGraphを開きます。
開いたら、まずパラメーター[ xDirection ]と[ zDirection ]を2つ用意します。
画面左下の[ +PARAMETER ]から作ります。
パラメーターはスクリプトに値を渡すのに使用します。

次に画面上のグリッドの部分を右クリックして[ Add new state ]を押し、新しいステートを作ります。
これを用意したアニメーションと同じ9つ用意します。

Stateを結んでいる、青い矢印はアニメーションを遷移させる条件を設定するものです。
[ ANY ]の上で右クリックして[ Add transition ]というものを選択すると矢印を出すことができるので、下図を真似して作ってください。
ステートグラフとパラメータを用意し終わったら、下の画面のようになります。

ここまで出来たら、青い矢印をクリックしてください。
TRANSITIONというものが、右の方に見えると思います。
下の画像を真似して、遷移を用意してください。

遷移を9つ用意設定できたら、アニメーションをそれぞれ当てはめていきます。
まず、Forwardのステートを選択します。選択したら右下にEmptyがあると思うので、横のペンマークを押し、先ほどインポートした、[ Jogging.glb ]を選択します。
これを、それぞれ9つのアニメーションに当てはめていきます。

アニメーションをキーボードで動かす

ここまで出来たら、次にアニメーションステートグラフで設定したアニメーションをキーボードで動かす準備をしましょう。
ベースはPlayCanvas公式のチュートリアルから持ってきたいと思います。
下記のURLからThird Person ControllerをFORKしてきましょう。

※Third Person Controllerのプロジェクトはこちら
https://developer.playcanvas.com/en/tutorials/third-person-controller/

FORKが出来たら、プロジェクトを開きます。
開いたらHIERARCHYにPlayerがあると思います。
Playerの上で右クリックしてCOPYします。

自分のプロジェクトに戻りRootの上で右クリック、Pasteしましょう
ついでに、Third Person Controllerプロジェクトから、Scriptsフォルダをコピーし、自分のプロジェクトにコピーしましょう。

全部できたら、下の画像のように
HIERARCHYにはPlayerが、Assetsには[ CameraMovement.js ]と[ PlayerMovement.js ]と言うScriptsが2つあると思います。

※Playerをコピーして持ってきたら赤枠の部分にエラーが出てるので、[ IMPORT AMMO ]しましょう、AMMOはJavaScriptでの物理計算をサポートしてくれるものです。

次にRootを選択、右クリックでNewEntityを作成します。
作成したNewEntityの名前をMyPlayerに変更します。
MyPlayerを選択して、COLLISION、RIGIDBODY、SCRIPTコンポーネントを追加します。
数字はそれぞれ画像のようにしてください、SCRIPTには[ PlayerMovement ]を忘れずに追加しましょう。

次に、ヒエラルキーの自分のモデルをドラッグ＆ドロップでMyPlayerの子にします。
続けてコピーしてきたPlayer内のCameraAxisをMyPlayerの子にします。(下画像 : 緑枠)
ついでにModelのRotationを[ Y:180 ]にします。(下画像 : 青枠)

※ここで、コピーしてきたPlayerとデフォルトのカメラ(下画像 : 赤枠の2つ)を削除します。カメラは今回使っているスクリプトの都合上、シーンにカメラが2つ存在すると困るので消します。

次に、ModelのAnimコンポーネントの歯車アイコン(下画像 : 赤枠)からコピーして、MyPlayerのコンポーネントに[ Paste Component ]します。
MyPlayerにペーストできたら、ModelのAnimは削除します。

最後にキャラクターが床から落ちないようにPlaneに[ COLLISION ]と[ RIGIDBODY ]を追加します。

ここまで出来たら、再生してみましょう。
キーボードのWASDでモデルが動いたら成功です、お疲れ様でした。

おわりに

PlayCanvas公式のテンプレートを少し変えるだけで、このようにモデルをすぐに動かすことができます。
前に紹介した、VroidのモデルをPlayCanvasにインポートする方法と組み合わせると、色々な可能性が見えてきてワクワクしますね。