A problem with jaggies on an imported static sprite.

#1 Well, when you create a PNG, it has an alpha mask. The mask will tell it how opaque each pixel is. The pixels on the edge are 1/2 opaque use the color referred to as the "Matte" color.

When you export as a PNG, either make it a useful matte color (black, if your project has a mostly dark background) or make the alpha channel all binary (black and white - no greys).

A simple solution for the "mine" you have above is to open it in photoshop, set your magic wand to 0 tolerance, magic wand the background and grow the selection by 1 px, then press delete. his should remove and jaggies. If you still want a black border, add it using a layer style.

You might be having trouble seeing the jaggies in photoshop; try setting the background color to black to reveal the transparent white pixels.

It's a pain, but sometimes you need to go in manually and clear out jaggies.

-Dan

#2 I don't know if this helps, but I always set the anti aliasing to off. If it is on it feathers your selections when you fill, or paint them. What I mean by feathering is that it makes the blend on the outside edges of your selctions feather into the other color, a very small gradient. On sprites this makes a real mess of things when your copying and pasting them into new files. A seemingly clean image will be pasted into another program and all of the sudden you have a halo effect around your sprites or a ring around the border.

#3 Okay, I think I made some progress.

Nothing was working until I started from a higher resolution source file: 5"x5" @ 300dpi. Then I merged visible, threw away the hidden background layer, used the magic wand with tolerance set to 0, contiguous checked, anti-alias unchecked. I selected the background, expanded by 1 pixel, deleted, scaled down to 5" x 5" @ 72 dpi, saved for web, PNG-24 format with transparency selected.

Imported it into TGB. In the Image Builder I have the Image Mode set to Full, the Filter Mode first to Off then to Smooth with no noticeable results to jaggies, so left on Smooth, Filter Pad off, Prefer Speed on, Preload on, and Allow Unload off. Not sure what all those mean yet, but there they are.

The only place where there are any jaggies now are a little on the top and bottom, or left and right tips, depending on how they've been scaled.

Still having a problem with the odd line on one side of the frame, but it seems to go away if I scale the image down... still not sure what's causing that.

Thank you both very much for the help! I'll be sure to come back if it all goes pear shaped on my next attempt.

#4 Sounds great Collin, keep up the good work. That line your mentioning is either there from where your exporting it from or where you landing it to. I suspect the line is there on your photoshop file. I would make a tight selection (at your current progress) and make another file entirely smaller than before, then check to see if this new image still has the line. If it does it might be there in the animation stage in TGB.
You'll have to tell me, I dont know. Don't rely on the scaling the image down, attack the problem at its source. Go Collin, go!

PS: take your tight selction and press Ctrl+Shift+I or Inverse your selection. Then eyedropper your background color and take the pencil tool to the edges where these fuzzies are surviving, leave none alive. Tell me if that helps.

#5 Justin -

The line is an odd thing. In Photoshop I've both expanded my canvas size, and cropped closer in on my artwork, and it still appears in both the stage and the running game. You can see it in the top picture I posted on the right side and below the mine image. If, in the stage, I don't have the mine selected, but hover over it, the bounding box for the placed image appears and the line is a hair width outside that bounding box.

The way that I've been placing the artwork is by modifying the "resourceDatabase.cs" file in the fishArt folder to automatically load it. I suppose it's possible I'm doing something wrong there. Here's the code I added:

// ------------------------------
// Mine art
   new t2dImageMapDatablock(mineImageMap) {
      imageName = "./fish/mine";
      imageMode = "FULL";
      frameCount = "-1";
      filterMode = "SMOOTH";
      filterPad = "0";
      preferPerf = "1";
      cellRowOrder = "1";
      cellOffsetX = "0";
      cellOffsetY = "0";
      cellStrideX = "0";
      cellStrideY = "0";
      cellCountX = "-1";
      cellCountY = "-1";
      cellWidth = "0";
      cellHeight = "0";
      preload = "1";
      allowUnload = "0";
   };

