Slick Forums

Discuss the Slick 2D Library
It is currently Sat May 25, 2013 8:45 am

View unanswered posts | View active topics


Board index » General » Help / Discussion

All times are UTC




Post new topic Reply to topic  Page 1 of 1
  [ 12 posts ] 
  Print view Previous topic | Next topic 
Author Message
tc200000
PostPosted: Wed Feb 08, 2012 4:29 am 
Offline

Joined: Wed Feb 08, 2012 3:59 am
Posts: 6
Hello!

I've been wrestling with this code for a little bit now. The reason is it creates a weird "artifact" on the image. See this:

Image
Weird Artifact by naters4lad, on Flickr

Notice the red arrows pointing to strange gray lines that are only below the image and extend to approximately 1/5 to 1/4 of the image width. I used the basic code I got from (hat-tip) NinjaCave.com because it does exactly the same thing in their code as it does mine. Also this happens in different images I created, not just this one. It's severely messing-up my sprites and HUD. The image was created in Gimp 2.6.11 on Windows 7 64bits.

Here is the Ninjacave.com code to map the image to the quad to produce this effect:
Code:
         Color.white.bind();
         texture.bind(); // or GL11.glBind(texture.getTextureID());
   
         GL11.glBegin(GL11.GL_QUADS);
            GL11.glTexCoord2f(0,0);GL11.glVertex2f(100,100);
            GL11.glTexCoord2f(1,0);GL11.glVertex2f(100+texture.getTextureWidth(),100);
            GL11.glTexCoord2f(1,1);GL11.glVertex2f(100+texture.getTextureWidth(),100+texture.getTextureHeight());
            GL11.glTexCoord2f(0,1);GL11.glVertex2f(100,100+texture.getTextureHeight());
         GL11.glEnd();


This is the change in the code I made to "get rid" of the lines:
Code:
         Color.white.bind();
         texture.bind(); // or GL11.glBind(texture.getTextureID());
   
         GL11.glBegin(GL11.GL_QUADS);
            GL11.glTexCoord2f(0,0);GL11.glVertex2f(100,100);
            GL11.glTexCoord2f(1,0);GL11.glVertex2f(100+texture.getTextureWidth(),100);
            GL11.glTexCoord2f(1,1);GL11.glVertex2f(100+texture.getTextureWidth(),100+texture.getTextureHeight());
            GL11.glTexCoord2f(0,[b].98f[/b]);GL11.glVertex2f(100,100+texture.getTextureHeight());
         GL11.glEnd();


Now I realize this is only "stretching" the mapping on the bottom-left corner but this was the only way I could get rid of this weird line. Again, I have attempted to use different images created in Gimp with different colors and different image dimensions and shapes. Any idea? Or at least has anyone else had this issue? Any input would be greatly appreciated!

~~ Nate
Top
 Profile  
 
tc200000
PostPosted: Thu Feb 09, 2012 9:27 pm 
Offline

Joined: Wed Feb 08, 2012 3:59 am
Posts: 6
Hello all,

So I'm noticing by the number of views and no replies (aside from this one) that either no one has seen this? I'd like to note my initial post I attempted to bold the .98F on the change I made but it turned out to just put the "bold" tags in the string. Obviously those aren't there in the real code ;)

I was thinking about this the other day and I almost wonder if it's the way Gimp is saving the image? I'm going to try and explore other graphics programs but please feel free to offer input!

</end-of-long-winded-bump>

~~ Nate
Top
 Profile  
 
R.D.
PostPosted: Thu Feb 09, 2012 10:22 pm 
Offline
Game Developer
User avatar

Joined: Thu Mar 03, 2011 6:22 pm
Posts: 534
This is a Slick Forum, what you posted is more a direct problem.

So is it happening if you use the Image class Slick provides?

_________________
Current Projects:
Image Mr. Hat I
Image Vegan Vs. Zombies
Projects:
RadicalFish Engine - Build on top of Slick2D, Ideas, Bugs? Open an Issue ticket!
Top
 Profile  
 
tc200000
PostPosted: Thu Feb 09, 2012 10:32 pm 
Offline

Joined: Wed Feb 08, 2012 3:59 am
Posts: 6
I see your point. I haven't used the image class Slick provides yet :( The reason I haven't tried the Image class is because I'm hung-up on why something so basic doesn't appear to work and thus haven't progressed further. Please feel free to delete this post and if I encounter an issue with the Slick Image class I will re-post.
Top
 Profile  
 
davedes
PostPosted: Thu Feb 09, 2012 10:44 pm 
Offline
Slick Zombie

Joined: Sat Jan 27, 2007 7:10 pm
Posts: 1469
Those tutorials seem a little dated -- also note that TrueTypeFont is being replaced by UnicodeFont. When Slick loads an Image, the resulting OpenGL texture will use the next greatest power-of-two size. So a 550x200 PNG image will result in a 1024x256 OpenGL texture. This means that you shouldn't render the full texture, but rather just the image contained within the texture. (Of course, the better solution would be to use power-of-two textures: 64, 128, 256, 512, 1024, 2048.)

