Hi,
I've been struggling with a problem in a GUI I'm making for a simple game(basically, a learning experience for me)

I'm trying to make windows of varied sizes using a default .png skin file(this is a crappy one quickly done just to demonstrate):

606447

It has a 16 pixels(square) sized corner, two 32x16 borders(one vertical and one horizontal) and a 32x32 sized walpaper.
To draw a window, I simply strech the walpaper to the desired size, and then add the borders and corners to it, using the flags ALLEGRO_FLIP_HORIZONTAL and ALLEGRO_FLIP_VERTICAL when necessary.

This is an example of the type of window this method produces(Not actually done ingame, but in GIMP. Did only a single corner to demonstrate the issue). A 100x100 window:

A close look at the corner of the window will reveal the problem. I need the alpha channel of the outer part of the border to ovewrite the color of the walpaper completely, no to blend with it, but I need the inner part of the border to still blend with the walpaper.

thoughts?

thanks in advance.

EDIT: "procudes"

I'm confused. Why not make the outer part opaque (alpha = 255) and the inner part transparent (alpha = 0) ?

I get the point, but the outer part still needs to blend with the rest of the screen, and I want to support any alpha value to increase the anti-aliasing quality(that is, to avoid rough edges on the windows).

Well, you can either vary the alpha of the bitmaps you're using, or use subbitmaps and vary the blender or blending color.

I think I sort of get it, but I don't think you'll be able to get away without having a dedicated mask.

ALLEGRO_BITMAP* mask; //has alpha = 0 on the outside of the border and alpha = 1 on the inside
ALLEGRO_BITMAP* wallpaper; //already pre-scaled
al_set_target_bitmap(wallpaper);
al_set_separate_blender(ALLEGRO_ADD, ALLEGRO_ZERO, ALLEGRO_ONE, ALLEGRO_ADD, ALLEGRO_ONE, ALLEGRO_ZERO); //set a blender that transfers the alpha channel from one bitmap to another
al_draw_bitmap(mask, 0, 0, 0); //now wallpaper has the outer portions masked out

That's a really good sollution(probably the most flexible one), but having to do a mask image along with the skin image makes me feel lazy(I really have no better excuse).

For now, I'll be declaring a variable offset for streching the wallpaper(An offset of 3 will mean the wallpaper will leave a three-pixel border when streching, leaving room for the border's alpha to do its job). I'm planning on having an easily make-a-ble(sorry, my bad english can't guess a better word for this) skin file: a zip file containing the png file and a configuration value with some values(wallpaper size, corner size, and now offset)

Here is a window drawn using offset = 3:

{"name":"606449","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/d\/3\/d3b355e6eebd17cde8e71bff500493df.png","w":642,"h":509,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/d\/3\/d3b355e6eebd17cde8e71bff500493df"}

Using this skin:

606450