I based it off of other "FULL" images in the file like the background image. I don't actually know of another way to import artwork yet. I'd read in an earlier tutorial that you can drag and drop images on the open project to add them, however every time I tried that it didn't work.

-----
EDIT: Okay, I added the mine.png by way of the "Create New Image Map" button in the Create tab (durr...) and when I dragged it to the stage there was no line, no matter how I scaled the image. So it must have something to do with the way I added it through the "resourceDatabase.cs". I still need to find out why though, because one of my goals is to make image packs available to other game makers, and if I don't have that working right it'll be pretty unprofessional. So any advice is welcome.
-----

Also, re: your P.S., the way that I work in Photoshop is on layers with the background turned off. In the near final step, I merge visible, so the background is still off. With the mine, it was made out of vector shapes with gradients added above and grouped to the shape. I'm guessing that's where the jaggies are working in. So, what I'm saying is I don't really have a background color.

If you would like to have a look at the files yourself, you can download both the .PNG and the .PSD here: www.collinburtondesign.com/Shared/

And thanks again for your help.

#6 I'm having this same problem and can't get it figured out. The lines appear to be showing up right outside the image.

#7 Ok guys, i got your solution... sorry this post is a little late, I have been busy and unable to regularly check the forums...

So the lines around a sprite are caused by smoothing the border around a sprite... There is this thing prevents the smoothing issue called:

filterPad = "0"; This is your problem... this should at least be 1 for a quick fix...

Now a full explanation. Here we go =P

TGB automatically cuts up your sprites and reorders them when putting your sprite into memory. Now, when it cuts up your sprites and makes it's own sprite sheet it fills all the space in the squared image it creates with white. What this means is it could potentially cut up your 256x163 image into 512x512, and then fill the blank space with white. Now if you care about the memory being taken up by images, THIS IS VERY IMPORTANT. If your running on a PC, not so important...

Now, the reason your getting the white line around the sides of an image is because "smoothing" is smoothing the edge of your transparent sprite with that white fill i mentioned earlier... This creates a weird flashing line on the side of the sprites. Some times the line only appears on some of the images in a sprite because only some of the images are bordered on the white fill TGB does...

By adding a "pad" TGB will add the amount of pixels you specify with filterpad="2". Now this means that TGB will cut up your sprite and add a padding around each sprite. This padding is a duplication of your bordering pixels.(Keep in mind, this means if you have a sprite on a 512x512 it will increase the images size because each frame within that image will get a 2pixel border on each side of it, which means a 512x512 may become larger, hence taking up more memory).

This padding that it adds, will cause the border pixels of each sprite to smooth with the pad pixels instead of the white fill, which will fix your line problem...

Hope this helps, if you have any other questions about TBG feel free to ask, I had the same issues.

edit: The line issue has nothing to do with how your make your sprites, so don't worry about photoshop, it's all in TGB...

#8 @Jeremy: Awesome and thanks! What your saying makes sense as I'm reading it. I'll see if it still does when I try to apply it.

I don't see where to set an amount for the filter pad inside TGB, just a check button in the image builder to turn it on or off. I can see where I added my custom art in the resourceDatabase.cs file the spot where filterPad = "0", and I've changed it to = "2". However looking at the other resources in the document, I see them set to = "0" as well, and they don't have lines around them:

// Angelfish 1
   new t2dImageMapDatablock(angelfish1sheetImageMap) {
      canSaveDynamicFields = "1";
      imageName = "./fish/fish/angelfish1sheet";
      imageMode = "CELL";
      frameCount = "-1";
      filterMode = "SMOOTH";
      filterPad = "0";
      preferPerf = "0";
      cellRowOrder = "1";
      cellOffsetX = "0";
      cellOffsetY = "0";
      cellStrideX = "0";
      cellStrideY = "0";
      cellCountX = "-1";
      cellCountY = "-1";
      cellWidth = "256";
      cellHeight = "256";
      preload = "1";
      allowUnload = "0";
   };

Why is that?

Here's the code I added to the .cs file:

