How Do I Make Decent Non Aa Tile Bitmaps In Gimp?

[purplepup]

ok, I know what the problem is, and basically what I need to do, but I just need a graphics whiz to point me in the right direction. It's a problem with my new updated graphics for Reword (see original in Sig link).

I've just about finished reworking the code to handle the Pandora's bigger screen (and it will now allow easier porting to Wiz etc), but my new round letter tiles are showing up very scruffy around the edges.
Basically, I'm using the transparency colour (pink 0xFF00FF) around the shape method rather than using a full alpha transparency tile as I'm sure there's no real need for it and it's far slower (not that the Pan would notice - ha, ha).

The problem is where the AA'd edge of the circle blends into the transparency colour, and of course leaves artifacts around the edge that aren't the full transparency colour but are 'half' pink AA values! These don't get removed and show up as scruffy pixels.

In GIMP, I just cant seem to get a decent non-AA edge around my images. I'm sure I read somewhere that GIMP always AA's. Do I have to painstakingly edge each one until it looks right, or is there a fast way to do it?

I usually do the initial images in Inkscape and that has a similar problem when exporting to bitmap.

Any suggestions or help appreciated
Thanks
Al

 

[mcobit]

I don't know much about this stuff, but maybe you could make pngs with proper transparency?

Edit: Sorry didn't read you don't want to do that...

Well another thing you could do is to open the pictures in Paint or something and paint the half-transparent edges with the transparent colour.

 

[surt]

Gimp has two painting tools: the paintbrush, which gives softly blended edges; and the pencil which gives hard edges. Painting with the pencil would be the most straightforward option.

Alternatively to could paint with the paintbrush tool but constrain it to a hard-edged selection or mask.

Yet another solution is to do as you currently are and when finished move around the silhouette of the sprite selecting any pink-tainted pixels with the select by colour tool then delete them.

 

[kagato]

It depends how you're producing your new images as to how to fix the antialiasing issue in Gimp.

If you're drawing them from scratch, you could use the pencil instead of the paintbrush as suggested, or turn off Antialiasing / turn on Hard Edges in the options for whatever tool you're using.

If you've already got a nice smooth shape on a layer above your background colour, you can use Layer -> Transparency -> Threshold Alpha.

