アニメーション

PlayCanvasは、エンティティの階層でアニメーションクリップを再生することで、その階層をアニメーションさせます。クリップは、名前の付いたノードのプロパティについて、時間に沿ったキーフレームをまとめたものです。対象になるのは、キャラクターのボーン、機械の部品、あるいはライトの色のようなコンポーネントのプロパティです。Animコンポーネントは、そのエンティティの下にある階層でクリップを再生します。このセクションのほかの内容は、すべてこのコンポーネントの上に成り立っています。

GLB Animation

上のT-Rexを読み込むと、ドラッグでその周りを回れます。これはWeb Componentsのサンプルで、アニメーションはすべて、モデルの<pc-model>要素の中にある空の<pc-anim>要素ひとつから来ています。クリップを宣言していないので、モデル自体のクリップをループ再生します。各環境での使い方で、同じことを各環境でどう行うかを比べられます。

アニメーションの仕組み

クリップ は通常、インポートしたモデルに含まれています。GLBや、エディターでインポートしたFBXファイルには、そのアニメーションが付いてきます。また、コードでキーフレームからクリップを作成することもできます。クリップはノード名で対象にバインドするので、1つのクリップで、同じ名前のノードを持つどのモデルでもアニメーションさせられます。
Animコンポーネント は、そのエンティティの下にある階層でクリップを再生します。再生する各クリップはステートに保持され、ステートを切り替えると、コンポーネントがステート間をクロスフェードします。
ステートグラフ は、どのステートを再生するかを決めます。ステートグラフは、ステートと、ステート間の遷移、そしてspeedやjumpトリガーのような、遷移が判定するパラメーターからなるステートマシンです。パラメーターをコードから設定すれば、あとはグラフが処理します。
ブレンドツリー は、1つのステートの中で複数のクリップをパラメーターの値に応じてブレンドします。これにより、キャラクターは歩きから走りへ滑らかに移行できます。
レイヤーとマスク は、1つのモデルで複数のステートグラフを同時に再生し、それぞれをモデルの一部のノードに限定します。これにより、キャラクターは歩きながら手を振ることができます。
イベント は、クリップ内の指定した時間に発火し、足音、エフェクト、ゲームプレイの処理に使えます。

各環境での使い方

Animコンポーネントはどこでも同じですが、環境によって公開されている範囲が異なります。その環境にマークアップやUIが用意されていない機能には、コードからエンジンのコンポーネントを通してアクセスできます。

	Engine	Editor	React	Web Components
モデルのクリップを再生する	`entity.anim.assignAnimation()`	Animコンポーネントとステートグラフアセット	`<Anim playing />`	`<pc-anim>`
クロスフェードでクリップを切り替える	`layer.transition()`	ステートグラフの遷移	エンジンAPI	`clip`属性と`transition-time`属性
ステートグラフとパラメーター	`entity.anim.loadStateGraph()`	Anim State Graphアセットのエディター	エンジンAPI	エンジンAPI
ブレンドツリー	ステートグラフのデータ内	スクリプトからのみ	エンジンAPI	エンジンAPI
レイヤーとマスク	`entity.anim.addLayer()`	レイヤーはグラフで、マスクはAnimコンポーネントで	エンジンAPI	エンジンAPI
イベント	クリップに`new pc.AnimEvents()`	アニメーションアセットのイベント	エンジンAPI	エンジンAPI

注記

Animコンポーネントは、ステートグラフを使わずにクリップを再生する、以前のAnimationコンポーネントに代わるものです。Animationコンポーネントは現在も動作しますが、新しいプロジェクトではAnimコンポーネントを使ってください。Spineで作成した2Dスケルタルアニメーションについては、Spineを参照してください。

このセクションの内容

アニメーションの再生 - Animコンポーネントの追加、クリップの再生と切り替え、速度、一時停止、ループ、再生が終わったクリップ。
アニメーションクリップ - GLBとFBXファイルのクリップ、ノードへのバインドの仕組み、コードでのクリップの作成。
ステートグラフ - エディターやコードで構築する、ステート、遷移、パラメーター、条件。
ブレンドツリー - 1つか2つのパラメーター、またはクリップごとのウェイトによるクリップのブレンド。
レイヤーとマスク - 複数のグラフの同時再生、それらのブレンド、マスクによるモデルの一部への限定。
アニメーションイベント - クリップ内の指定した時間でのイベントの発火と、その処理。