Babylon.jsのチュートリアルをやってみるその9

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

animation

昨日に引き続きanimationについてです。 animetionもう少しちゃんと理解したいので明日もう一度やります。
目標は以下のリンクみたいにキャラクタを動かすことなのだけどなかなか難しい。

Babylon.jsでのanimation

単純にanimationさせるのでなく、フレームの位置でどうなって欲しいかBabylon.jsでも定義することができます。
以下のコードを定義してアニメーションさせると最初の値は1、20フレーム目で値が0.2になり、最後はまた1に戻ります。
valueはanimationを宣言した際のパラメータ2と連動しています。
キーを定義したあと「animationBox.setKeys」と「box1.animations.push」を使ってアニメーションを紐づけます。

    // アニメーションキーを設定
    var keys = [];
    //フレーム０の時対称の値はどうなっていてほしいか
    keys.push({
        frame: 0,
        value: 1
    });

    //
    keys.push({
        frame: 20,
        value: 0.2
    });

    //At the animation key 100, the value of scaling is "1"
    keys.push({
        frame: 100,
        value: 1
    });

    animationBox.setKeys(keys);
    box1.animations.push(animationBox);

アニメーション定義とフレームでの振る舞いを定義した後は「scene.beginAnimation」を使ってスタートさせることができます。

// box1 = アニメーションのターゲット
// 0 = アニメーションのスタート(from)
// 100 = アニメーションの終了(to)
// true = ループするかどうか
// ほかにもパラメータはあるが動かすにはデフォでよさそう
scene.beginAnimation(box1, 0, 100, true);

アニメーションを一時停止したい場合は以下を使う。　　

newAnimation.pause();

長々といろいろ定義してきたアニメーションですが、ヘルパー機能というものがあります。

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

きょうはここまで。
明日はanimationの3回目をやります。