babylon.js でのステップも8個目!!

今回はアニメーションです!

アニメーションは、メッシュに動きを与えて見栄えがするシーンを作成出来ます。

いきましょう!

アニメーションの2つの方法

アニメーション方法には2つあります。

  1. 予めアニメーションの動きのキーフレームを定義する方法
  1. 実行時にアニメーションを適用されるようにプロパティを随時変更する方法

キーフレームアニメーション

まず環境を作ります

シーン、ライト、カメラを設定してから、箱を一個置いてみます。

function createScene() {
//Here... your basic scene as before: [scene, light, camera]
//Create a box
var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene);
box1.position.x = -20;

アニメーションオブジェクトを定義します。
(GSAPみたいなトゥイーン的な方法ですね)

// new BABYLON.Animation(名前,変更対象(例:xの大きさ),値の型,動作タイプ);
var animationBox = new BABYLON.Animation("myAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

値の型は次の設定値があります

  • BABYLON.Animation.ANIMATIONTYPE_FLOAT
  • BABYLON.Animation.ANIMATIONTYPE_VECTOR2
  • BABYLON.Animation.ANIMATIONTYPE_VECTOR3
  • BABYLON.Animation.ANIMATIONTYPE_QUATERNION
  • BABYLON.Animation.ANIMATIONTYPE_MATRIX
  • BABYLON.Animation.ANIMATIONTYPE_COLOR3

動作タイプには次の設定があります

  • BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE・・・以前の値を使いインクリメントしてループ
  • BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE・・・初期値にリセットしてループ
  • BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT・・・最後の値をキープしてループ

動作モードについてもう少し捕捉すると

次のように アニメーションキーを設定するとして

// 配列にキーフレームを設定(フレームは昇順でpushしないとならない!)
var keys = [];
//キーフレーム 0で, スケールを1
keys.push({
frame: 0,
value: 1
});
//キーフレーム20で, スケールを0.2
keys.push({
frame: 20,
value: 0.2
});
//キーフレーム 100で, スケールを1
keys.push({
frame: 100,
value: 1
});

Vector2、Vector3、Quaternionの場合は、キーにinTangent値とoutTangent値を設定します

var keys = [];
keys.push({
frame: 0,
value: BABYLON.Vector3.Zero(),
outTangent: new BABYLON.Vector3(1, 0, 0)
});
keys.push({
frame: 20,
inTangent: new BABYLON.Vector3(1, 0, 0),
value: new BABYLON.Vector3(1, 1, 1),
outTangent: new BABYLON.Vector3(-1, 0, 0)
});
keys.push({
frame: 100,
inTangent: new BABYLON.Vector3(-1, 0, 0),
value: BABYLON.Vector3.Zero()
});

そして、定義したアニメーション配列をアニメオブジェクトに設定します

animationBox.setKeys(keys);

そして、このアニメーションを箱に紐付けます

box1.animations = [];
box1.animations.push(animationBox);

そして、実行コマンド(beginAnimation)でアニメーションが起動します

// 箱をキーフレーム0から100まで実行!
scene.beginAnimation(box1, 0, 100, true);

キーフレームを入れ替えて逆に実行も可能!

scene.beginAnimation(box1, 100, 0, true);

beginAnimationには、そのほかスピード設定などなど、いろいろ設定できるのドキュメントを確認してみてくださいな

アニメーションを止める方法

実行した後に

var newAnimation = scene.beginAnimation(box1, 0, 100, true);

pauseで止められます

newAnimation.pause();

そのほか、restart(),stop(),reset()もあります

終了を待って同期処理をする

promises を使って同期実行が出来ます

var anim = scene.beginAnimation(box1, 0, 100, false);
console.log("before");
await anim.waitAsync();
console.log("after");

例はこちら
https://www.babylonjs-playground.com/#HZBCXR

CreateAndStartAnimation関数

AbstractMeshオブジェクトの場合には、

StartとEndを設定することでアニメーションを定義出来ます。

BABYLON.Animation.CreateAndStartAnimation('boxscale', box1, 'scaling.x', 30, 120, 1.0, 1.5);

アニメーションのブレンド

f:id:hollywis:20200620162648p:plain
歩いている状態から走る状態へのなめらかな遷移など、アニメーションのブレンドが出来ます!

enableBlending = true を設定

例はこちら
https://www.babylonjs-playground.com/#2BLI9T#174

f:id:hollywis:20200620162742p:plain

アニメーションの重みを設定してブレンド

Babylon.js 3.2以降では、ブレンドを特定の重みでアニメーションを開始できます。

重さを用いたアニメーションはscene.beginWeightedAnimationAPIを使用します。

// 停止 重み 1.0
// scene.beginWeightedAnimation(対象,開始フレーム,終了フレーム,重み,ループ(true/false),(スピード),(終了後の処理),(アニメート設定))
var idleAnim = scene.beginWeightedAnimation(skeleton, 0, 89, 1.0, true);
// 歩き 重み 0
var walkAnim = scene.beginWeightedAnimation(skeleton, 90, 124, 0, true);
// 走り 重み 0
var runAnim = scene.beginWeightedAnimation(skeleton, 125, 146, 0, true);

重みは0から1.0の間をとります。-1を設定するとモードがオフになります。

例はこちら
https://www.babylonjs-playground.com/#IQN716#9

イージング機能

アニメーションにイージングを追加出来ます

イージングチートシート
Easing Functions Cheat Sheet

適用できる関数はこちら

  • BABYLON.CircleEase()
  • BABYLON.BackEase(amplitude)
  • BABYLON.BounceEase(bounces, bounciness)
  • BABYLON.CubicEase()
  • BABYLON.ElasticEase(oscillations, springiness)
  • BABYLON.ExponentialEase(exponent)
  • BABYLON.PowerEase(power)
  • BABYLON.QuadraticEase()
  • BABYLON.QuarticEase()
  • BABYLON.QuinticEase()
  • BABYLON.SineEase()
  • BABYLON.BezierCurveEase()

EasingModeプロパティを使用して、イージング関数の動作の変更もできます。
つまり、アニメーションの補間方法を変更できます。EasingModeに指定できる値は3つあります。

  • BABYLON.EasingFunction.EASINGMODE_EASEIN :補間は、イージング関数に関連付けられた数式に従います。
  • BABYLON.EasingFunction.EASINGMODE_EASEOUT :補間は、100%補間からイージング関数に関連付けられた数式の出力を引いたものに従います。
  • BABYLON.EasingFunction.EASINGMODE_EASEINOUT :補間では、アニメーションの前半にEaseInを使用し、後半にEaseOutを使用します。

補完ベジェの自作も出来ます

// 例
var bezierEase = new BABYLON.BezierCurveEase(0.32, -0.73, 0.69, 1.59);

設定例はこちら
https://www.babylonjs-playground.com/#8ZNVGR

複雑なアニメーション

複雑なアニメーションでは、アニメーションの各フレーム(ティック)ごとにすべてを選択できます。

ゲームのような複雑なアニメーションを設定する場合は、こちらを使います。

requestAnimationFrameを使うわけですがbabylon.jsでは便利なregisterBeforeRenderが用意されています

scene.registerBeforeRender(function () {
//Your code here
});

例はこちら
https://playground.babylonjs.com/#YJVTI6

まとめ

アニメーションには、予め動きを定義できる

「キーフレームアニメーション」

「複雑なアニメーション」

の2つがありました。

「キーフレームアニメーション」には、かなり細かい設定が可能なプロパティが多く用意されており、予定調和可能な映画やCMのような表現で活躍すると思います。

また、ゲームのような動きが予測出来ないような場合には「複雑なアニメーション」をregisterBeforeRender関数を利用して実行します。

お次はコリジョン(衝突)判定

いきましょう

hollywis.hatenablog.com

Receive the latest news in your email
Table of content
Related articles