Flickering textures (borders) in slick2D

Newbie & Debugging Questions
#1

Hello :slight_smile:

I noticed a very bad looking flickering in my “game”. I put several images together, so that it looks like a house with 4 floors. Each floor has 3 images. The borders are not seamless everytime ( yes I counted every pixel :stuck_out_tongue: ). And the edges of straight lines are flickering during movement of the character. Could this be because I am using lots of loops iterating arraylists and so on? I cannot think that this is the problem, because it still runs at 60fps (targeted).
In some positions and with luck the overlays are seamless.

Thanks for help

Kronos

#2

Or is this approach, displaying 1024x384 sized pictures in a grid a bad idea? What could be better?

#3

I am not sure if this is exactly what is happening with you but I had a problem where I was updating some textures position in two different methods, which creates problems since they are updated at different times and created a little bit of a flickering effect when I started and stopped movement. I am not sure if this is the case here but try and keep all movement things close together in the render loop

#4

I found out why there is a flickering. It is because of the g.translate at the Camera Class. While the graphics is not being translated, there is no flickering.

This ist the translate Method of my camera class:


	public void translate(Graphics g, Entity entity) {

		if (entity.x - width / 2 + entity.width < 0) {
			transX = 0;
		} else if (entity.x + width / 2 + entity.width > world.width) {
			transX = -world.width + width;
		} else {
			transX = -entity.x + width / 2 - entity.width;
		}
			
		if (entity.y -height / 2 + entity.height < 0) {
			transY = 0;
		} else if (entity.y + height / 2 + entity.height > world.height) {
			transY = -world.height + height;
		} else {
			transY = -entity.y + height / 2 - entity.height;			
		}

		g.translate(transX, transY+marginTop);
	}

Has anybody an idea what could be improved? Thanks :slight_smile:

#5

update and translate at same location (or as close as it can be)

#6

Hi thanks for your answer. I don’t know when Slick2d envokes the update and render methods, but I envoke the translate method at the beginning of the render method. Isn’t this close enough?

#7

I am not sure about slick but I know in libgdx this will occur when you update the camera and move something at different locations. I don’t even see the point of using slick anymore

#8

I couldn’t fight this flickering yet :frowning:
But I think the way I handle my background could be a hughe factor for this appearance. I have a 1024512 big PNG for the background. I scale it during runtime every frame by 3, so it’s 3072 1536.
First I had this size, but slick said this would be too big for the current Hardware (onBoard Graphics). So we decided to scale it down do meet the requirements, since it is pixelart it could be scaled anyway.

But is this the proper way? I mean it works, but the flickering (only during camera translation) is not beatiful at all :-\

#9

Is the graphic itself flickering or only the borders of the graphics where the graphics touch each other.

In case its the second, that sometimes happen in case you perform sub-pixel translations. So the short moment where one texture defines one half of a pixel and the next texture defines the second half. That is the moment of the flicker. This was the problem for me at least.

Other than that only vsync comes to mind. But I guess you know what that looks like and that is not it.

Nitram

#10

Hey vsync really removed the flickering :smiley: thanks, I didn’t thought of it, because I always thought I enabled it.

But now the translation looks jerky ( I hope it is the right word), like it would stuck after every “centimetre”. Is there something in my translation code, that causes this?

#11

I guess it does. For a smooth looking transition you can’t use a constant movement value per frame.

You need the time between two frames (that changes very slighty from frame to frame) as a factor to your movement. As you are using Slick2D this value you need is provided by the update function call as “delta” (time in milliseconds since the last call of the update method)

Use this value to scale your movement. So you say you want to move x pixels in x seconds. The rest is simple math :wink:

Nitram

#12

HI, do you mean the movement from the character or camera? The character is multiplied with delta. But the in the translation method I dont use any delta.

#13

I guess you can use it as thumb rule. All visible animations need to be related to the delta time. All movements, all frame switches, everything the player is able to see. Because you can’t be sure that the time per frame is the same at very players computer.