If you're scaling up existing graphics and that's creating a feathered edge, in the Scale Image dialog set Interpolation to "None". (However, I'd advise against scaling up sprites on principle.)

 

[purplepup]

Yep, I am currently using the pencil (with hard edge) to tidy up the edges manually. I rarely use the paintbrush as I find I can't control it that well. However I'm still having some issues getting rid of the tainted pixels. I'm wondering if when I save the xcf as png and it merges the layers, it puts some AA back in there? dunno, I'll have to experiment more.

I didn't realize (or notice) that the hard edge option worked in tools other than the pencil! I'll try that, and maybe the threshold alpha thing.

I'm not scaling anything as I use Inkscape to do that and export it in the correct size before I finish it off in GIMP.

Thanks guys.

 

[qwerty15]

What I do to get rid of antialiasing in Gimp as a quick fix is to simply raise the contrast to max and then refill what was supposed to be transparent (without again re-adding antialiasing of course ).

 

[Zoxc]

This kind of games looks much better with alpha values, since it's mostly round objects and characters?

It looks like your game doesn't need high FPS either.

 

[purplepup]

No you're right Zoxc, and I might even try proper transparent sprites for Reword, but this will come up again, especially in my next game where bullets and stuff will be flying around, so I'd like to find out if theres an easier way to do this sort of thing.

qwerty, I tried setting the contrast, but it just washes out everything then I can't get it back to how it was. So I assume you mean on the single colour pink background layer rather than the combined image.

Kagato, I notice the selection tool has a antialias option and this has helped a little. I tried outlining the shape, shrinking and trying a blend fill. Not too bad, but so far it looks like the only real way is the slow, manual way.

Thanks anyway, you'll see the results soon.

 

[JayFoxRox]

Maybe you load these image with some linear filter which mixes the pixel colors at the edges.

 

[kagato]

I'm still not sure how you've ended up at a point where it's causing you a problem, unless you flattened some layers at some point and lost your transparency data. Can you post an example XCF so I can see what's going on? Then I could give you specific information.

 

[qwerty15]

QUOTE
qwerty, I tried setting the contrast, but it just washes out everything then I can't get it back to how it was. So I assume you mean on the single colour pink background layer rather than the combined image.


What I mean was that if you have a b/w image, raising the contrast removes AA. Here is an example:



Adjusting brightness and contrast can remove AA:

 

[VRAndy]

Here's what you do. Click on "Colors/Levels". Set the channel dropdown to "Alpha". Now you can adjust the levels of the alpha channel. (Make sure the "preview" box is ticked.) For what you want to do you can simply set the black point and the white point of the histogram to the same value. (Start at 128ish, and experiment with other values until it cuts the transparency mask as tight as you like. ) Then just hit OK.


You can also edit your selection with a pencil so that you don't run into these troubles as often. There's tiny square button in the lower left of your Gimp working window that puts you into mask editing mode.

This lets you edit the selection as though it were a bitmap. Use the pencil tool (Or whatever) to edit that, then you don't have to worry about how soft-edged anything else is, because you'll only draw in your selection. (You can even adjust the contrast/levels on it!)

You didn't really make it clear (to me) what operations you were performing that introduced the soft edges, so perhaps this is off the mark.

 

[Xmas]

No you're right Zoxc, and I might even try proper transparent sprites for Reword, but this will come up again, especially in my next game where bullets and stuff will be flying around, so I'd like to find out if theres an easier way to do this sort of thing.

And what prevents you from using proper alpha blending for that next game, too? You'd need a lot of blended sprites to run into performance problems on Pandora.

To be honest, the first things that struck me when looking at the screenshots in your sig link were the fuzzy, hard-to-read fonts and the aliased edges. Antialiasing makes things look so much cleaner!

 

[purplepup]

Wow, I just looked at that screenshot again and it's horrible isn't it!

It doesn't actually look that bad on the GP2X, but not far off. Maybe it was the size/scale reduction (ImageMagick) I used. The fonts are rendered using the SDL TTF library, so should look fairly decent, and I know they suck a fair amount of rendering power. So trying to use non-AA sprites for the letters seems a bit silly really. Maybe I should just go down the alpha blended sprite road anyway, at least until I start hitting performance issues on the destination platform.

Thanks for the additional GIMP tips too, I am fairly competent with basic bitmap editing and get something reasonable in the end, but it just seems to take me ages and although I do use things like the selection tool to localize my edits etc, I haven't got into masks or anything yet. So thanks again. I have a few more things to try out now.

I'll try and work on the stuff in the next day or two (time permitting) and post some results.

P.S I tried the contrast thing and it works quite well, on single colour layers

 

[purplepup]

Ok, I decided to try out the full transparency thing, rather than the pink colour key type blit, and changed the code a little to cope with alpha chanels better and redid some images with full alpha transparency.
Loaded them up to test, and got mixed results.

One image, the rotating animated star on menu items now looks good with edge transparency working fine.

The other (two) are the letter roundels and a test set of letters I did.
The letter roundels look ok, but still have a sharp edge to them, even though the png has full alpha chanel transparency (as denoted in GIMP by looking at the Layer->Transparency menu and being able to remove it).
The test letters (just hand painted letters on a transparent background) show with a pink edge to them as if the faded edge pixels are completely replaced with the colour key.

[ Damn, I can't get photobucket links to show up either ]

I have no idea if thats not enough or too much info, but hey.

Any ideas?

P.S the surface init code looks like :

CODE

bool Surface::initSurface(SDL_Surface *newSurface, int iAlpha /* = -1 */)
{
if( newSurface != NULL )
{
//Create an optimized image
if (newSurface->format->Amask)
_surface = SDL_DisplayFormatAlpha( newSurface );
else
_surface = SDL_DisplayFormat( newSurface );
//Free the old image
SDL_FreeSurface( newSurface );

//set the transparent pixel
Uint32 key = SDL_MapRGB(_surface->format, 255,0,255); //putrid purple
SDL_SetColorKey(_surface, SDL_SRCCOLORKEY, key);
if (iAlpha >= 0) //-1 = no transparency
SDL_SetAlpha(_surface, SDL_SRCALPHA, iAlpha); //0=transparent, 255 = full opacity
return true;
}
return false;
}