How can I draw a rectangle filled with a horizontal or vertical gradient with Allegro 5?

With Allegro 4, I could draw a rectangular gradient using the polygon drawing routines.

I'm not sure if its the only way, but try using the primitive addon. particularly al_draw_prim.

There is no specific function for it, but al_draw_prim should be able to do it (untested):

void draw_vertical_gradient_rect(float x, y, w, h, ALLEGRO_COLOR top, bottom) {
    ALLEGRO_VERTEX v[] = {
        {.x = x, .y = y, .z = 0, .color = top},
        {.x = x + w, .y = y, .z = 0, .color = top},
        {.x = x, .y = y + h, .z = 0, .color = bottom},
        {.x = x + w, .y = y + h, .z = 0, .color = bottom}};
    al_draw_prim(v, NULL, NULL, 0, 4, ALLEGRO_PRIM_TRIANGLE_STRIP);
}

Some of the examples also demonstrate it I think.

This is how I've been doing it, but I think that Elias' idea is more elegant.

Needs to be fixed up, and strange colors can happen still if the color range is less than the height of the rect. But, I leave that up to you to fix if you wish to use it...

Changed it to use Elias' code...

void DrawRoundedGradientRect( float x1, float y1, float x2, float y2,
                ALLEGRO_COLOR c1, ALLEGRO_COLOR c2)
{
    ALLEGRO_VERTEX v[] =
  {
        { x1, y1, 0, 0, 0, c1},
        { x2, y1, 0, 0, 0, c1},
        { x1, y2, 0, 0, 0, c2},
        { x2, y2, 0, 0, 0, c2}
  };
    al_draw_prim(v, NULL, NULL, 0, 4, ALLEGRO_PRIM_TRIANGLE_STRIP);
}
///////////////////////////////////////////////////////////////////////////////

Same results. I like it much better though.

I have coded this function:

I am using the above function like this:

    algui_fill_rect_gradient(20, 10, 59, 49, 
        al_map_rgb(255, 255, 255), al_map_rgb(255, 255, 255), al_map_rgb(255, 255, 255), al_map_rgb(255, 255, 255));

However, the result is not a rectangle, it is a triangle:

{"name":"Cafji.png","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/c\/d\/cd0815d114a3329b5d4c2a0be07d5294.png","w":640,"h":480,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/c\/d\/cd0815d114a3329b5d4c2a0be07d5294"}

What am I doing wrong?

if you change your background to a different colour do you get a black and a white triangle or just the white triange? I know nothing of the prim functions but I'm guessing it's just flipping between black and white based on your gradiant being the same colour for all corners?

I don't think so. For example, if I change the background to gray:

{"name":"Dcb8r.png","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/8\/e\/8eafc3d309cc02702905ef36d8051a45.png","w":640,"h":480,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/8\/e\/8eafc3d309cc02702905ef36d8051a45"}

One thing I noticed, instead of ending at the last point, you are moving beyond it:

/* setup the bottom-right vertex */
v[3].x = right + 0.6f;
v[3].y = bottom + 0.6f;

These should probably be just right or left+right, and bottom or top+bottom. I don't understand wtf the 0.6 is for, but that's not right. I think your other problem is the order you put your vertices...it's a triangle strip, so you should have:

And the output you had was solid white with no gradient because that is what you passed to the function, but I'm sure you knew that one.

Your point coordinates are probably wrong. E.g this:

v[1].x = left;
v[1].y = right + 0.6f;

And what's with the 0.6?

EDIT: Pretty sure the order of his points is fine. For triangle fans you go clockwise, for triangle strips you zig-zag.

But seriously, the code you needed was posted by me here at the bottom, all you had to do was add two more color parameters to the function...

SiegeLord:
Works for me, and not him...so I'd say it's the vertice order. Especially considering that is the portion that is missing.

Except the order in your first post is the same as in axilmar's post :

void DrawRoundedGradientRect( float x1, float y1, float x2, float y2,
                ALLEGRO_COLOR c1, ALLEGRO_COLOR c2)
{
    ALLEGRO_VERTEX v[] =
  {
        { x1, y1, 0, 0, 0, c1}, //top left
        { x2, y1, 0, 0, 0, c1}, //top right
        { x1, y2, 0, 0, 0, c2}, //bottom left
        { x2, y2, 0, 0, 0, c2}  //bottom right
  };
    al_draw_prim(v, NULL, NULL, 0, 4, ALLEGRO_PRIM_TRIANGLE_STRIP);
}

By GOD it is isn't it...my eyes are not what they used to be l0l! Why label these top and bottom and not just x2, y2 like everyone else...

/* setup the top-left vertex */
 13    /* setup the top-right vertex */
 14    v[1].x = left;
 15    v[1].y = right + 0.6f;
 16    v[1].z = 0;
 17    v[1].color = top_right;

Oh....but we both didn't see this at first so Look at lines 14 and 15...I'm pretty sure that v[1].y is suppose to be v[1].y = top+0.6f. Well, that and the color value would be wrong at least going by the variable's label.

Actually, I goofed at this line:

v[1].x = left;
v[1].y = right + 0.6f;

It's two hours that I am viewing this code, and I couldn't parse it correctly. Sorry :-).

Don't forget to correct the color line there as well...see my post above.

Isn't vertex 1 the top-right vertex?