Solved LibGDX Rendered tiled and non tiled sprite lines not smooth

Newbie & Debugging Questions
#1

Hello. I’ve ignored this for a while, which is probably not a good idea. I just can’t figure out what it is. I’ve gone through some forums. Checked if it was the TexturePacker Duplicate padding option or filtering but it didn’t change it.

It is very slight and changes when I resize the window.

The image below the tiles is a single tile stretched out.

947×63 658 Bytes

Here’s how I’m doing it.



private OrthographicCamera cam2D = new OrthographicCamera(Main.getWidth()/Globals.PPM, Main.getHeight()/Globals.PPM);
private OrthographicCamera camera = new OrthographicCamera(Main.getWidth(), Main.getHeight());
private OrthographicCamera cameraGUI = new OrthographicCamera(Main.getWidth(), Main.getHeight());

private SpriteBatch batch2D = new SpriteBatch();
private SpriteBatch batch = new SpriteBatch();
private SpriteBatch batchGUI = new SpriteBatch();

private AssetManager assets;
private TextureAtlas atlas;
public Sprite tile;

@Override
public void show(){
	assets = new AssetManager();
	assets.load("path.pack", TextureAtlas.class);
	assets.finishLoading();
	atlas = assets.get("path.pack");
	tile = new Sprite(atlas.findRegion("tile"));
	tile.getTexture().setFilter(TextureFilter.Nearest, TextureFilter.Nearest);
}

@Override
public void render(float delta){
	Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1f);
	Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

	batch2D.setProjectionMatrix(cam2D.combined);
	batch.setProjectionMatrix(camera.combined);
	batchGUI.setProjectionMatrix(cameraGUI.combined);

	cam2D.update();
	camera.update();
	cameraGUI.update();

	batch.begin();
	 ...
	batch.end();

	batch2D.begin();
	 ... 
	batch2D.end();

	batchGUI.begin();
	for(int x = 0; x < width+tile.getWidth()+10000; x+=(tile.getWidth())){
		batchGUI.draw(tile, -1000+x,50);
	}
	batchGUI.draw(tile, -Main.getWidth()/2, 0, Main.getWidth(), tile.getHeight());
	batchGUI.end();
}

@Override
public void resize(int width, int height){
	cam2D.viewportWidth = (Gdx.graphics.getWidth()/Globals.PPM);
	cam2D.viewportHeight = (Gdx.graphics.getHeight()/Globals.PPM);
	cam2D.update();

	camera.viewportWidth = (Gdx.graphics.getWidth());
	camera.viewportHeight = (Gdx.graphics.getHeight());
	camera.update();

	cameraGUI.viewportWidth = (Gdx.graphics.getWidth());
	cameraGUI.viewportHeight = (Gdx.graphics.getHeight());
	cameraGUI.update();
}

This has been bugging me for days now and I can’t find anything clear and accurate enough to explain.

Edit: Included the .pack file


tile.png
format: RGBA8888
filter: Nearest,Nearest
repeat: none
tile
  rotate: false
  xy: 1, 1
  size: 32, 32
  orig: 32, 32
  offset: 0, 0
  index: -1
#2

make sure your rendering canvas is always a power of 2 in size (width and height)
that’s why it goes wrong when you resize your window, at some points it will not be a power of 2 and the texture offsets will not be rounded numbers causing those jitters.

render everything to a framebuffer, which is easier to keep a power of 2, and then render that to the visible screen (which then doesn’t have to be a power of 2)

#3

I see. How would I go about rendering to a VBO altering the current code? There doesn’t seem to be anything with a good example. I meant to get into VBOs but never got around to it so don’t know much about how to use them. I’m just looking for a way to render clean images. When I resize the window I resize the camera viewport to the new size to account for stretching. I’m also going to be getting into GLSL eventually so I think using a VBO would be a good idea. I did resize the window to a few powers of 2 and it was clear each time. So that is on the right track.

Thanks for the reply!

#4

Try using TextureFilter.Linear

#5

you’re in luck, I have a simple framebuffer example here:

https://bitbucket.org/orangepascal/libgdxframebuffertest

#6

You are my saviour x) Thanks. It all looks good. Just have to cast to integer when rendering. Onwards to VBO study

#7

Orange pascal is awesome !