この記事は、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にインポートする方法と組み合わせると、色々な可能性が見えてきてワクワクしますね。