Is it possible to make graphics physical

Phaser 3
1

Is it possible to make, for example circles, created with graphics physical?

this.graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 }, fillStyle: { color: 0xff0000 }});

this.circle = new Phaser.Geom.Circle(400, 300, 200);
this.graphics.strokeCircleShape(this.circle);

I try to help myself with the docs but having a hard time with it.

2

Yes you can do that. Try:

this.physics.world.enable(graphics);

Here is a demo:

Consider baking the graphic object into a texture if it does not need to change later on:

If your Graphics object doesn’t change much (or at all) once you’ve drawn your shape to it, then you will help performance by calling Phaser.GameObjects.Graphics#generateTexture. This will ‘bake’ the Graphics object into a Texture, and return it. You can then use this Texture for Sprites or other display objects. If your Graphics object updates frequently then you should avoid doing this, as it will constantly generate new textures, which will consume memory.

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html

3 Likes
3

I have an observation irrelevant to topic but I see the demo you have linked speeds up after a few seconds it launches. I have seen it before in different examples too. And I have seen the opposite as well; It being slow down. It also happens tab changes too.

What is the reason? And How to avoid it?

4

Thank you very much for the explanation and the demo code! I have some follow up questions on this matter if you would:

  • Should one use graphics objects to create game objects that is subject to physics and not necessarily rectangular but circular?

  • Can a graphics object have a picture, as a texture on it?

  • When I fillCircle() instead of a fillRect() in your demo and setSize() with width and height arguments the circle stays way over the cube when dropped it is dropped over the cube without even touching. What is the reason of that?

  • How to setSize() if my graphics is a circle?

5

That line generateTexture(...) is unessecary in the demo, I just left it in there. You would need it if you bake the graphics as a texture for another gameobject to use.

No not really. You can simply use an sprite/image or generate a texture from a graphics object to use as a sprite. There is no benfit in using graphics, in fact you should try to avoid doing that directly as statet in the Quote at the top.

No the graphics object is only for primitive shapes. You probably want to use Sprite here.

I’ve updated your example and enabled the debugger so you can see the hitboxes on the objects. Also i’ve addded another sprite that uses texture generated from a graphicsobject.

6

What I wonder now there are games that uses very basic geometrical objects as game objects or player that looks like textureless. As if drawn by some hypothetical draw command. They interact with basic arcade physics or materialistic physics.
I think using a non-image or sprite way the graphics look like simplistic as desired and not pixelated as desired in those kind of games.
I don’t know how to achieve these requirements. If I could be clear enough. I thought it is the graphics. Since we just say draw and we do not load an image file with them.
What is the way to do this?

7

You could use Shapes for that pretty easily.

Or if you really want to draw everything yourself, use blank textures for the Arcade Sprites and then draw to a Graphics object.

2 Likes
8

Thanks a lot! I think the Shapes you mentioned is the answer to kinda abstract (textureless) objects with physics that we see in some kind of hyper casual games when it comes to build them by sing Phaser. Thanks everybody who posted to help. I need to study them more.