// Mine art
   new t2dImageMapDatablock(mineImageMap) {
      imageName = "./fish/mine";
      imageMode = "FULL";
      frameCount = "-1";
      filterMode = "SMOOTH";
      filterPad = "2";
      preferPerf = "1";
      cellRowOrder = "1";
      cellOffsetX = "0";
      cellOffsetY = "0";
      cellStrideX = "0";
      cellStrideY = "0";
      cellCountX = "-1";
      cellCountY = "-1";
      cellWidth = "0";
      cellHeight = "0";
      preload = "1";
      allowUnload = "0";
   };

#9 There image may have had smoothing off, or when TGB cut up their image it was exactly the right size, so that no white fill was added... which is another way of stopping the white border flicker... If i remember correctly, every TBG example always had padding on, but i could be wrong.

for instance: if you have a 64x64 cell size and you have 4 or 16 sprites in your sheet. This sprite woulnd't need padding. Because when TGB cuts up the image, it will not need to use the white fill because the image it will create will be a power of two.

The image that TGB loads into memory for sprite sheets are always power of two, though i think they don't have to be square... im not sure on that one... so it could be 64x1024... i think

Unfortunately it can be unpredictable how TGB will cut it up. with my previous example TGB would probably create a 64x256 image, with 4 cells in it. Because it would most likely stack them vertically.

Did making the padding value 2 fix your problem?

#10 It seems to have. I'll let you know more when I have time to really test it. How would this work for a file that I add through the "create a new ImageMap" inside the program, rather than by loading it with a resourceDatabase.cs since you can't set a value for the filterPad?

#11 from what i remember, it has been awhile, it defaults to a value of 1 or 2 when you turn it on... if not i guess you have to go in your cs file and change the filterpad value manually everytime you have a sprite with a flicker problem... if it doesn't have any problems around the border, don't bother with the padding.

i know it's kind of annoying, i had the same problem on my last TGB project.

The way i ended up fixing it was resizing the images with an empty border to the closest power of two. so if you sprite is 54 pixels by 43 pixels, just add a transparent border around every sprite, until each one is 64x64... But you also have to make sure the sprite has 4 or 16 cells... So this doesn't work well for certain situations. No padding is neccessary for this, and it wont ever have the white flicker...

But again, this doesn't really work if you already have a sprite thats 78x142 and 7 frames of animation...

I couldn't find any other way around the padding. But if you do, let me know...

#12 I have been hammering away on my background images for my game and I have been running into this same problem. I assumed the advice I gave to Collin earlier would have solved it but my method I mentioned didn't work either, my bad Collin.
I have been creating a set of layering background images, similar to the fish tutorial but much wider for scrolling purposes. One of these images is a PNG file at 7050x480 dimension. I was getting the halo around this image and I couldn't figure out how to destroy it. Because of the oblong shape it was I new from what Jeremy mentioned that I was going to have to fight that white background TGB imputs around the image. I eventually changed my code in the resource database file to this...

new t2dImageMapDatablock(GroundImageMap) {
canSaveDynamicFields = "1";
imageName = "./Images/Ground";
imageMode = "FULL";
frameCount = "-1";
filterMode = "NONE";
filterPad = "2";
preferPerf = "0";
cellRowOrder = "1";
cellOffsetX = "0";
cellOffsetY = "0";
cellStrideX = "0";
cellStrideY = "0";
cellCountX = "-1";
cellCountY = "-1";
cellWidth = "0";
cellHeight = "0";
preload = "1";
allowUnload = "0";
};

With the filter mode to none it gave me a very hard edge, but becasue the image is so big I barely even notice it, getting exactly what I wanted. No more white halo. I know this isn't exactly pertinent to the sprites but just FYI should you encounter the same problem on something this big such as a background.

P.S: I applaud Jeremy on his input, its nice to know this problem isn't occuring in photoshop, I was banging my head against the wall for a couple hours because I didn't realize this.

#13 Yea, definately always turn the filter mode to NONE. Works for me on most everything.