チュートリアル - 3Dモデルコンフィギュレーター 3/6 – PlayCanvas

各パーツごとにアニメーションを設定する

Anim State Graphについて

PlayCanvasにはノードベースでアニメーションを再生管理ができる
Anim State Graphというものがあります。

再生の切り替え用のスクリプトを少し書くだけで
簡単に複数のアニメーションを切り替えることができます。

詳しくはこちら参照

各パーツのEntityにアニメーションを設定する

Assetsの /Configurator/3Dmodel/~ に各パーツごとのディレクトリがあります。
それぞれ3Dモデルのデータやマテリアルなどがあります。

その中の Anim State Graph のデータを使用します。
これが今回使うアニメーションのデータです。

ディレクトリ名と同じ各パーツにAnim State Graphのデータを当てはめていきます。

TemplateのEntityを選択し、Anim Componentを追加します。

Anim Componentの設定
Root Boneには、設定しているこのEntity自身を登録します。
State Graph に先ほどの Anim State Graph のデータを登録します。
すると、下に Layer:Base といった項目が表示されます。

Layer:BaseのInitial Stateは初期状態のことで、これにもアニメーションを入れます。
あらかじめ用意していたアニメーションのデータ（Scene.glb）があるのでこれを入れます。

※Clock_Arm_band2, Hour_hand2には、Anim State Graphがありませんが、
動作はClock_Arm_band, Hour_handと同じなので、これと同じものをState Graphに登録します。

Launchで確認すると、アニメーションがループして動いているのが確認できます。

少し速度が速いので、各Anim ComponentのSpeedを 1 から 0.1 に変更して調整します。

アニメーションを制御するための準備をする

現状は初期状態でアニメーションがループする状態になっている。
これを何かアクションが起きてから動かす、ための処理を追加していきます。

Anim State Graphの編集画面から、PARAMETERSに「startAnimation」というNameのパラメータを作成します。
これはScriptからアニメーションをアクションさせたい時に使用するパラメータを作成ができます。

今回は、アニメーションがOn/Offになったことがわかれば良いので、Typeは「Boolean」に設定します。

次に新しいStateを作成します。
グラフの編集画面で右クリックから「Add new state」で新しいStateを作成できます。

作成したらNameをanimationにします。

次はStateからStateへ移るためのTransitionを設定します。
Stateを右クリックから「Add transition」で設定。

これをInitial Stateとanimationを相互に設定します。

矢印のTransitionをクリックすると右にTRANSITIONの設定が表示されます。

Transitionの設定ができ、DurationやOffsetなどを設定できる。

Durationは 0.2
Exit Timeは 0 (0にすると数値が消えます)

Conditionsは「New Conditions」で新しく作成。
これは設定したParameterのアクションを受け取った際にトランジションする、
といった処理を実行してくれます。

ここには先ほど作った、startAnimationを設定します。
startAnimationはBooleanで判定するので、
startAnimationがTrueの時はアニメーションするため、チェックボックスはTrueにする。

逆に、アニメーションから初期状態に戻る場合のTransitionでは
同様の設定内容にして、ConditionのstartAnimationをFalseにしておきます。

またStateの設定に戻ります。
Initial Stateは初期状態でアニメーションはさせないので、speedを0に設定。
あとループする必要もないので、Loopのチェックボックスを外します。

animationをクリックし、STATEの設定からアニメーションデータを設定します。
LINKED ENTITIESにはこのAnim State Graphを設定しているEntityの情報が表示されます。
このEntityに該当するアニメーションのデータ「Scene.glb」を設定します。

ボタンを作ってアニメーションさせよう

Anim State Graphでアニメーションさせる準備ができたので、
次はそのアニメーションをさせるためのボタンを作っていきます。

ボタンはElement Componentを使って作成していきます。

2D Screen、Group、ButtonとEntityに追加します。

GroupとButtonのPresetは「Top Left anchor & Pivot」を設定。

Buttonを適切なサイズに変更。
Textも「Animation 01」などと変更。

Buttonをクリック時にアニメーションさせるためにScriptを追加します。

animationToggle.jsを作成


var AnimationToggle = pc.createScript('animationToggle');

AnimationToggle.attributes.add("targetEntity", {type: "entity", array:true });

AnimationToggle.prototype.initialize = function() {
　　this.entity.element.on("click", () => {
　　　　for(let i=0; i<this.targetEntity.length; i++) {
　　　　　　if(!this.targetEntity[i].anim.getBoolean('startAnimation')) {
　　　　　　　　this.targetEntity[i].anim.setBoolean('startAnimation', true);
　　　　　　} else {
　　　　　　　　this.targetEntity[i].anim.setBoolean('startAnimation', false);
　　　　　　}
　　　　}
　　});
};

スクリプト属性にセットしたtargetEntityを参照。
そのEntityの中にあるAnim Componentを参照します。
プロパティで作成したstartAnimationのBooleanのプロパティを処理します。
このBooleanを判定して、アニメーションを遷移してくれます。

ButtonにScript ComponentからAdd Scriptで animationToggle.jsを追加します。

Parseボタンを押して、スクリプト属性で設定した targetEntity を設定します。
Anim Componentを設定したEntityを選択します。

ここでは、Clock_Arm_bandのEntityをセットしています。