PlayCanvasのAnim State Graph

今まで、PlayCanvasではアニメーションを制御するのに本格的なスクリプトを書く必要がありました。
このAnimStateGraphはノードベースでアニメーションを再生することが可能です。切り替え用のスクリプトをちょっと書くだけで、簡単に複数のアニメーションを切り替えられます。

アニメーションの切り替え

必要な3Dデータ

https://launch.playcanvas.com/1138588?debug=true
走る、ジャンプ、歩くのアニメーションを切り替えられます。用意するデータはアイドリング、走る、ジャンプ、歩くの4つのアニメーション付きFBXデータです。

Anim State Graphの作成

Assets欄で"New Assete"→"Anim State Graph"を新規に作成します。

"New Anim State Graph"というアイコンが作成されます。
ダブルクリックで専用のエディターが開きます。


デフォルトで"Start"から"Initial State"が1つ接続されています。"Initial State"の名前を"Idle"に変更。

3Dモデルに適用させる

"SD_base"という名前のキャラクターに適用させます。"ADD COMPONENT"から"Anim"を選択します。

先程作成した"New Anim State Graph"をdrag＆dropで空きスロットルに適用させます。

Add New Statの作成

ASSETS欄にある"New Anim State Graph"アイコンをダブルクリックし、ANIMATION STATE GRAPHエディターを出します。エディターのノードシーン上で、右クリックで新規に"Add new state"を作成します。

Walkという名前に変更し、Asset欄からインポートしたアニメーションデータ"walk.glb"を3Dモデルの"SD_base"にdrag＆dropで適用。

右側の"LAYERS"と"PARAMETERS"を変更していきます。

"Default State"を何にするか決めます。"Idle"に設定します。

"PARAMETERS"を"+"ボタンから追加し、Nameを先程追加した"Walk"に変更し、Typeを今回は"Trigger"に変更します。

Add transitionでStateを繋ぐ

Stateパネルの上で右クリックで"Add transition"を作成します。"Idle"と"Walk"で両方から繋ぎます。

"Idle"から"Walk"に繋いでる矢印を選択するとTransitionを設定していきます。
Duration:0.2
Exit Time:1
Condition:Walk

続いて、反対の矢印も設定していきます。

スクリプトの設定

ASSETS欄から新規スクリプトを"Walk"という名称で作成します。

Walk.js

var Walk = pc.createScript('walk');

// initialize code called once per entity
Walk.prototype.initialize = function() {

};

// update code called every frame
Walk.prototype.update = function(dt) {
   if(this.app.keyboard.wasPressed(pc.KEY_W)){
        this.entity.anim.setTrigger('walk');
    } 
};

キーボードの"K"を押したらsetTrigger指定している"Walk"を再生します。

アニメーションを追加してみる

同じ要領で[走る]、[ジャンプ]を追加していきます。

Walk.js

var Walk = pc.createScript('walk');

// initialize code called once per entity
Walk.prototype.initialize = function() {  
};
// update code called every frame
Walk.prototype.update = function(dt) {
   if(this.app.keyboard.wasPressed(pc.KEY_W)){
        this.entity.anim.setTrigger('walk');
    }   
   if(this.app.keyboard.wasPressed(pc.KEY_J)){
        this.entity.anim.setTrigger('jamp');
    }   
   if(this.app.keyboard.wasPressed(pc.KEY_R)){
        this.entity.anim.setTrigger('run');
    } 
};

結果:　https://playcanv.as/p/RlUENaX4/

まとめ

今まで、複数のアニメーション制御にはかなりプログラムを書く必要がありましたが、プログラミングが出来ないデザイナーレベルでも、シンプルなコードでアニメーションを制御することが可能になりました。キャラクターだけでなく、Blender上から作成した複数のオブジェクトアニメーションをボタンやキーボードから操作することが容易になったかと思います。皆さんも是非使ってみてください。

【PlayCanvas 公式サイト】
https://playcanvas.jp

【Twitter】
https://twitter.com/playcanvasJP

【日本 PlayCanvas ユーザ会 - Slack】
日本の PlayCanvas 開発者が集まったコミュニティがございます。PlayCanvas での開発に興味がある方はぜひこちらご参加ください。参加には Slackが必要となります。
https://playcanvas.jp/joincommunity