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