Libgdx – Drawing a rounded rectangle Pixmap

Rectangles look nicer if they have rounded corners like this:

rr-finished

One way to build them is to use 2 rectangles and 4 circles all filled with the same color:

rr-wireframe

You can use this code to create the Pixmap in Libgdx of the desired width, length, rounding radius and color:

public static Pixmap getPixmapRoundedRectangle(int width, int height, int radius, int color) {

 pixmap = new Pixmap(width, height, Format.RGBA8888);
 pixmap.setColor(color);

 // Pink rectangle
 pixmap.fillRectangle(0, radius, pixmap.getWidth(), pixmap.getHeight()-2*radius);

// Green rectangle
 pixmap.fillRectangle(radius, 0, pixmap.getWidth() - 2*radius, pixmap.getHeight());
 

// Bottom-left circle
 pixmap.fillCircle(radius, radius, radius);
 
// Top-left circle
pixmap.fillCircle(radius, pixmap.getHeight()-radius, radius);

// Bottom-right circle
 pixmap.fillCircle(pixmap.getWidth()-radius, radius, radius);

// Top-right circle
 pixmap.fillCircle(pixmap.getWidth()-radius, pixmap.getHeight()-radius, radius);
 return pixmap;
}

Such a Pixmap can be later used to create a Texture which is then drawn on the screen.

The final effect in Ready Steady Teddy:

rr-rst


←Table of contents
←My apps, games and other projects

Advertisements
Libgdx – Drawing a rounded rectangle Pixmap

6 thoughts on “Libgdx – Drawing a rounded rectangle Pixmap

  1. Me says:

    Hi Serge. I haven’t done anything special to create it apart from the code. However I am not scaling it – maybe this is the issue in your case? Have you tried e.g. “texture.setFilter(TextureFilter.Linear, TextureFilter.Linear);”?

  2. Serge K. says:

    Thank you very much for your fast response!
    Sorry, I have not clicked on the image from your game to see it in real size.
    On the small picture, corners look like they are anti-aliased.
    This is a drawback of the libgdx’s Pixmap as it doesn’t support any anti-aliased algorithms.
    Anyway, in your game rectangles with the rounded corners look pretty tasty 🙂
    Probably because of the color combinations. Well done!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s