# How do I work out what resolution my backgrounds should be?

I'm working on a game that's 1200 x 800. The pixels per meter ratio is 1:20. When I add my background texture that is 400 x 225. It fits well in the zone however the lines on the image are pixelated. How can I work out what resolution my background should be in order for it to not look pixelated?

Here's what I have so far:

@Override
public void show() {
...
b1 = new Texture(Gdx.files.internal("backgrounds/spr_stars01.png"), true);
b1.setFilter(TextureFilter.Linear, TextureFilter.Linear);
...
}

@Override
public void render(float delta) { //(43, 55, 61)
...
Gdx.gl.glClearColor(132/255f, 0/255f, 35/255f, 1f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
world.step(TIMESTEP, VELOCITYITERATIONS, POSITIONITERATIONS);
world.getBodies(bodies);

camera.position.set(player.getPosition().x, player.getPosition().y, 0);
camera.update();

timer += (delta*1.25f);
batch.setProjectionMatrix(camera.combined);

batch.begin();
batch.draw(b1, player.getPosition().x/20, player.getPosition().y/20);
batch.end();
...
}

@Override
public void resize(int width, int height) {
camera.viewportWidth = 1200 / 20; //60m
camera.viewportHeight = 800 / 20; //40m
hud.getViewport().update(width, height);
}


The result:

The original background:

edit: my windows resolutions is 1200x800

edit2: Both answers have helped greatly in understanding background scaling. I have decided to create reusable polygon textures, much smaller than my original background, that I can scale with my box2d world. Thanks for the help!

As I understand, your game window has a size of 1280x720 and the texture has 400x225.

This is how this setup looks like in Photoshop:

And this is how the photo behaves after a resize-up:

Keep in mind that it was optimized by the Photoshop itself during the resize process (it has more power than LibGDX and still looks blurry).

I don't why is the background in your game zoomed that much, but if this is an expected size - your only option is to create it in a higher resolution.

As you applied TextureFilters.Linear - it's already smoothed. You can check this by commenting the setFilter(TextureFilter.Linear, TextureFilter.Linear); line.

Also, what happens here is called Aliasing. You can try messing with AntiAlias buffers (LibGDX AA question on SO), but it won't help much (and if so, it'll decrease performance dramatically, especially on mobile devices). If your want your image to be in a good quality in-game, it has to match the windows dimensions or be even larger.

• Thanks for this information, my background is zoomed as much as it is because box2d works with meters and my resolution is 1200x800. So if I zoom in on a 1:20 ppm ratio the window will always display 60x40m of the box2d world. I'm currently using gimp and will try to create my background at a higher resolution. – girthquake Aug 11 '17 at 6:58

Judging by what you are trying to accomplish, there isn't a size that would work, as it would require a texture many times the size of your screen resolution.

You have three options in this situation:

1. Vector graphics - which alias exactly to the resolution no matter what size you scale them. Examples being SVG. You would probably need a library and a tool that can create vector art for this, such as Adobe Illustrator.
2. Create the background using a flat 3d mesh. This is the quickest and dirtiest method if no vector art library is available. You would use something like Blender to make a mesh that is colored appropriately and can be scaled the same way. I've made a quick mockup for demonstration:

1. The usual way - compose your background using many smaller sprites each placed at various points specified in a map.

Personally, I would recommend option 2 or 3.

2 is good in that it doesn't require anything you have to already have access to - 3d rendering ability and free software. The know-how is another story, but there's plenty of help laying around. However, you're going to have a tougher time generating enough background to make the background interesting this way.

3 is good as you can make a lot of reusable "stamps" that can be recombined in interesting ways so as to not bore the eye.

This is where you'll want to reflect on what the purpose of the background is. Is it there to tell the player where they are in the world, or just give a sense of where they're going, or...?

• To answer your question it is just a simple parallax background. However I find what you proposed to be interesting. I can't use SVG because of the compatibility with libgdx, but option 3 may be my best bet. My only issue with it is that for it to parallax I need to keep track of every texture co-ordinate in the background and adjust them according to the other layers. – girthquake Aug 11 '17 at 7:15