1
\$\begingroup\$

Hmm I'm getting this weird problem that i think may be a bug with slick but when ever i translate an image in slick 2d for some reason a weird white line appears on the left side of every image like this

enter image description here

This is the method for rendering each of the tiles, btw they are 32x32 textures

public void render(GameContainer gc, StateBasedGame game, Graphics g) throws SlickException {
    g.translate(-playerX, -playerY);
    //render the blocks here
    for(int x = 0; x <= ((Size.WIDTH/Size.Tile)+1); x++) {
        for(int y = 0; y <= ((Size.HEIGHT/Size.Tile)+1); y++) {
            g.drawImage(Sprites.dirt, x*Size.Tile, y*Size.Tile);
        }
    }
    g.translate(playerX, playerY);
    //render the player here, dont touch
    //no texture it was based off an old sheet
    g.drawImage(Sprites.grass, (Size.WIDTH-Size.Tile)/2, (Size.HEIGHT-Size.Tile)/2);

Sprite Getter :

public class Sprites {
    public static Image SpriteSheet;
    public static Image grass;
    public static Image dirt;
    public static void Init() throws SlickException {

        SpriteSheet = new Image("assets/images/SpriteSheets/Sprites.png");
        grass = SpriteSheet.getSubImage(0, 0, Size.Tile, Size.Tile);
        dirt = SpriteSheet.getSubImage(0, 1*32, Size.Tile, Size.Tile);
    }
}

if you want to see the rest of the code it is at MC2D.zip

\$\endgroup\$
  • 2
    \$\begingroup\$ I explained the issue and possible ways to resolve it on a similar question here. While the issue was presented in a different engine, the same concepts to resolve it should still apply. \$\endgroup\$ – driima Oct 12 '15 at 15:07
  • \$\begingroup\$ i just looked at the translate method for slick and directly wants to use either a float or an int but i need the accuracy of a float otherwise it goes off the screen to fast \$\endgroup\$ – Hamish Oct 13 '15 at 1:02
  • \$\begingroup\$ Just another thing double's don't work either \$\endgroup\$ – Hamish Oct 13 '15 at 5:03
1
\$\begingroup\$

There are several possible reasons for this issue.

I have not yet worked with Slick2d - but one of the following things might help:

  1. Make sure that the coordinates you are rendering to are all on full pixels - not on e.g. 100.2

  2. If possible set the texture interpolation mode to nearest neighbour, not linear. This might lead to colors being dragged in.

  3. Try to surround the tiles with a 1 px line that repeats the tiles's outline. This might fix artifacts from rounding errors in OpenGL.

In your case I would assume that 2+3 fixes the issues - it seems that you are dragging in white color from the left side of the tiles (which in wrap mode means that you are dragging in the right border of the texture).

\$\endgroup\$
  • \$\begingroup\$ yeah i don't think this is the case because forgot to mention this only occurs when i start scrolling (translating) my map so my best bet as it may be what Rouze said with using floats as coordinates. \$\endgroup\$ – Hamish Oct 13 '15 at 0:58
  • \$\begingroup\$ I don't recommend using floating point coordinates - it will almost always give you trouble on tile borders. You force OpenGL into sub-pixel blending. It will also result in blurry tiles - e.g. if you have a white 1px line on a black background and you place it at a coordinate 0.5 you'll end in a gray line of 2 pixels width. Padding will not fix the issue. If you add transparency around the sprites, you will get black lines instead of the white ones - from the background shining through. You'll have to repeat the sprite's outer border - see (3). You can do this manually or by software. \$\endgroup\$ – Andreas Löw Oct 13 '15 at 5:57
  • \$\begingroup\$ The only other way would be to lower the update rate or make a second update method i guess. \$\endgroup\$ – Hamish Oct 13 '15 at 12:09
  • \$\begingroup\$ No. This is not the problem here. Did you try the 3 steps I proposed here? \$\endgroup\$ – Andreas Löw Oct 14 '15 at 19:04
  • \$\begingroup\$ well what i did worked so... \$\endgroup\$ – Hamish Oct 14 '15 at 22:33
0
\$\begingroup\$

In this part of the code

public class Sprites {
    public static Image SpriteSheet;
    public static Image grass;
    public static Image dirt;
    public static void Init() throws SlickException {

        SpriteSheet = new Image("assets/images/SpriteSheets/Sprites.png");
        grass = SpriteSheet.getSubImage(0, 0, Size.Tile, Size.Tile);
        dirt = SpriteSheet.getSubImage(0, 1*32, Size.Tile, Size.Tile);
    }
}

You do the following

dirt = SpriteSheet.getSubImage(0, 1*32, Size.Tile, Size.Tile);

As you mentioned you are using 32*32 images. Maybe if you switch form 1*32 to 1*31 the while one pixel line will disappear. For me it seems like you are taking one pixel outside of the texture.

Corrected code:

 dirt = SpriteSheet.getSubImage(0, 1*31, Size.Tile, Size.Tile);
\$\endgroup\$
  • \$\begingroup\$ If this were the case, the same effect would be visible on the x-axis. I explained the issue and possible ways to resolve it on a similar question here. \$\endgroup\$ – driima Oct 12 '15 at 15:05

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.