Babylon.jsにはアニメーションを実現する仕組みがあります。ソースコードでキーフレーム別に座標を書いてもよいし、Blenderなど別のツールで作ったアニメーションを再生させることもできます。
今回は後者のように、別のツールで作ったアニメーションの任意のタイミングをきっかけに別の処理を発生させる方法を整理しました。
1. AnimationGroupとmasterFrame
以前の記事でも紹介しましたが、AnimationGroupという方法があり、これを使うとキャラクターモデルに内蔵されているアニメーションを簡単に再生できます。
しかし、このドキュメントではアニメーションの再生と停止方法は書いてあるのですが、任意のフレームを検出する方法は書いていません。
Babylon.js Forumで質問しようと思ったのですが、すでにforumでは同じ質問をしている人がいました。
読んでいくと、masterFrameというプロパティを使うことで、任意のフレームのタイミングを取得できるようです。
animationGroup.animatables[0].masterFrame
2. masterFrameを使って、剣を振った途中のタイミングで光の軌跡を発動させる
前回の記事では、アニメーションと独立して光の軌跡が表示されていました。本来は炎の魔法剣を振って前方に剣が向いたあたりで光の軌跡が出ると、剣から衝撃波が出る雰囲気を表現できます。
これを実現するには、剣を振るアニメーションのフレームのタイミングで衝撃波を出す関数を呼ぶ必要があります。
色々悩んだ結果、ちょっと強引ですがUpdate()関数の中でフラグ管理することで実現できました。
TrailMeshはSphereが付いています。これの大きさを上げて非表示にすることで、光の軌跡だけが高速で一直線に進むようにしています。
試しに、物理判定を付けた岩を適当に配置してみました。
岩に対する演出ができてないので単に吹き飛ばしているだけ、細かい調整がまだですが、剣を振って衝撃波を出すところはできました。
3. おわりに
次回は、岩をバラバラにするとか、煙を出すなどの演出をもう少し作りたいと思います。
