jagged outline on image

[Reanimated]

Ive created my images and want to import them into blitz. Theyre PNG files, so theyre small. However, Im now having a problem on masking. When I mask it, the character has an outline around him due to the background being a slightly different shade, so it doesnt get masked. Is there some way I can mask the everything but the image? My only idea is to have the background as a colour similar to black (because thats the colour of the character). However, when I mask this, the character still has jagged edges. Any ideas?
Thanks

[luggage]

Can you post an example of your problem? I'm finding it hard to visualise.

Scott

[Reanimated]

Sorry for not making it clearer, but heres a screenshot.
OUTLINE IMAGE
As you can see, theres an annoying pink outline, and I dont know how to get rid of it.

[Jim Buck]

What is your "bluescreen" color"? I assume it's red and your anti-aliasing the image to the background? (I'm not sure how it can be pink, though.) You either have to not anti-alias.. or anti-alias to a different background color and then later go in and put in the "bluescreen" color.

[Reanimated]

What do you mean by the "blue screen" colour? What I do with my images is draw them onto a weird colour (something I wouldnt normally use in my game). This way, when I load it in, I can mask the weird colour so it becomes transparent. However, in this case, I first drew each frame (this character is animated), onto transparent layers. I then used the "magic wand" tool to select everything, but for some reason, a slight outline was also selected. I decided to brush over the outline, but then the edges look even more jagged than before. Ive got photoshop CS (trial) and full version of PSP, and Ive tried blurring and everything, but cant seem to make it less jagged.

[Nemesis]

Perhaps you have anti-aliasing or tolerance values set for the selection tool?
Make sure that anti-aliasing is off and tolerance is zero. That obviously only applies to the colour component of the image.. the alpha mask should be anti-aliased of course.

[Reanimated]

I found a tutorial on the net and it seemed to get rid of the outline. Although it looks jagged when placed on a whit background, when I put it in my game, it seemless, so problem solved I guess . If I want it to be perfect, Ill have to start the whole thing again, but I probably wont.

[Jim Buck]

By "blue screen", I was referring to the movie-making technique of filming someone on a blue (or green) background.. so that that color is masked out and the person is composited onto some other background.

When making PS1 games, our "blue screen" color was also red, and we also had the problem that you described until the artists turned off the anti-aliasing when compositing their sprite onto the red background. But it looks like you solved it anyway.

[Night Elf]

Color keys, like you use, are very limited and produce the kind of results you've got so far: horrible outlines or jagged edges. To get sprites with a smooth outline you should use alpha blending. I've never used PTK, so I don't know if it's capable of doing alpha blending, but if it is, I think the right way to do what you want is the following:

- Get your images, the ones you drew on a transparent background.

- Generate a selection of the opaque and semi-opaque areas (Ctrl + Click on the layers palette in Photoshop.)

