How to read position x of Shape Object when during tween

user_2473110 0
Viewed 50

I have the Circle object that extends shape and am trying to get the value of x or position of the object in 2d plane. During animation (tween) the position does not update and remains static. How do i fix this ?

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
        });
    }
}

I have the below method in update method and it always returns original x value not the update one during tween.

update() {
    //Always returns  the orginal position of x and not the updated or current state of x
    console.log(enemy.x);
}
tween phaser-framework game-development typescript javascript
1 Answers

The enemy position x and y is not the position of the circle, that is used in the tween. An option is, to create a property, so that you can acess the position, from the property.

Here small example, how the access could work:

// Minor formating for stackoverflow
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>

Update:

Info: To keep the code cleaner using a getter( and setter) or method might be cleaner

Like this

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