I'm trying to create a hand-drawn HUD using photoshop. I don't expect it to be the best thing ever, just an improvement from the current rectfill routines I'm using.

The first problem I'm running into is avoiding the pink-halo due to anti-aliasing. I can do the easy way of taking out the anti-aliasing (floodfill magic pink with anti-aliasing turned off with a high enough tolerance), but I wanted to see what I would have to do to keep the smooth edges. Would I have to use OpenLayer or some other kind of library?

There are two addon libraries for PNG, alpng or loadpng. alpng is a standalone library, while loadpng requires libpng. However, loadpng is faster, and uspports more pNG features, so is probably the better choice.

Allegro's built-in blending functions do have an alpha mode, so all you need to do is get your HUD images loaded with alpha channels that have the anti-aliased edges.

The trick is getting the alpha channel loaded up. There's commands you can use at design time to handle loading alpha channels manually, including drawing directly to them, or, while using the Grabber, you can grab your default graphics from files then grab alpha channels from other files. I've never actually done any of this before so I can't instruct you how, I just know the options to do so are there.

PNG files are obviously simpler for doing 32-bit graphics, since every other format Allegro can handle by default can't go above 24-bit.

Alpha channel blending is not very fast though using straight Allegro, so yeah, if you want to keep the edges nice and smooth with zero aliasing you're better off going with hardware acceleration through OpenLayer, OpenGL, or whatever else you feel most comfortable with to keep that framerate nice and high.

You don't have to use any fancy libraries if you don't want to. Allegro can load TGA files natively and they also include alpha channel support.

I have absolutely no idea how to do it with Photoshop (I'm sure there is a way though), but here's how to do it in Allegro faily easily (untested):

void add_alpha(BITMAP *bmp, int alpha) {
    
    int x, y, colour;
    
    for (y = 0; y < bmp->h; y++) {
        
        for (x = 0; x < bmp->w; x++) {
            
            colour = getpixel(bmp, x, y);
            putpixel(bmp, x, y, makeacol(getr(colour), getg(colour), getb(colour), alpha));
            
        }
        
    }
    
}

You can then save the BITMAP as a .tga, and it will preserve the alpha channel.

Just tried it in Photoshop 7... It didn't work for me either... It seems that photoshop isn't saving the alpha channel no matter what I do... I've done it before, but can't remember how...

I think you'll have to save the alpha channel separately and use some other program or utility to combine them...

Your problem is twofold:

1) Your image has a 100% alpha value, so there will be no transparency.

2) blit is not affected by the drawing mode, for that, you need draw_trans_sprite()

edit: beaten

edit 2: I used the code snippet I posted above to set it to 50% transparency, and this is the result:

{"name":"598476","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/c\/1c2f26ecbc5fa2ac96488bbd7cb42c0c.png","w":640,"h":480,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/c\/1c2f26ecbc5fa2ac96488bbd7cb42c0c"}

It was pointed out later in that thread that it wouldn't work with blit.

I've attached a command line program that will take an Allegro supported bitmap file, add an alpha channel and save it as a 32bit TGA. Use it like this: set_alpha ship.bmp ship.tga 128.

I'm using photoshop elements 3.0, which apparently doesn't allow me to look at channels. Apparently, I can make an adjustment layer, but I think that's just saying black = don't draw, white = do. It gets rid of the pink due to blending edges (I can also just use transparent pixels), but I don't think it necessarily makes smooth edges.

That is, I got the above method to work once. When I tried it again on a part of the actual HUD I was creating it didn't work. Now, I can't get it to work at all.

BUMP for edit below...
==============================

I finally figured out what I had to do in photoshop elements. Like I said above, I did it right once and then the same method wasn't working. Turns out I forgot one step that was more important than I realized.

Process for Photoshop Elements
1) Create image over transparent pixels
2) Control-click thumbnail image in layer to get non-transparent pixels
3) Go to Select -> Save Selection (this is a key step that I was missing)
4) Go to Layer -> New Adjustment Layer -> Brightness / Contrast (click ok and don't make any changes)
5) Save file as TGA
6) No more pink halo!

So now I can finally start working on the HUD graphics. Here's one thing I've created thus far:

{"name":"598485","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/e\/5e3f2bf760897be49c4ad1bfa7eb95b8.png","w":645,"h":512,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/e\/5e3f2bf760897be49c4ad1bfa7eb95b8"}

Compared to some screenshots from earlier versions:

<edit>
{"name":"598526","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/b\/e\/be1f4f8ddd463f5818bc4c77a7a4e610.png","w":265,"h":225,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/b\/e\/be1f4f8ddd463f5818bc4c77a7a4e610"}
Thoughts on this design? The circular buttons will have icons in them that represent a menu choice (save/load, party info, news, etc.). The brighter button would be what it looks like when the mouse is over it. The leg sticking out below the bottom circle will extend to a different part of the HUD. I hoping to be able to extend/shrink it at this point by the user.

The user can scale it?

I'm not sure I understand this either. Can someone provide an example?

Alright, I'm working on the icons, which are proving to be a challenge. Opinions on the following styles?

Style 1: Original

Style 2: Neon Icon

Style 3: Earthen Style
{"name":"598593","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/0\/7\/076fa0e002f8d43fdfe6679d30133a7e.png","w":244,"h":211,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/0\/7\/076fa0e002f8d43fdfe6679d30133a7e"}

What the icons mean from left to right: Save/Load, News, Party screen, Empire screen, Enemy screen

By "the rest of the graphics," you mean the actual game world and stuff, yes? I'm not terribly concerned with this, because the game world has some graphical updates to come. Not to mention, some of the game world graphics could be wildly different (say if I were to draw a map on paper and then scan it). I do understand what you are saying though.

My only concern is they pop out too much and contrast with the rest of the HUD. I've started to like the 3rd style (although, I spent the most time on the second style).