[SOLVED] White lines / Tearing

Newbie & Debugging Questions
#1

Hello gents and… gents.

I recently started to experience white lines / tearing in my game and I dont quite no how to get rid of it.

That’s how it looks like:

http://img217.imageshack.us/img217/9816/notearing.png

http://img577.imageshack.us/img577/8836/tearing.png

The grass consists of little tiles and I already figured out that the camera (libGdx) isn’t happy with the float values. The FPS are capped to 100.
That’s how I move the camera:


cam.position.set((player.x + (player.width/2)), (player.y + (player.height/2)), 0);
cam.update();

If I cast the x and y values to integer the tearing is gone, but the camera gets a little wobbly.

So right now it’s either a smooth camera and tearing, or no tearing and a wobbly camera. A little nudge in the right direction would be great :slight_smile:

#2

Try using Filter.Nearest for your images.

#3

Can you elaborate please?

The “Sprite” class I use doesn’t seem to have a method in which I could pass a filter.

This is how I render them:


public void render(SpriteBatch batch){
		
		sprite.setPosition(x, y);
		sprite.draw(batch);
	}
#4

Most likely used as a constructor parameter or a method in that “sprite”/image class you use maybe?

#5

“Filters to be used with Pixmap.drawPixmap” well bummer

#6

Please post your entire Sprite-class or write up the way you use images in libgdx. Textures, AtlasRegions, how are you doing it. That’ll make it much easier to give you a definite answer to the question.
It looks like you might have to round off some floats (don’t just cast to Integer!!) when you’re drawing your textures, but I can’t see it from the code you’ve posted so far.

Try putting one of these on your values before/while you draw the terrain:
MathUtils.round(x)
MathUtils.roundPositive(x) - marginally faster, but only works on positive numbers

#7

I am using the Sprite-class that comes with slick, and you can either use Texture or TextureRegion for it. I use TextureRegion.

I applied the round method to both the camera and the render x, y values for every entity and that did the trick, thank you :slight_smile:


cam.position.set(MathUtils.roundPositive(player.x + (player.width/2)), MathUtils.roundPositive(player.y + (player.height/2)), 0);
cam.update();

//--

public void render(SpriteBatch batch){
		
	sprite.setPosition(MathUtils.roundPositive(x), MathUtils.roundPositive(y));
	sprite.draw(batch);
}
#8

You would set the filter using Texture and TextureFilter:
http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Texture.html

:wink:

#9

Does’nt that have the same effect as casting to an int?

#10

Casting to Integer always rounds downward, so

5.2 becomes 5 and
5.8 becomes 5 aswell.

Mathutils.round() rounds properly, so

5.2 becomes 5 and
5.8 becomes 6.

Besides, I only casted the camera values to Integer and forgot about the render x and y values.

#11

The problem is most likely caused by how you calculate your tile positions in combination with float rounding.

For example, mathematically equal multiplications and additions might not equal the exact same value. For example

x = y*2 + y;

might not give the exact same result as

x = y*3;

The reason why I took this exact example is because that’s most likely what you’re doing for your sprite positions (or what LibGDX does). Consider a tile, it goes from


x1 = tileX * tileSize;

to


x2 = tileX * tileSize + tileSize;

However, the tile next to it at index tileX+1 will start at

x1 = (tileX + 1) * tileSize;

Now there’s a chance for those two to be different since

tileX * tileSize + tileSize 
//may not be equal to
(tileX + 1) * tileSize

Rounding the values therefore eliminates the problem, but is not a very elegant solution. =S

#12

Thank you for the insight :slight_smile:

#13

Indeed!

Doh :slight_smile:
Did you try removing the rounding from the camera after you did it for the render values? It might not be needed.

You’re very welcome :slight_smile: