0

私は、ピスが2つの方法で同時にアニメーション化されるkineticjsを使用してボードゲームを開発しています:

1 - x 座標と y 座標のトゥイーンを使用して、場所 a から b までアニメーション化します。ユーザーからの入力を取得して、問題なくこれを行います。

2 - スプライトでは、ピースが持ち上げられ (フレーム 0 > 4)、前のアニメーションの間はそのままで、最後に 4 から 8 にアニメーション化され、最初に戻ります。アイドル状態

ここに画像の説明を入力

これまでのところ、私はこれを持っています:

var animations = {
   idle: [{x: 0, y: 0, width: 100, height: 100}],
   up: [{x: 0, y: 0, width: 100, height: 100},
    {x: 100, y: 0, width: 100, height: 100},
    {x: 200, y: 0, width: 100, height: 100},
    {x: 300, y: 0, width: 100, height: 100}],
   down: [{x: 400, y: 0, width: 100, height: 100},
    {x: 500, y: 0, width: 100, height: 100},
    {x: 600, y: 0, width: 100, height: 100},
    {x: 700, y: 0, width: 100, height: 100}]
};

/* coordinates_js is an array of the possible x and y coordinates for the player. like this, the player is created in the first coordinate, the starting point
        */
        var player = new Kinetic.Sprite({
               x: coordinates_js[0].x,
               y: coordinates_js[0].y,
               image: imageObj,
               animation: 'idle',
               animations: animations,
               frameRate: 7,
               index: 0,
               scale: 0.4,
               id: "player"
            });
    imageObj.onload = function() {

       var targetx = null;
       var targety = null;
       var targetIndex = null;
       var playerIndex = 0;


       document.getElementById('enviar').addEventListener('click', function() {
        targetIndex = document.getElementById("targetIndex").value;

        var destino = coordinates_js[targetIndex];

        var tween = new Kinetic.Tween({
           node: player,
           x: destino.x,
           y: destino.y,
           rotation: 0,
           duration: 5
        }).play();

        console.log("x: " + destino.x + "y: " + destino.y)

        playerIndex = targetIndex;

        tween.play();


        player.setAnimation("up");
        player.afterFrame(3, function(){
           console.log("idle")
           player.setAnimation("idle");
        })
       }, false);

       playLayer.add(player);
       stage.add(playLayer);

       player.start();
    }

ここでの問題は、スプライト アニメーションが 1 から 4 まで再生され、アイドル状態になることです。私はトゥイーンの終わりまでそれを維持する必要があります。ができた：

player.setAnimation("up");
player.afterFrame(3, function(){
  console.log("idle")
  player.setAnimation("idle");
})

これによりピースが持ち上げられますが、落下することはありません。では、フラッシュ gotoAndPlay("up") で開始し、トゥイーン gotoAndStop("idle") の最後でどのようにすればよいでしょうか。

皆さんに感謝します

4

1 に答える 1

1

onFinishトゥイーンのイベントを見たことがありますか？

http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-callback-with-kineticjs/

次のようなことができます。

var tween = new Kinetic.Tween({
  node: player,
  x: destino.x,
  y: destino.y,
  rotation: 0,
  duration: 5,
  onFinish: function() {
    player.setAnimation("idle"); //When tween finishes, go back to "idle" animation
  }
}).play(); //Play the Tween

player.setAnimation("up"); //Start the "up" animation for the sprite
于 2013-10-29T14:24:11.333 に答える