Slick2D renders unwanted lines

Engines, Libraries and Tools
#1

Whenever one image is render next to, or overlapping an other image, there will be an line between the two images.
Example:

http://s24.postimg.org/gt2cd1w6t/error2.png

These two images are either rendered exactly next to each other or overlapping. As you can see, there is an unwanted line between these two images.

Here is an real example from my game, zoomed at 300%

http://s24.postimg.org/rtxhi2ofp/error.png

As you can see, there are unwanted lines when two images overlap. Oddly, it does not happen to the main character(the red guy).

How can I prevent this unwanted line from getting rendered?

#2

Well, that shouldn’t happen, and doesn’t happen normally. No one can help unless you post code hint hint

#3

Have a look at the code that renders the background, foreground and main character:

	@Override
	public void render(GameContainer gc, Graphics g) throws SlickException 
	{	
		g.translate(-tx, -ty);
		g.scale(sx, sy);
		g.rotate(rx, ry, ang);

		if(stage.background != null)
			stage.background.getObject().draw(0,0);
		
		DataImage mainImg = main.getFrame();
		if(main.visible && mainImg != null)
			mainImg.draw(main.currX + main.offsetX, main.currY + main.offsetY);

		if(stage.foreground != null)		
			stage.foreground.getObject().draw(0,0);

		g.translate(tx, ty);
		g.rotate(rx, ry, -ang);
	}

Nothing special, just the standard drawing functions.

#4

I’ve barely worked with Slick2D, so I don’t know, but can you change the texture filtering options? It looks like it’s bleeding the gray color into what I assume is the transparent part of the texture on the wall that you circled. Same goes for the background texture.

#5

As Opiop mentioned, it appears to be an anti-aliasing artifact. I’m guessing it’s caused by the calls to Graphics translate, scale, and rotate. Try adding g.setAntiAlias(false); to the top of the render function and see if the problem still persists.

#6

Could be a premultiplied alpha issue. Maybe a bug with Slick’s FBO usage (i.e. “image graphics”).

Another possibility is that you’re using sprite sheets, and getting bleeding like this. If that doesn’t fix it – you should try using power-of-two texture sizes (16, 32, 64, 128, 256, 512, etc). Slick does some funky stuff to try and turn NPOT into POT sizes.

#7

Well, disabling anti alias did not work :frowning:
Also, I am not rendering sprite sheets but a subclass of org.newdawn.slick.Image. This subclass just store pixel data, for pixel-perfect collisions.
Also, there is no transparent edges on these images. All the colors on background and foreground have alpha value 255. I have also tried adding black background to the foreground image, trying to make the unwanted line look black. But nope, it remains gray. That means that the problem is when two images are overlapping/rendered next to each other.

#8

I resolved this bug using BigImage instead of Image. The dimensions of background and foreground are 5000x5000 so I figure BigImage would solve this and it did :slight_smile: