在补间期间如何读取形状对象的位置 x

Question

我有扩展形状的 Circle 对象，我正在尝试获取 x 的值或对象在二维平面中的位置。在动画（补间）过程中，位置不会更新并保持静态。我该如何解决这个问题？

export class Circle extends Phaser.GameObjects.Shape {
    tween;
    constructor(scene:Phaser.Scene, x, y) {
        super(scene);
        let enemy = scene.add.circle(x, y, 20);
        enemy.setStrokeStyle(1, 0x05F9FB);
    
        this.tween = scene.tweens.add({
            targets: enemy,
            x: 560,
            y: 200,
            ease: 'Power1',
            duration: 3000,
            yoyo: true,
            repeat: -1
        });
    }
}

我在更新方法中有以下方法，它总是 returns 原始 x 值而不是补间期间的更新值。

update() {
    //Always returns  the orginal position of x and not the updated or current state of x
    console.log(enemy.x);
}

Answer 1

enemy 位置 x 和 y 不是补间中使用的 circle 的位置。一个选项是，创建一个属性，以便您可以从属性.

访问该位置

这里是一个小例子，访问是如何工作的：

// Minor formating for Whosebug
document.body.style = "display: flex;flex-direction: column;";    

class Circle extends Phaser.GameObjects.Shape {
    constructor(scene, x, y) {
        super(scene, x, y);
        this.circle = scene.add.circle(x, y, 20);           
        this.circle.setStrokeStyle(3, 0x05F9FB);
    
        this.tween = scene.tweens.add({
            targets: this.circle,
            x: 400,
            y: 120,
            duration: 3000,
            yoyo: true,
            repeat: 3
        });
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 163,
    scene: {
        create,
        update
    }
}; 

function update(){
    this.info.setText(`x: ${this.enemy.circle.x.toFixed(0)}\ny: ${this.enemy.circle.y.toFixed(0)}  `);
}

function create () {
    this.enemy =  new Circle(this, 100, 100);
    this.info = this.add.text(20,20, '', 0xffffff);
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

更新：

信息：使用getter（和setter）或方法使代码更简洁

像这样

 class Circle extends Phaser.GameObjects.Shape {
     ...
     getPosition(){
         let { x, y } = this.circle;
         return { x, y };
     }
 }

在补间期间如何读取形状对象的位置 x

How to read position x of Shape Object when during tween

javascript

game-development

tween

typescript

phaser-framework