4
\$\begingroup\$

I dont know how to explain this, so I will use images to describe my problem.

The image I made using InkScape:

enter image description here

What it looks like in-game (ignore the runner):

enter image description here

As you can see the edges are not "sharp" ingame, even the static background (front-mountains and grass is scrolling) is distorted. I think you can see what I mean. What causes this? How can I fix it?

I use LibGdx to build my game, inside Android studio.

some relevant code:

background = new Sprite(new Texture(Gdx.files.internal("runner_background.png")));
camera = new OrthographicCamera();
viewport = new FitViewport(480, 800,camera);
viewport.apply();
camera.position.set(camera.viewportWidth / 2f, camera.viewportHeight / 2f, 0);
camera.update();

I draw my background like this, my RunnerScreen render method:

runnerWorld.update(delta);
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.update();
batch.setProjectionMatrix(camera.combined);
batch.begin();
runnerWorld.render(batch);
batch.end();

my runnerWorld render-method:

public void render(SpriteBatch batch){
batch.draw(background, 0 ,0);
scroller.render(batch);
runner.render(batch);
}
\$\endgroup\$
6
  • \$\begingroup\$ You have not given any info about the technology or software stack you are using. \$\endgroup\$ – msell Apr 17 '15 at 6:59
  • \$\begingroup\$ @Max, removed my answer/guess; sorry I'm DX :). I recommend posting a little more of the render code, perhaps everything between begin() and end(). Also, add tags for GDX and/or GL. \$\endgroup\$ – Jon Apr 17 '15 at 8:31
  • \$\begingroup\$ I added the full rendering method as well as information about my camera setup. If anything more is needed please let me know. \$\endgroup\$ – Green_qaue Apr 17 '15 at 8:57
  • 1
    \$\begingroup\$ Try setting your texture filter to Linear. \$\endgroup\$ – msell Apr 17 '15 at 9:46
  • 1
    \$\begingroup\$ In addition to msell's answer I'd like to point out that it might also be beneficial to scale up your image in inkscape a little before exporting to PNG. It'll give opengl a bit more info to work with. \$\endgroup\$ – Superdoggy Apr 17 '15 at 12:43
4
\$\begingroup\$

The artifacts are caused by scaling the images using point sampling / nearest neighbourhood filtering, which effetively doubles some of the pixels from the original image.

To get better results, switch to bilinear filtering which uses weighed average of multiple pixels. The result will be a little blurry, but should look a lot better than the current one.

With libGDX I guess you can do this with setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear) for your texture object.

\$\endgroup\$

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.