- Use that selection to make an alpha channel for you image. (In Photoshop, you'd go to the channels palette, add a new channel, select white as foreground color, and press Alt + Backspace.) This step should get you a white silhouette of your drawing that doesn't have hard, jagged edges, but smooth ones. When you blit your sprite in your game, the grey pixels of the alpha channel will make your sprite outline blend with the background.

- Export the image using an alpha-channel compliant format like TGA or PNG.

From there, you're on your own (or someone else can tell you how to continue) as I don't know how you would use the image in PTK or, as I said, if PTK supports blitting alphablended sprites (but as everyone says it's great, I'm sure it does.)

[Reanimated]

Thanks Night Elf. Im not quite sure what PTK is, (im using blitz), but Ive tried your method and this is what I got:
HERE
Thats very smooth, thanks. Ill see if I can somehow bring that into blitz. What do you generally do to smooth it out from within the program? Do you load this version, and the textured version and place the texture one over this one?
Thanks again for the help

[Night Elf]

Thanks Night Elf. Im not quite sure what PTK is, (im using blitz)

Sorry, I misread your post. PTK is another engine. However, I've never used Blitz either, so you can read Blitz where I wrote PTK...

Thats very smooth, thanks. Ill see if I can somehow bring that into blitz. What do you generally do to smooth it out from within the program? Do you load this version, and the textured version and place the texture one over this one?
Thanks again for the help

Well, I'm using Direct3D, so I'm not sure how you should do it. Direct3D can work with the 32 bit image (24 bit color and 8 bit alpha) and, setting the appropriate render states, I can get it to use the alpha value of each pixel as a transparency value where 255 (white) is opaque, 0 (black) is fully transparent and all values in the interval [1, 254] are different degrees of transparency.

[Aldacron]

I found a tutorial on the net and it seemed to get rid of the outline. Although it looks jagged when placed on a whit background, when I put it in my game, it seemless, so problem solved I guess . If I want it to be perfect, Ill have to start the whole thing again, but I probably wont.

A little background on what is happening (in case you don't already know - if you do then just ignore me ). When you create the image in your image editing softwarte (Photoshop, Paint Shop Pro, Gimp, or whatever) with anti-aliasing on, the character's edge pixels get blended with the background. This results in a row or two of pixels that are a combination of the back ground color and the neighboring edge pixel. The outline shows up in the game because the row of blended pixels do not match the color key exactly. On cards which support a range of color keys you could cover various shades of your background color and eliminate the outline. But that is imperfect because some of the ouline colors might still fall outside of your color key range, and not all cards support color key ranges (if anystill do at all).

When you fixed the outline by creating the image with anti-aliasing turned off, you wound up with an aliased image. Because of the nature of pixels (physically on your monitor), the only straight lines are those which are perfectly vertical or horizontal. Add any sort of slope and you will get aliasing (jaggies). In an image with dark colored edges, this will be visible on light colored backgrounds.

Using alpha blending gives you the best of both worlds - an anti-aliased image as you originally saw it in Photoshop, and the transparent background.

[ragtag]

Which version of Blitz are you using? +, 2D or 3D.

There are some routines available at blitzcoder.com and blitzbasic.com for anti-aliasing and blending images, but Blitz is not very fast at this. It might work fine if it's only for a small portion of the screen. See the writePixelFast/readPixelFast commands.

If you're using Blitz3D, you have the option of using some of the sprite libraries available. These use DirectX to draw the sprites and support alpha channels (scaling, rotation and other cool stuff too). nSprite is one such library ( see http://www.nuloen.com/nsprite.html ).

If all else fails, you can wait till Mark gets BlitzMax out. It will include 2D in 3D functions (like nSprite), but using OpenGL.

Cheers,

Ragnar


p.s. The ragtag now returns to lurking mode. :-)

[Reanimated]

Hi Ragtag. Ive got both blitz3d (latest) and b+. Im using the 2D side because I want it to work on as many computers as possible. Am I right in thinking that 3d acceleration is required to get alpha working in B3d?
Aldacron, thanks for the info. If I have the image on a transparent layer, is it possible for me to copy the selection and paste on a coloured background, but with antialiasing off? If so, I could just do that and not worry about any jaggidness.


Im using Photoshop CS (trial) and managed to get the alpha thing (see screenshot few posts above). However, when I try to save it as a PNG file, I keep getting "File must be saved as a copy with this selection", which means that I cannot retain the alpha channel info. So, I goto selections.....save selections, but then what type of alpha 1 channel do I add? {replaces, subtract, add, intersect}
Thanks

[Night Elf]

Im using Photoshop CS (trial) and managed to get the alpha thing (see screenshot few posts above). However, when I try to save it as a PNG file, I keep getting "File must be saved as a copy with this selection", which means that I cannot retain the alpha channel info. So, I goto selections.....save selections, but then what type of alpha 1 channel do I add? {replaces, subtract, add, intersect}
Thanks

This seems to be a weird behaviour of Photoshop... It won't let you save a PNG with an alpha channel. But, instead, it'll use the image transparency.

This way it's even easier: If your image already has transparencies, your PNG file will have an alpha channel in it. You don't need to do all the alpha channel creation steps.

[ragtag]

Reanimated: Doing it in Blitz3D will require a 3D card and DirectX 7 support. You would basically be creating polygons and applying the image as a texture to those. I don't have Blitz+, but it is supposedly faster at doing this kind of thing than Blitz2D (or Blitz3D in 2D modus). There is some sample code called drawImageAlpha over at blitzcoder.com , don't know if it's for Blitz+ or 2D, but it might be worth a shot.

Cheers,

Ragnar