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

複数のアニメーションを切り替えられるようにする

まずは、ジャンプのアニメーションを[state Graph]に設定していきます。

State Graphエディタを開き、中央ビュー上で右クリックし表示される[Add new state]をクリックします。

Stateのnameを変更します。先程のアイドリングを入れたstate名を[idle]。

新規で生成したstate名を[jump]に変更します。

state[idle]の上で右クリックし、[Add transition]をクリックし、青い矢印を[idle]から[jump]へ伸ばし、[idle]から[jump]へ遷移できるようにします。

新しく[State]を追加すると、アニメーションの設定がリセットされてしまう場合があります。State Graphエディタを閉じ、先程追加した[Anim]の内容を確認しましょう。アニメーションの設定がリセットされている場合は、再度[Idle]アニメーションを空きスロットルへdrag＆dropします。

また、Chapter02フォルダ内にある[jump]アニメーションもdrag＆dropします。

一度、Launchで確認すると、[idle]を1回再生してから[jump]を再生しているのが確認できます。

state Graphエディター上で[jump]のStateの[Loop]にチェックが入っている場合は[Idle]を再生後、[jump]を繰り返します。

ボタンを押したらジャンプするようにする

[idle]状態から指定したキーを押すとジャンプするようにします。

[Add transition]をクリック、[jump]から[idle]へ矢印を繋ぎます。

これで、双方向から遷移することができるようになりました。ただし、この時点ではアニメーションとアニメーションの間隔やアニメーションの再生間隔などが設定できていません。

DurationとExit Timeを設定します。

Duration：アニメーション同士の繋ぎのフレーム再生速度

Exit Time：アニメーションの再生時間

stateのspeed：アニメーション全体の再生速度

ベースとなる[idle]から[jump]へのExit Timeを０に設定します。

[jump]から[idle]への設定

Duration : 0.2

Exit Time : 1

続いて、[jump]のパラメーターを設定します。[+PARAMETER]をクリックし、jump用のパラメーターを設定します。

Name : [jump]へ変更

Type : [Trigger]へ変更

このパラメータを[idle]から[jump]へのTRANSITIONへ設定します。

[New Condition]をクリックし、下の▼から先程作成した[PARAMETER]の[jump]を選択します。

State Graphエディタを閉じ、[jump]アニメーションを[chpter02]から[ANIMの空きスロットルへ]drag＆dropします。

アニメーション制御用の新規のスクリプトを作成

ASSETS/[chapter02]内で右クリック、[Script]を選択します。

名前を[anime.jp]とします。

ダブルクリックでコードエディタが開きます。

コードを以下のように書き換えます。


var Anime = pc.createScript('anime');

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

};

// update code called every frame
Anime.prototype.update = function(dt) {

//キーボード[J]を押したらジャンプする
if(this.app.keyboard.wasPressed(pc.KEY_J)){
        this.entity.anim.setTrigger('jump');
    }   
};

続いて、キャラクターにスクリプトを適用させます。

HIERARCHYから[mal01_container]を選択、[+ADD COMPONENT]から[Script]を選択。