Slick Forums

Discuss the Slick 2D Library
It is currently Sun May 26, 2013 8:39 am

All times are UTC




Post new topic Reply to topic  [ 9 posts ] 
Author Message
PostPosted: Sun Mar 08, 2009 11:09 pm 
Offline

Joined: Wed Sep 17, 2008 1:06 am
Posts: 96
Hello again,

I've noticed some unsightly black edges on an image and some text. Take a look at the stats and the victory banner. Screenshot here.

I have used setWorldClip twice, once for the four characters, and again for the banner in order to animate them. A rotation has also been applied. I imagine the problem has to do with that transformation.

How can I get rid of them?


Top
 Profile  
 
 Post subject:
PostPosted: Sun Mar 08, 2009 11:35 pm 
Offline
Site Admin
User avatar

Joined: Thu Jan 01, 1970 12:00 am
Posts: 3143
Yeah, I'd guess it was the rotation. Not sure why those, I spose it's because the edge of the image is being clamped so it's draw the aliased undefined pixels or something :/

Not really sure. Could you provide some sort of simple test case that shows the issue. I know that's a big ask with such a complex problem but I can't think how to proceed otherwise.

Cheers,

Kev


Top
 Profile  
 
 Post subject:
PostPosted: Fri Mar 20, 2009 1:32 am 
Offline

Joined: Wed Sep 17, 2008 1:06 am
Posts: 96
Hey, sorry this took so long, but last time I tried it seemed as though the forums were down.

I hope this is what you wanted. :)

Code:
package boxRiders;

import org.newdawn.slick.BasicGame;
import org.newdawn.slick.Color;
import org.newdawn.slick.GameContainer;
import org.newdawn.slick.Graphics;
import org.newdawn.slick.Image;
import org.newdawn.slick.SlickException;
import org.newdawn.slick.AppGameContainer;
import org.newdawn.slick.fills.GradientFill;
import org.newdawn.slick.geom.Rectangle;

public class RotateTest extends BasicGame
{
   Image testimg;
   
   public RotateTest()
   {
      super("RotateTest");
   }
   
   public void init(GameContainer container) throws SlickException
   {
      testimg = new Image("res/sprites/UI/victory_banner.png");
   }
   
   public void update(GameContainer container, int delta)
   {
      //Do nothing
   }
   
   public void render(GameContainer container,  Graphics g)
   {
      Color a = new Color(0, 204, 0);
      Color b = new Color(153, 255, 0);
      GradientFill back = new GradientFill(0, 0, a, 0, 384, b);
      Rectangle bshape = new Rectangle(0, 0, 1025, 769);
      g.fill(bshape, back);
      g.rotate(512, 768/2, -7);
      g.drawImage(testimg, -40, 425);
      g.resetTransform();
   }
   
   public static void main(String[] args)
   {
      try {
         AppGameContainer app = new AppGameContainer(new RotateTest());
         app.setDisplayMode(1024,768,false);
         app.start();
      } catch (SlickException e) {
         e.printStackTrace();
      }
   }
}


And the image.

Remember to rename the image and change the path in the code.


Top
 Profile  
 
 Post subject:
PostPosted: Wed Mar 25, 2009 12:08 am 
Offline

Joined: Wed Sep 17, 2008 1:06 am
Posts: 96
Just a bump to get Kevin's attention if he hasn't lent his already. :)


Top
 Profile  
 
 Post subject:
PostPosted: Thu Mar 26, 2009 8:29 am 
Offline
Site Admin
User avatar

Joined: Thu Jan 01, 1970 12:00 am
Posts: 3143
Sorry, I'd lost this one in the hub-bub. I'm going to move it to BUG so I don't lose it again.

Kev


Top
 Profile  
 
 Post subject:
PostPosted: Sat Apr 04, 2009 11:46 pm 
Offline
Site Admin
User avatar

Joined: Thu Jan 01, 1970 12:00 am
Posts: 3143
So far, linear filtering is causing the issue. The linear filter is combining texels off the side of the image with those on the edges to give darker versions. No idea how you stop this atm.

First work around for the banner itself is to do:

Code:
testimg = new Image("testdata/victorybanner.png");
testimg = testimg.getSubImage(0,2,testimg.getWidth(),testimg.getHeight()-4);


Which gives the image a bit of a white border on the edges that count. This means the linear filtering combines white with white and you get the nice clean edges. Nearest filtering works but gives horrible looking rotations.

Kev


Top
 Profile  
 
 Post subject:
PostPosted: Sun Apr 05, 2009 12:07 am 
Offline
Site Admin
User avatar

Joined: Thu Jan 01, 1970 12:00 am
Posts: 3143
Assuming you're using TrueTypeFont for your text the edges on the text shouldn't turn up any more.

Kev


Top
 Profile  
 
 Post subject:
PostPosted: Sun Apr 05, 2009 1:21 am 
Offline
Site Admin
User avatar

Joined: Thu Jan 01, 1970 12:00 am
Posts: 3143
Updated the image loading for images that arn't POT to copy edges around - this means linear filtering has some appropriate pixels at edges which leaves a smooth finish.

Net result - you shouldn't need the extra hack any more, and the artefacts should be gone.

As a side effect I've changed the default font for slick - if you need the old one it'll still be in SVN history.

Fixed I think.

Kev


Top
 Profile  
 
 Post subject:
PostPosted: Fri Dec 25, 2009 7:52 pm 
Offline
Regular

Joined: Wed Dec 09, 2009 6:56 pm
Posts: 132
I noticed a similar bug. I am using a PackedSpriteSheet containing a bunch of 32x32 sized sprites. In the init() method, I am unpacking it into a bunch of Image objects. When I display one of the Images at particular angles I notice pixel-sized artifacts along the borders. It appears to be picking up some pixels from neighboring sprites in the PackedSpriteSheet.

Is there a work-around for this?


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group