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?

Isn't there an addon library for Allegro that allows you to load PNG's? alpng?

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.

Ah yes, loadpng is the name of the library. I used that for some time, but it gets slow if you draw a lot of PNG graphics onto the screen. Shouldn't happen if you only draw some sprites this way.

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.

Or you can do what I just did to create a PAM file with alpha channel data for testing, and write a routine to insert the alpha data into the main data stream. Though, I imagine that would be much harder to do with a PNG file than with a PAM file.

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.

It sounds like the "alpha channel" is native to the file type. Is there anything I need to do on the photoshop side to have the alpha channel or do I simply make it a TGA or PNG file?

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.

Code:

        set_color_conversion(COLORCONV_NONE);
  BITMAP *bTest = load_bitmap("./data/images/test.tga", NULL);
  set_color_conversion(COLORCONV_TOTAL);
  
  drawing_mode(DRAW_MODE_TRANS, NULL, 0, 0);
  set_alpha_blender();  
  blit(bTest, buffer, 0,0,0,0,bTest->w, bTest->h);
  solid_mode();

  draw_sprite(screen, buffer, 0, 0);

Code Source

output:
{"name":"598475","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/f\/c\/fc2acb4ae0d667f6b287398cc614fc3d.png","w":645,"h":512,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/f\/c\/fc2acb4ae0d667f6b287398cc614fc3d"}

I did something wrong somewhere... Original image attached.

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...

  set_color_conversion(COLORCONV_NONE);
  BITMAP *bTest = load_bitmap("./data/images/test.tga", NULL);
  set_color_conversion(COLORCONV_TOTAL);
  
  drawing_mode(DRAW_MODE_TRANS, NULL, 0, 0);
  set_alpha_blender();  
  blit(bTest, buffer, 0,0,0,0,bTest->w, bTest->h);
  solid_mode();

  draw_sprite(screen, buffer, 0, 0);

Yeah, that's wrong. A blit is a blit is a blit, no matter the drawing mode.

Correct^[1] code:

  set_color_conversion(COLORCONV_NONE);
  BITMAP *bTest = load_bitmap("./data/images/test.tga", NULL);
  set_color_conversion(COLORCONV_TOTAL);
  
  set_alpha_blender();  
  draw_trans_sprite(buffer, bTest, 0, 0);

  blit(screen, buffer, 0, 0, 0, 0, buffer->w, buffer->h);

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"}

Same result with draw_trans_sprite. I used blit because of the "code source" link. I was using draw_trans_sprite at first.

Any idea how to fix that? You mentioned you don't know how to in photoshop, so if someone knows how to in photoshop, feel free to chime in.

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.

First of all, the photoshop image needs to use transparent pixels instead of magic pink. Transparent pixels in photoshop translate to an alpha value of 0 in allegro. The smooth edges come from semi-transparent pixels, with alpha values somewhere between 0 and full. You get these automatically if you draw everything much larger than you need (say 4x the intended size) and then resize using a smooth scaling algorithm. You also need to save to TGA or PNG using 32-bit color: all other color depths have either one-bit alpha, or no alpha at all.
In allegro, use what gnolam posted. It should work.

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.

IIRC, here's how you do it:
- Create a new image. You now have one layer called "background", filled with a solid color.
- Add a new layer. This should be completely transparent. Call it, say, "content".
- Delete the "background" layer.
You should now have an image with one layer, completely transparent.
If that doesn't work: Download Paint.NET or The GIMP; both are free and can produce PNG images like the one you need. In Paint.NET, draw the image as you need it, then use the wand to delete the background pixels (leaving a transparent area). Then resize to the final size, using "best quality", to achieve that smooth anti-aliased effect.

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.

It works. Has a very olden look to it.

Allowing the user to scale it will introduce aliasing issues and you'll almost certainly have to make your own anti-aliasing function to handle it. You'd want to draw the resized menu to a bitmap, along with its resized alpha channel, and then blend that onto the screen with an alpha blender.

But... that's a lot of effort for something that would take a minute to do with hardware acceleration, so at this point, I would recommend instead of trying to solve all these problems with non-accelerated solutions you think about switching to AllegroGL or OpenLayer for your graphics I/O.

The user can scale it?

Probably with mouse/keyboard handles. It's a good idea.

@Onewing: that screenshot looks cool. If you still need extra alpha-transparency formats, you could also try some of these:

Windows: Jasc's PaintShop Pro, Paint.NET, Gimp
Linux/Mac: Gimp, 'convert' (an alias to ImageMagick)

From those screenshots, though, it looks quite polished so far.

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

One thing I don't like is how the HUD is all nice and smooth, while the rest of the graphics are all jagged and pixelly. This is very clashy in my eye.

Re the above styles, the second one is the most clear one, the shading of the icons makes them pop out and they are distinct and colourful. The first one has a confusing Enemies icon. The third one has a confusing save icon, and the colours are so muted as to be not very distinct. I'd prefer the second style to have the first style's News icon, though.

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).

The colours of the third style suit the rest of the HUD more than the other two.

I agree with Siegelord (the second set with the first set's news icon being the best).

Here's an idea, what about leaving it all earthen (without the color differences) and when the user scrolls over a button, they get the neon accented icon:

Here, the mouse would be over the "Party screen" button.

I think that sounds like a great idea. Are you going to add some tooltips/hover text, too?

That's definitely a good idea. Probably gives the thing a more professional look & feel, too.
The "news" one looks better in the first than in the second, but for the rest, I prefer the second.

...what Tobias said.

But, I would change the colour of the news icon to be either a bright purple or blue. Using the orange colour from the first image wouldn't make it stand out well from the enemy or empire icons.

Also, when you said:

I thought you were talking about scaling to bigger or smaller sizes, but my response in that regard seemed to confuse everyone. I finally realized that what you meant was SLIDING the panel up or down to reveal more or less icons/data. That's easy enough to do without hardware acceleration.