Rounded Rectangle Shape object?

Phaser 3
1

Subject says it all. I can do:

this.add.rectangle(200, 400, 80, 20, 0xff6699);

but is there a way to create a rounded rectangle?

2

Yep!

fill:
example: https://labs.phaser.io/edit.html?src=src/game%20objects\graphics\fill%20rounded%20rectangle.js
api: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html#fillRoundedRect__anchor

stroke:
example: https://labs.phaser.io/view.html?src=src/game%20objects\graphics\stroke%20rounded%20rectangle.js
api: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html#strokeRoundedRect__anchor

3

Wow, that was a quick reply! I see that you can do it as a graphics object, I was hoping I could do it with a shape object, but I don’t see any examples here.

4

Ah I see. In that case yes, but not simply haha. You could always use a Polygon shape, but you’d need to come up with the points for the shape somehow.

5

The problem is making it interactive. Looks like I’ll have to hack together something.

6

No need to hack anything, just set a hit area.

There is also a plugin here.

You could also generate a texture from the graphics game object and use that.

7

Thanks @prob, generating a texture from a graphics object is how I handled this before I knew abut Shape game objects. It will do the trick fine :wink:

8

Rex Rainbow has a Rounded Rect Shape Plugin (which @prob linked to above) which I’d strongly recommend.