PlayCanvasでMixamoのアニメーションを適用する方法 [第2回]

この記事は、[PlayCanvas Meetup #3](https://playcanvasjp.connpass.com/event/272477/)の投稿になります。

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


<br>
最終的な出来上がりは、こんな感じのものになります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">PlayCanvasにVRoidを適当にぶっこんでみた！PlayCanvasめっちゃ遊べる<a href="https://t.co/JVhNuBvvb8">https://t.co/JVhNuBvvb8</a><a href="https://twitter.com/hashtag/PlayCanvasAcademy?src=hash&amp;ref_src=twsrc%5Etfw">#PlayCanvasAcademy</a><a href="https://twitter.com/hashtag/WebGL?src=hash&amp;ref_src=twsrc%5Etfw">#WebGL</a><a href="https://twitter.com/hashtag/playcanvas?src=hash&amp;ref_src=twsrc%5Etfw">#playcanvas</a> <a href="https://t.co/ZIrfyTdK3c">pic.twitter.com/ZIrfyTdK3c</a></p>&mdash; Kazuya (@kazuyaplus) <a href="https://twitter.com/kazuyaplus/status/1574967403003248641?ref_src=twsrc%5Etfw">September 28, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br>

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

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

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

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

1. Idle(待機)
2. Jogging(前)
3. Jog Forward Diagonal_R(右斜め前)
4. Jog Forward Diagonal_L(左斜め前)
5. Jog Strafe Right(右)
6. Jog Strafe Left(左)
7. Jog Backward(後ろ)
8. Jog Backward Diagonal_R(右斜め後ろ)
9. Jog Backward Diagonal_L(左斜め後ろ)

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

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

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

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

![05B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/0a513f54-763c-81f2-6cce-850f575d0bf4.png)


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

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

![10B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/da3669b3-9de4-42a9-77c4-eece03d9cd7d.png)

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

![11B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/6443b285-c478-8eb1-0f7e-e002fe3b00aa.png)

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

![12B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/bc47205a-33b0-7744-5616-cb5411504cf4.png)

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

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/4016c3c5-dcb4-512c-5f34-88c9c78e6e4b.png)


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

![14B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/6144f56c-f4de-e76d-0e9c-310583433c8a.png)

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

![15B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/0ca97d09-f838-c933-e004-936e9aee85a2.png)


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

![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/b88eade5-3753-f40b-9892-60346716f49f.png)

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

![31B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/1c82fdd3-82ab-8728-b023-2c007a88ba0c.png)


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

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

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

![30B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/2e445f85-3ced-4823-b1a1-adc55e597026.png)

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

![33B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/88748dda-2f16-9aad-53cb-52b72c9d6d97.png)

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

![34B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/8f785d7a-214f-3852-acc9-96dcb7f73641.png)

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

![36B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/aff09845-9f00-9b22-d132-7c930ad1ed17.png)

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

![32B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/c6008425-30c7-b06a-017f-c760e7e8e580.png)

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

![42B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/8e1262fb-e1a9-8bf2-6550-8dbb82e017a4.png)

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

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

![45B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/ef59f497-9aaa-1cbf-2836-b5ab38e32b26.png)


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

![46B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/0666d54e-1fad-554d-0a3c-0351e3559008.png)

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

![41B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/9294d7d8-875c-1056-7e8b-79351adaacdd.png)

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


## おわりに

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