2
\$\begingroup\$

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:

enter image description here

The original background:

enter image description here

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!

\$\endgroup\$
2
\$\begingroup\$

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:

enter image description here

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

enter image description here

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.

\$\endgroup\$
  • \$\begingroup\$ 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. \$\endgroup\$ – Do you Kno Da Wae Aug 11 '17 at 6:58
2
\$\begingroup\$

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:

Example mesh

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

\$\endgroup\$
  • \$\begingroup\$ 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. \$\endgroup\$ – Do you Kno Da Wae Aug 11 '17 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.