Hi,
I have the following set up for a Rounded Rectangle sprite class that was generated using the graphics object.
class RoundedRectangleSprite extends Phaser.GameObjects.Sprite {
scene : Phaser.Scene;
rectangleGraphics : RoundedRectangle
constructor(scene, x, y, width, height) {
super(scene, x, y, '');
scene.add.existing(this);
this.rectangleGraphics = new RoundedRectangle(scene, {width, height});
this.setTexture('roundedRect');
//this.setPosition(x, y); doesn't work!
}
}
class RoundedRectangle extends Phaser.GameObjects.Graphics {
scene : Phaser.Scene;
shapeGraphic : Phaser.GameObjects.Graphics;
strokeGraphic : Phaser.GameObjects.Graphics;
constructor(scene, rectObj : any, radius? : number) {
super(scene);
this.scene.add.existing(this);
this.lineStyle(10, 0x000000);
this.fillStyle(0xadd8e6);
this.shapeGraphic = this.fillRoundedRect(0, 0, rectObj.width, rectObj.height, 20);
this.strokeGraphic = this.strokeRoundedRect(0, 0, rectObj.width, rectObj.height, 20);
this.generateTexture('roundedRect');
this.destroy();
}
}
The sprite shows up only at (0,0) and not at (800,400) which are the x,y we pass in when we create RoundedRectangleSprite in the scene. I can tell that all the positioning is off (changing X / Y has unexpected behaviors), and I was just generally wondering if someone could point me to a good pattern to create these types of Phaser components.
What I want to do from a high level is I want to be able to create a sprite within a scene that is drawn with graphics, and I can use them as sprites just as if I had imported them as PNGs. Anyone have any code / examples of this type of thing?