Set the origin of a graphics object

Phaser 3
1

I am trying to call setOrigin() on a graphics object but it does not work. I have also directly influenced originX and originY to no avail. Is it possible to change the origin of a graphics object in Phaser?

2

@Legomite I think that is not possible, since a graphics objects does not extend Phaser.GameObjects.Components.Origin.

3

Graphics objects just store a list of commands which they use to draw primitive shapes to the game canvas. They are not textures - thus, they don’t have dimensions (i.e. a width or a height). They only have a position, which is used to translate the shapes which are rendered. Because of that, they can’t really have an origin - after all, an origin is relative to a Game Object’s size, so it doesn’t make sense for something like a Graphics object. The only “origin” is at the top-left corner of the Graphics canvas.

If you know the size of what you’re rendering, you could manually adjust the position of the Graphics object based on the intended origin or translate it before drawing to the Graphics object. You can’t get around this even if you turn the Graphics object into a texture - after all, textures always have a size, so the generateTexture method requires you to already know that size.

2 Likes
4

Hi all! I saw this post at the first one that popped up on a google search. It’s old but I thought i’d post a solution.

graphics don’t have setOrigin functions but you can offset a fillRect function like this:

		let width = 32;
		let height = 32;
		let flash_graphic = scene.add.graphics()
		.fillRect(-width / 2, -height / 2, width, height);

When I did the above then set the angle of the graphic, it pivoted in the graphics centre rather than the top left hand side.

Hope this helps others in future.

3 Likes