Is something wrong with lg.rectangle?

[Grubby]

WINXP[SP3] Lv2d 0.9.2

Yesterday I tried to spiffy up some of my info panels by adding a single pixel line around them. What I got was a lined rectangle with its top left X coord offset by -1 and its height offset by +1. Here is some test code and an image pointing this out:

Main.lua

Code: Select all

io.stdout:setvbuf ("no")

function love.load()

fonts = {
	default	= love.graphics.newFont(12),
}

TileX, TileY = 24, 24

end


function love.update(dt)

end


function love.keypressed(key)

	if key == "escape" then
		love.event.push("quit")
	end

end


function love.mousepressed(x, y, button)

end


function love.draw()

	-- Draw 1st test boxes
	love.graphics.setFont(fonts.default)
	love.graphics.setColor(42, 52, 118, 255)
	love.graphics.rectangle( "fill", 2*TileX, 2*TileY, 164, 6*TileY )
	-- Draw fake date header
	love.graphics.setColor(192, 192, 192, 255)
	love.graphics.rectangle( "fill", 2*TileX, 1*TileY, 164, 1*TileY )
	-- fake date text
	love.graphics.setColor(0, 0, 0, 255)
	love.graphics.printf("Box 1", 2*TileX, 1*TileY, 164, "center")

	
	-- Draw 2nd test boxes
	love.graphics.setFont(fonts.default)
	love.graphics.setColor(42, 52, 118, 255)
	love.graphics.rectangle( "fill", 10*TileX, 2*TileY, 164, 6*TileY )
	
		-- Draw a border line around box
		love.graphics.setLineWidth(1)
		love.graphics.setLineStyle("rough")
		love.graphics.setColor(255, 255, 255, 255)
		love.graphics.rectangle( "line", 10*TileX, 2*TileY, 164, 6*TileY )
		
	-- Draw fake date header
	love.graphics.setColor(192, 192, 192, 255)
	love.graphics.rectangle( "fill", 10*TileX, 1*TileY, 164, 1*TileY )
	-- fake date text
	love.graphics.setColor(0, 0, 0, 255)
	love.graphics.printf("Box 2 Border Line", 10*TileX, 1*TileY, 164, "center")


	-- **Draw 3rd test boxes**
	love.graphics.setFont(fonts.default)
	love.graphics.setColor(192, 0, 0, 255)
	love.graphics.rectangle( "fill", 18*TileX, 2*TileY, 164, 6*TileY )
	
		-- Draw a border line around box
		love.graphics.setLineWidth(1)
		love.graphics.setLineStyle("rough")
		love.graphics.setColor(255, 255, 255, 255)
		-- ****** Why THIS need to compensate? *******
		love.graphics.rectangle( "line", 18*TileX+1, 2*TileY, 164-1, 6*TileY-1 )
		-- *******************************************
		
	-- Draw fake date header
	love.graphics.setColor(192, 192, 192, 255)
	love.graphics.rectangle( "fill", 18*TileX, 1*TileY, 164, 1*TileY )
	-- fake date text
	love.graphics.setColor(0, 0, 0, 255)
	love.graphics.printf("Box 3 line Compensate", 18*TileX, 1*TileY, 164, "center")

end

Boxes1.png (3.77 KiB) Viewed 3753 times

As you can see, the white border line on the second box is offset for some reason. The 3rd box is what I intended, but look at how I had to tweak the code to make it right. Why is Love2d doing this? Why am I needing to compensate for it? (3rd box)? Have I missed something? Any comments or ideas appreciated.

Thanks

[Jasoco]

Because there is no way to draw a pixel between pixel coordinates without blurring it so lined rectangles are drawn to the nearest whole pixel. Just offset and adjust the dimensions for lined rectangles.

[Grubby]

You're kidding right? This is almost laughable. Your telling me love2d can't properly create a simple single pixel outline around a rectangle? A rectangle (filled), by the way, that love2d actually created in the first place? Something is very wrong with that. Both your 'excuse/explanation' and the fact that love2d can't put a single pixel line around a previously created filled rectangle is disappointing.

I've noticed the 'loveframes' guy has a problem with that as well. Oddly enough, its a function that uses up to 4 single pixel 'filled' rectangles to create a lined rectangle. I wonder how many others just accepted this laughable condition and sought other workarounds? Whats the point of having a "line" rectangle option when everyone knows it sucks and therefore finds another way to create the lined shape?

Oh well...

[Jasoco]

You're placing the blame in the wrong place. It's physics. You can't have half pixels. Drawing a line between two pixels will just make both pixels half tone. I'm pretty sure it's OpenGL (Or whatever Löve uses) that's handling the drawing.

Just adjust the position by half a pixel.

Look at it this way. Odd number pixel thicknesses will be centered between pixels. Even ones will be split evenly. If you make a 2 pixel thick line, it's going to be centered properly. It's how displays work.

Can someone else come in here and explain this? It's been asked so many times before. I'm pretty sure someone once replied complete with nice looking graphs and charts showing why and how it happens. It's logic. It's working as intended. It's not that hard to compensate.

[Positive07]

Dude! No one is forcing you to use LÖVE... So if you dont like it go away... No one was aggressive so you shouldnt be aggressive either.

LÖVE is not at fault here, this is a totally expected behavior. As Jasoco said when SDL/OpenGL/LÖVE draws a line, the x and y position you pass to it, is the center, it draws half the width to one side and half the width to the other. When this width is an odd number of pixels there is a problem, you cant draw half a pixel (just as Jasoco said) so it draws wrongly... This is not an issue with LÖVE, it has been discussed a lot before and a decision was made so that LÖVE requires this 0.5px offset for odd width lines (This allows people to get the desired effects with scale and translate).

To fix this simply add 0.5px to the x and y of your rectangle (if it was a line you would have to do this for each point), or change the line width to an even number.

The issue is still being debated in LÖVE's issue tracker here.

Here you have a forum post with more details and images so that you can understand this better

[ivan]

Why THIS need to compensate?

I'm afraid line drawing is not a 'simple' problem at all, especially in realtime.
Love2D does a decent job at it, but in general it's a lot more complicated than you think.
I'll give you a very trivial example of the math involved.
Get a sheet of graph paper (representing the pixels on your screen).
Try drawing 2 squares on the graph paper:
1. the side of the first square should be 2 px
2. the side of the second square should be 3 px
What are the center coordinates of the two squares?

[kikito]

@Grubby LÖVE's chosen system for rectangles might not be the ideal for your particular case, but it works great if you are trying to draw 1px grids with rectangles.

You can't have it both ways - either the guys drawing grids make adjustments, or the guys drawing rectangles do. LÖVE just happened to choose one. In the future, if you need to draw grids, it might benefit you instead.

[Grubby]

Well, I suppose I could have worded my reply a bit better. I highly appreciate most of you -1 trying to calmly set this newbie straight. I get it now. There are some technical issue to deal with for which I don't truly understand. And there has indeed been a bunch of discussions on this topic elsewhere that still goes on. Overall, I'm good. Knowledge is power and all that happy crap.

Next time, I'll just ask a stupid newbie question and be done with it. Yup.

[Positive07]

-snip-

Be welcomed to the forums! And dont worry that much is all fine here hahaha

Could you solve this by adding the .5?