How to draw a round rectangle?

[phamedev]

I have a game in flash that uses vector rectangles with different colors and sizes. The rectangles have round corners and white outline stroke of 4 pixels.

What is the best way to implement these rectangles in a Phaser game? I might have to use 6 different colors and 10 different sizes (both horizontal and vertical).

Is there anything like 9-Slice-Scaling, that we have in Adobe Flash? 

 

In case I'm not clear in explaining the round rectangle, I'm talking about the shape you get by using this css style in html:

div {
  width:300px;
  height:100px;
  background:#00CC00;
  border:3px solid #FFF;
  border-radius:20px;
}

[end3r]

7 minutes ago, phamedev said:

Is there anything like 9-Slice-Scaling, that we have in Adobe Flash? 

I haven't tried them, so I don't know if they work, but you can check out NineSlice or Nine Patch to see if it will help you solve your case.

[phamedev]

Thanks @end3r

But is there a way to draw a round rectangle using Phaser?

[drhayes]

Phaser.Graphics#drawRoundedRect is the first one that comes to mind. You could also do the calculations and stroke the path yourself in a BitmapData.

[phamedev]

43 minutes ago, drhayes said:

Phaser.Graphics#drawRoundedRect is the first one that comes to mind. You could also do the calculations and stroke the path yourself in a BitmapData.

Thanks! That is exactly what I was looking for.

But is there a way to draw a rectangle with outline?

EDIT: found this->  Phaser.Graphics.lineStyle(lineWidth, color, alpha)

[in mono]

24 minutes ago, phamedev said:

Thanks! That is exactly what I was looking for.

But is there a way to draw a rectangle with outline?

Yes, you can draw a shape and use it for both the stroke and the fill.

[phamedev]

4 minutes ago, in mono said:

Yes, you can draw a shape and use it for both the stroke and the fill.

I'm not sure how you use a shape for both stroke and the fill. Perhaps you mean two shapes?

But I found a better solution from the documentation:

Phaser.Graphics.lineStyle(lineWidth, color, alpha)

[in mono]

1 minute ago, phamedev said:

I'm not sure how you use a shape for both stroke and the fill. Perhaps you mean two shapes?

But I found a better solution from the documentation:

Phaser.Graphics.lineStyle(lineWidth, color, alpha)

I was talking about the approach using a BitmapData.