javascript - Phaser 3 - 使用补间将游戏对象移动到鼠标点击（“点击移动”移动“）

Question

所以，我正在使用 Phaser 3 制作一个需要“点击移动”运动的游戏，但我不能使用物理，所以我想改变它并使用补间让玩家移动到点击位置（“点击移动”）。这是我使用的使用物理的代码：

var target = new Phaser.Math.Vector2();

preload(){
    this.load.image("image", "assets/image.png");
}

create(){
    player = this.physics.add.sprite(400, 350, "image");

    this.input.on('pointerup', function (pointer) {

        target.x = pointer.x;
        target.y = pointer.y;
        
        // Move at 200 px/s:
        this.physics.moveToObject(player, target, 200);

    }, this);
}

update(){
    var distance = Phaser.Math.Distance.Between(player.x, player.y, target.x, target.y);

    if (player.body.speed > 0)
    {
        //  4 is our distance tolerance. The faster it moves, the more tolerance is required.
        if (distance < 4)
        {
            player.body.reset(target.x, target.y);
            player.anims.stop();
        }
    }
}

我尝试这样做（使用补间），它可以工作，但不像我预期的那样，结果与使用物理的第一个代码有很大不同，它移动得更快，并且对象（玩家）不断传送到补间的原始 x 和是的。这是我尝试过的：

var tween;
var target = new Phaser.Math.Vector2();

preload(){
    this.load.image("image", "assets/image.png");
}

create(){
    player = this.add.sprite(400, 300, "image");

    tween = this.tweens.add({
        targets: player,
        x: 400,
        y: 300,
        ease: 'Power1',
        duration: -1,
        paused: true
    });

    this.input.on('pointerdown', function (pointer) {

        target.x = pointer.x
        target.y = pointer.y

        tween.play();
    });
}

update(){
    if (tween.isPlaying())
    {
        tween.updateTo('x', target.x, true);
        tween.updateTo('y', target.y, true);
    }
}

标签： javascriptphaser-framework