Jump to content

How to draw a round rectangle?


phamedev
 Share

Recommended Posts

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;
}

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...