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\$
3
  • 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, 2015 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, 2015 at 1:02
  • \$\begingroup\$ Just another thing double's don't work either \$\endgroup\$
    – Hamish
    Oct 13, 2015 at 5:03

2 Answers 2

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\$
5
  • \$\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, 2015 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\$ Oct 13, 2015 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, 2015 at 12:09
  • \$\begingroup\$ No. This is not the problem here. Did you try the 3 steps I proposed here? \$\endgroup\$ Oct 14, 2015 at 19:04
  • \$\begingroup\$ well what i did worked so... \$\endgroup\$
    – Hamish
    Oct 14, 2015 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\$
1
  • \$\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, 2015 at 15:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .