Phaser3 旋转动画

Question

我正在尝试创建一个来回摆动的钟摆的简单动画效果。我只为它使用一个图像精灵，我有下面的代码，但动画只倾斜到 45 度角然后完全停止。我可能做错了什么？

    var title = new Phaser.Scene("GameTitle");
var pendulum;
var direction;
title.create = function(){
    pendulum = this.add.sprite(200, 0, 'titlePendulum').setOrigin(0.5, 0).setScale(1.8).setRotation(79);
    direction = "left";
};

title.update = function(){
    console.log(pendulum.angle.toFixed(0));
    swing(direction);
    if(pendulum.angle.toFixed(0) == 71){
        swing ("right");
    }
    if(pendulum.angle.toFixed(0) == -76){
        swing("left");
    }
};

function swing(dir){
    if(dir == "left"){
        if(pendulum.angle.toFixed(0) == 71){
            swing("right");
        }else{
            pendulum.angle +=1.5;
        }

    }else{
        if(pendulum.angle.toFixed(0) > -80){
            pendulum.angle -= 1.5;
        }
        if(pendulum.angle.toFixed(0) == -76){
            swing("left");
        }
    }
}

Answer 1

我注意到您在两个单独的 if 语句中检查 pendulum.angle 是否大于或正好等于 80。然而 80 不能被 1.5 整除，角度的值可能是 .. 76, 77.5, 79, 80.5 .. 并且条件 pendulum.angle.toFixed(0) == 80 永远不会成立。

此外，函数参数的名称是 dir，但您检查了 direction。

我很确定这是导致问题的原因。即使不是这样，当您检查可以是一件事或另一件事的条件时，使用 if-else 仍然更好（更优雅和 "cleaner"），而不是使用两个单独的 if 语句。

所以把你的代码改成这样：

function swing(dir) {
    if (dir == "left") { // check parameter, not the direction global var
        if (pendulum.angle.toFixed(0) < 80) {
            pendulum.angle +=1.5;
        } else {
            swing("right");
        }
    } else { // dir == "right"
        if (pendulum.angle.toFixed(0) > -80) {
            pendulum.angle -= 1.5;
        } else {
            swing("left");
        }
    }
}

Phaser3 旋转动画

Phaser3 Rotation Animation

javascript

animation

phaser-framework