複数のアニメーションを切り替えられるようにする
まずは、ジャンプのアニメーションを[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を0に設定します。
[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]を選択。
[ANIM]コンポーネントの下に[SCRIPT]コンポーネントが追加されました。
空いている[+ADD SCRIPT]でクリックすると、現在このプロジェクト内にあるスクリプト一覧が表示されますので、先程作成した[anim.js]を選択します。
Lounch画面で確認してみましょう。アイドリングしているキャラクターが、キーボードの[J]ボタンを押すと1度ジャンプします。
State Graphの基本的な使い方は以上です。
これだけでは寂しいので、[攻撃してボックスを吹っ飛ばす]ことができるようにしていきたいと思います。
コメント
0件のコメント
サインインしてコメントを残してください。