So your image rendering code should look more like this:
Code:
      //image size, e.g. 550x200
      float width = texture.getImageWidth();
      float height = texture.getImageHeight();
      //the physical width of the texture which will be used in glTexCoord (generally a float between 0 and 1)
      float textureWidth = texture.getWidth();
      float textureHeight = texture.getHeight();
      //texture offsets, for texture atlas purposes. leave at 0 for full image
      float textureOffsetX = 0;
      float textureOffsetY = 0;
      //where on screen to draw the image
      float x = 0;
      float y = 0;
      
      Color.white.bind();
      clouds.bind();
      GL11.glBegin(GL11.GL_QUADS);
         GL11.glTexCoord2f(textureOffsetX, textureOffsetY);
         GL11.glVertex2f(x, y);
         GL11.glTexCoord2f(textureOffsetX, textureOffsetY + textureHeight);
         GL11.glVertex2f(x, y + height);
         GL11.glTexCoord2f(textureOffsetX + textureWidth, textureOffsetY
               + textureHeight);
         GL11.glVertex2f(x + width, y + height);
         GL11.glTexCoord2f(textureOffsetX + textureWidth, textureOffsetY);
         GL11.glVertex2f(x + width, y);
      GL11.glEnd();


I'm not sure if the above will fix your problem, though, so please post the image you are using and I'll see if it works on my end.


Last edited by davedes on Wed Mar 28, 2012 6:07 am, edited 1 time in total.

Top
 Profile  
 
tc200000
PostPosted: Thu Feb 09, 2012 10:58 pm 
Offline

Joined: Wed Feb 08, 2012 3:59 am
Posts: 6
@davedes - I will post the image when I get home. I appreciate the help. I'm going to be trying to use a 32x32 sheet for my sprites but this was just a test. A power-of-two's image size made sense to me because I looked at it as: I want an even number of pixels per sprite and they should all be the same shape and size. Since this texture is not an entity or sprite of that nature, the image in question is one 800x50 PNG image I was going to use as a "HUD" background at the top of the screen. Since I am a complete n00b to this I wasn't sure if there were a better way than to bind the raw image to a quad the same shape and size and plop it on the screen.
In my test image up there it's int he center of the screen due to the tutorial placing it there. I do agree, the code does seem dated but some example is better than none ;)
Top
 Profile  
 
liamzebedee
PostPosted: Fri Feb 10, 2012 4:58 am 
Offline
Slick2D Developer

Joined: Thu Mar 31, 2011 5:06 am
Posts: 239
I can confirm that this has happened to me too. My image was PNG, transparent.

_________________
Liam (liamzebedee) Edwards-Playne
Cryptum
Top
 Profile  
 
tc200000
PostPosted: Fri Feb 10, 2012 5:07 am 
Offline

Joined: Wed Feb 08, 2012 3:59 am
Posts: 6
@davedes - Here is the graphic that I was using in my code. I went through with a color sampler just to be sure there was nothing on the Gimp XCF image before exporting it to PNG.

@liamzebedee - Did you ever get your code to function correctly? If so, what did you do?

~~ Nate


Attachments:
File comment: The "Menu" texture.
Menu.png
Menu.png [ 156.68 KiB | Viewed 2228 times ]
Top
 Profile  
 
liamzebedee
PostPosted: Fri Feb 10, 2012 5:57 am 
Offline
Slick2D Developer

Joined: Thu Mar 31, 2011 5:06 am
Posts: 239
I ended up fixing my problem by using different textures. I never realised it, but the textures I used were multiples of 2, so thats probably why.

_________________
Liam (liamzebedee) Edwards-Playne
Cryptum
Top
 Profile  
 
davedes
PostPosted: Fri Feb 10, 2012 8:28 am 
Offline
Slick Zombie

Joined: Sat Jan 27, 2007 7:10 pm
Posts: 1469
Tested your code and the image on my machine and the lines appeared. However, the code I posted will resolve the issue. :)

Some things to consider:
  • If you are loading images with Slick that aren't power-of-two sizes, then you're wasting valuable texture space!
  • If you have empty space in your power-of-two image, you may as well pack other sprites into the image (google the term "texture atlas") -- in the end this will reduce memory (less textures needed) as well as improve rendering performance (less OpenGL texture binds required).
  • If you really want to save texture space, and don't mind writing more code, you could reduce your menu image to the following 11x8 sprite. Again, the "texture atlas" technique would be applied; the corners would be rendered and rotated in place; then the top, left, bottom and right borders would be stretched and rotated accordingly, and then the center space would be filled in with the appropriate color. Same result, but you are storing a LOT less pixels into memory.
    Image


Careful texture management can dramatically reduce image loading time, distribution filesize, memory usage, and rendering performance, so it's something every game programmer should be weary of. To put it in perspective: an 800x50 RGBA image requires 160,000 bytes, whereas an 11x8 image requires only 352 bytes.
Top
 Profile  
 
tc200000
PostPosted: Fri Feb 10, 2012 5:05 pm 
Offline

Joined: Wed Feb 08, 2012 3:59 am
Posts: 6
liamzebedee - It makes perfect sense to me now. I think I'm going to experiment and see how I can fix this utilizing my crappy code just to try and get it working for proof-of-concept :wink:

davedes - Thank you for the detailed write-up! I've found a couple articles on efficient texture sheets and even the reasons and concepts behind why it's "best practices" are what they are. At this stage of my game I want to "get it working" and then I'll go back and revise the code but I think I've already spotted some methods I'll be re-working this weekend.

Cheers! :D

~~ Nate
Top
 Profile  
 
MatthiasM
PostPosted: Fri Feb 10, 2012 5:52 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1173
The approach explained by davedes is sometimes also called 9-split because you assemble an image from 9 parts.

TWL directly supports this and other grid based assembling for any UI image.

_________________
TWL - The Themable Widget Library
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 12 posts ] 

Board index » General » Help / Discussion

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