Flickering text (love.graphics.print)

[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.

[Jasoco]

Can you please upload your .love here. It's easier to troubleshoot when we can see the problem too.

[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.

[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.

[mrzapp]

That makes sense to me, but not only doesn't it stop shivering, it makes the image shiver too

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

[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.

[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()

[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.

[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