2

次のコードがあります。

var lion = game.add.sprite(2, 2,'lion');
var jump = game.add.tween(lion);
jump.to({x: 1000, y: 1000 }, 10000, Phaser.Easing.Linear.None);
// ... 
jump.start();

私はスプライトを作成し、それを 2 点間で移動させたいと考えています。ここでは、ライオンを左上隅から右下のある点 (1000,1000) に移動しています。この動きに跳ねる動きを加えることはできますか？

今はライオンが一直線に動いているのですが、次のようにライオンがジャンプしているように見せたいです。

ジャンプするライオン

どうすればこれを達成できますか？トゥイーンは実際にこのような複雑なパスを生成できますか?

4

1 に答える 1

4

API はトリッキーで文書化されていますが (imho)、この動作を実現するための適切なポイントを見つけることができました。トゥイーンがどのように機能し、どこに変更を適用するかを理解するのに 2 日かかりました。

トゥイーンが作成されると、それにイージング関数を渡すことができます。必要なイージングは​​ Y 軸のみ (跳ねる動き) に適用され、右への動きは X 軸のみに適用されます。したがって、2 つの個別のトゥイーンを使用する必要があります。

function vanHalen (v) { // Might as well jump
    game.debug.spriteInfo(lion, 32, 32);
    return Math.sin(v * Math.PI) * 1; 
};

function goLion() {
    var move = game.add.tween(lion);
    var jump = game.add.tween(lion);

    // "Move" is a linear easing function that will move the sprite to (1000,y). It takes the Lion 2 Seconds to get there.
    move.to({x: 1000}, 2000);

    // The Jump is a function that works on the y axis, uses a customized easing function to "bounce". 

    jump.to({y: 30}, 500, vanHalen, true, 0, Number.MAX_VALUE, 0);
    move.start();
};

ジャンプは自動的に開始され、終了することはありません。右への移動が終わると、ライオンは一箇所で跳ね続けます。

イージング関数は、トゥイーンが移動した距離 (パーセント) を示す進捗値 (0 から 1 の間) を受け取ります。

于 2014-08-17T13:04:45.903 に答える