position.set() doesn't work as expected

[JeReT]

Hi,

 

I am using Phaser with TypeScript and encountered some strange behavior:

 

If I create some shape objects and change the position of one of them, the new position is applied to it (relative to the initial position) and to all other objects as well.

I want to change the position of only one object, not all. How can I achieve that?

 

here is some code for testing:

    class Main    {        game: Phaser.Game;        graphics: Phaser.Graphics;        constructor()        {            this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create });        }        create()        {            this.graphics = this.game.add.graphics(0, 0);            this.graphics.lineStyle(5, 0xffffff);            var circle1 = this.graphics.drawCircle(0.5 * this.game.width, 0.5 * this.game.height, 400);             var circle2 = this.graphics.drawCircle(0.5 * this.game.width, 0.5 * this.game.height, 200);             // this line shifts both circles. But why?            circle1.position.set(100, 100);        }    }window.onload = () =>{    var game = new Main();};

PS: it seems like the radius parameter of the drawCircle() method expects the diameter instead of the radius...

[xerver]

drawCircle doesn't return a circle, it returns the graphics object. There is no circle object that is created that you can move around, the x/y you pass to draw is the position (relative to the graphics object) that the circle will be at.

You are moving the graphics object and therefore the circles, drawn relative to the object's position, move. Think of the graphics object like a canvas 2d context. If you do context.fillRect(), you don't get a rectangle out of it to move around; it just draws a rectangle for you.

[JeReT]

Ok, thanks for clarification.

 

So there seem to be two solutions for me:

• Clearing the screen and draw everything again whenever a position changes
• Use sprites instead of shapes

I decided using sprites. I guess this is faster than the clear/draw cycle and also easier to implement.