LÖVE

Posted: **Mon Feb 17, 2014 4:32 pm**

So due to boredom i decided to try and make rounded rectangles in löve. And then i did. And here it is.

function round_rectangle(x, y, width, height, radius)
	--RECTANGLES
	love.graphics.rectangle("fill", x + radius, y + radius, width - (radius * 2), height - radius * 2)
	love.graphics.rectangle("fill", x + radius, y, width - (radius * 2), radius)
	love.graphics.rectangle("fill", x + radius, y + height - radius, width - (radius * 2), radius)
	love.graphics.rectangle("fill", x, y + radius, radius, height - (radius * 2))
	love.graphics.rectangle("fill", x + (width - radius), y + radius, radius, height - (radius * 2))
	
	--ARCS
	love.graphics.arc("fill", x + radius, y + radius, radius, math.rad(-180), math.rad(-90))
	love.graphics.arc("fill", x + width - radius , y + radius, radius, math.rad(-90), math.rad(0))
	love.graphics.arc("fill", x + radius, y + height - radius, radius, math.rad(-180), math.rad(-270))
	love.graphics.arc("fill", x + width - radius , y + height - radius, radius, math.rad(0), math.rad(90))
end

The way it works is very simple, It draws a couple rectangles in this formation:

Then fills in the corners using arcs

Put it all together and you get this:

These were drawn with the "line" mode for illustration purposes.

Syntax is like a normal rectangle except it has an extra "radius" argument which is the corner radius (How round the rectangle is).
I attached a little demo as well, You can create rounded rectangles by clicking and dragging. first click should be the top left corner, and where you let go should be the bottom right corner, does not work properly the other way around cause i'm lazy.

But yeah, Perhaps someone, somewhere, some day will find this useful.

Posted: **Mon Feb 17, 2014 7:44 pm**

This is brilliant!

Posted: **Mon Feb 17, 2014 9:48 pm**

When only X or only Y is negative it doesn't work well.

Posted: **Tue Feb 18, 2014 1:43 am**

Any reason for using five rectangles when three will do?

Code: Select all

gr.rectangle("fill", x + r,	y + r,		w - 2*r, 	h - 2*r )
gr.rectangle("fill", x + r,	y,		w - 2*r, 	r )
gr.rectangle("fill", x + r,	y + h - r,	w - 2*r, 	r )

is the same as

Code: Select all

gr.rectangle('fill', x + r, y, 			w-2*r,		h )

Just comparing your code with mine - no biggy.

Posted: **Tue Feb 18, 2014 10:16 am**

Nice!

I'd suggest to use a polygon though. It can work similarly but has the advantage that you can also draw it using "line" draw mode - and it won't have any lines going through the middle. Also, just one draw call...

Posted: **Tue Feb 18, 2014 11:00 am**

Germanunkol wrote:I'd suggest to use a polygon though.

Like my roundrect.lua, which, coincidentally, will be exactly four years old this Friday! (Actually, it's older than that, but that stuff got lost.)

... if I can find it. It seems to be lost to time.

Posted: **Tue Feb 18, 2014 2:14 pm**

Robin wrote:... if I can find it. It seems to be lost to time.

Found one version here:

viewtopic.php?f=4&t=11511&p=69006#p69006

I don't know if its' the most recent one.

Funny enough, on that post you mention you "can't remember how many times you have uploaded it".

I suggest creating a github/repo for it.

Posted: **Tue Feb 18, 2014 3:14 pm**

Thanks! And yeah, I was thinking the same thing.

Here's a Gist of it.

Posted: **Tue Feb 18, 2014 3:17 pm**

Well, if you need a 'line' mode you could use this simple approach

Code: Select all

gr.setColor( line_color )
round_rectangle( x,  y,  w,  h,  r )
gr.setColor( background_color )               -- to remove center of rectangle
round_rectangle( x+1, y+1, w-2, h-2, r )  -- giving a line width of one

but it does require multiple draw calls and no polygon created ... so can't be reused without being regenerated.

Posted: **Tue Feb 18, 2014 7:14 pm**

... and it has the problem that it only works if you're drawing on a pristine background.

LÖVE

Rounded Rectangles

Rounded Rectangles

Re: Rounded Rectangles

Re: Rounded Rectangles

Re: Rounded Rectangles

Re: Rounded Rectangles

Re: Rounded Rectangles

Re: Rounded Rectangles

Re: Rounded Rectangles

Re: Rounded Rectangles

Re: Rounded Rectangles