Page 1 of 1

Flickering text (love.graphics.print)

Posted: Wed Jul 25, 2012 6:13 am
by mrzapp
Hey there,

I am using text with some animated objects, but whenever I want to move the text across the screen ( i.e. print it in a different location ), it seems a little off.
The image is being drawn where it's supposed to just fine, but the text is flickering or rather shivering whenever I relocate it.

Does anyone know why this happens? I'm sorry if it's been asked before, I just can't seem to find a thread like that.

Re: Flickering text (love.graphics.print)

Posted: Wed Jul 25, 2012 6:15 am
by Jasoco
Can you please upload your .love here. It's easier to troubleshoot when we can see the problem too.

Re: Flickering text (love.graphics.print)

Posted: Fri Jul 27, 2012 5:03 am
by mrzapp
Oh right, sorry.

I made a quick demo showing what I mean.
The image is being moved quite nicely, but the text is flickering.

Re: Flickering text (love.graphics.print)

Posted: Fri Jul 27, 2012 6:23 am
by dreadkillz
I think its because you're have subpixel coordinates. If you store your coordinates as integers or convert your coordinates to integers before you draw, it will stop shivering.

Code: Select all

function polarToCartesian ( angle, radius )
	local r				= radius
	local t				= angle
	
	local centerX		= width / 2
	local centerY		= height / 2
	
	local length		= degree or 180
	
	local newX			= r * math.cos ( t * math.pi / length )
	local newY			= r * math.sin ( t * math.pi / length )
	
	x					= math.floor(centerX + newX) --***
	y					= math.floor(centerY + newY) --***
end
Look at the N near the circle image to see that it doesn't wobble anymore.

Re: Flickering text (love.graphics.print)

Posted: Fri Jul 27, 2012 6:27 am
by mrzapp
That makes sense to me, but not only doesn't it stop shivering, it makes the image shiver too :P

Maybe images can be drawn at sub-pixel coordinates and text cant'?

Re: Flickering text (love.graphics.print)

Posted: Fri Jul 27, 2012 6:47 am
by dreadkillz
I don't see the image shaking at all but I do see it moving discretely instead of continuously in a circle. What I mean is that I see the image jump instead of glide into position.

This is probably related to the fact that the game loop works in discrete timesteps, so sometimes you may get a big dt and see a large movement step. There's also the fact that you're converting from polar to cartesian so the conversion is not perfect if you're also converting the (x,y) to integers.

You'll just have to deal with it. :|

Re: Flickering text (love.graphics.print)

Posted: Fri Jul 27, 2012 7:46 am
by juno
Hey.
This solves the shivering problem.
If you use love.graphics.translate to position your images/font instead...

Code: Select all

-- image
	love.graphics.push()
		love.graphics.translate(x,y)
		love.graphics.setColor ( 255, 255, 255, 255 )
		love.graphics.draw ( img, 0, 0, 0, 1, 1, img:getWidth() / 2, img:getHeight() / 2 )
		
		-- text
		love.graphics.setColor ( 0, 0, 0, 255 )
		love.graphics.print ( "TESTING", 2, 2, 0, 1, 1, font:getWidth("TESTING") / 2, font:getHeight() / 2 )
		love.graphics.setColor ( 255, 255, 255, 255 )
		love.graphics.print ( "TESTING", 0, 0, 0, 1, 1, font:getWidth("TESTING") / 2, font:getHeight() / 2)
	love.graphics.pop()

Re: Flickering text (love.graphics.print)

Posted: Fri Jul 27, 2012 9:42 am
by Boolsheet
I didn't notice before, but the C++ code indeed rounds up the x and y coordinates of love.graphics.print. I'm guessing this is hardcoded because the glyph is already interpolated when it was rendered by FreeType. Drawing it again "inbetween" pixels interpolates it again and that can lead to some other graphical artifacts.

Re: Flickering text (love.graphics.print)

Posted: Tue Jul 31, 2012 11:44 pm
by mrzapp
The translate code doesn't change anything really, but I learned a bunch of other things from it, so it was actually very helpful. Thank you so much for your input, I love this community already :)