Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » Making a simple button

This thread is locked; no one can reply to it. rss feed Print
Making a simple button
DuncanShine
Member #17,479
March 2020

I want to make a button by detecting whether the mouse cursor is on the bitmap, and then adding a number to a value i will then print on screen, but i can't seem to do it. It either just adds it even if the mouse isn't on the button or doesnt work altogether.

here's my [somewhat messy] code

jmasterx
Member #11,410
October 2009

That's not a rectangle you're forming there....

Here is a snippet from my fully fledged out of the box Gui solution for Allegro 5, used in the popular game Factorio that has sold over 1 million copies

https://github.com/jmasterx/Agui/blob/master/src/Agui/Rectangle.cpp#L82

DuncanShine
Member #17,479
March 2020

jmasterx - i think there might also be a problem with ALLEGRO_EVENT_MOUSE_BUTTON_DOWN as it always runs the code inside it no matter what

jmasterx
Member #11,410
October 2009

Attach all your code as text not a screenshot.

DanielH
Member #934
January 2001
avatar

Not tested, but this is a basic button I use to detect a click.

Checks if you pressed your mouse inside button and let go of mouse inside button

#SelectExpand
1// mouse vars kept outside loop function 2bool mb; // mouse button 3int mx, my; // mouse coords 4 5 6// assumes button vars initialized elsewhere 7int bx, by, bw, bh; // button coords and size 8bool button_down; // button pressed 9 10void loop 11{ 12 // button clicked 13 bool b_clicked = false; 14 15 // get current mouse button status 16 bool mb_old = mb; 17 18 // !!!!!!!!!!! update mouse vars elsewhere !!!!!!!!!!!! 19 20 // is current mouse inside button rectangle? 21 if (mx >= bx && my >= by && mx < (bx + bw) && my < (by + bh)) 22 { 23 // is mouse button down? 24 if (mb) 25 { 26 // was mouse button up? 27 button_down = (!mb_old); 28 } 29 else 30 { 31 // mouse let go inside button rectangle 32 b_clicked = button_down; 33 } 34 } 35 else 36 { 37 // reset button down status if let go anywhere outside rectangle 38 if (!mb) 39 { 40 button_down = false; 41 } 42 } 43 44 if (b_clicked) 45 { 46 // blah blah 47 } 48}

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

First, you have 4 statements with no effect and the return value is discarded.

Second, you are only testing whether the mouse is within the bottom right of the rectangle, not the upper left as well.

Third ALLEGRO_EVENT_MOUSE_BUTTON_DOWN will always be true when evaluated logically. Check event.type == ALLEGRO_EVENT_MOUSE_BUTTON_DOWN.

DuncanShine
Member #17,479
March 2020

-removed the redundant statements
-added event.type == ALLEGRO_EVENT_MOUSE_BUTTON_DOWN

don't really know how to make it able to click anywhere on the button

jmasterx
Member #11,410
October 2009

I already told you, you're not forming a rectangle, forming a rectangle takes 4 conditions, you have 2 so all you're doing in checking if it does not exceed the lower bound without checking if it is at least the upper bound. Edgar told you too.

DuncanShine
Member #17,479
March 2020

posX <= al_get_bitmap_x(buyButton) + al_get_bitmap_width(buyButton) &&
posX >= al_get_bitmap_x(buyButton) &&
posY <= (al_get_bitmap_y(buyButton) + al_get_bitmap_height(buyButton)) &&
posY >= al_get_bitmap_y(buyButton) &&
event.type == ALLEGRO_EVENT_MOUSE_BUTTON_DOWN

this isn't how you do it?

MikiZX
Member #17,092
June 2019

This one is similar to what you are asking originally:
https://stackoverflow.com/questions/12239408/how-can-you-efficiently-create-an-allegro-5-title-

also, a reminder to consider that mouse coordinates (event.mouse.x and event.mouse.y) are absolute in regards to the Allegro display - so in the above example, MYGAME_MENU_X1 and MYGAME_MENU_X2 would be absolute screen position values of your button on the screen and same for MYGAME_MENU_Y1 and MYGAME_MENU_Y2.

DuncanShine
Member #17,479
March 2020

i outputted the values for the cursor positions and it always returns 0, i'm not sure what's wrong

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

edit for your latest post
Because you're not checking and changing the mouse position (which you need to store) and query on an ALLEGRO_EVENT_MOUSE_AXES event.

I'm sorry, I also overlooked a very serious point.

al_get_bitmap_x doesn't do what you think it does. That is only if the bitmap is a sub bitmap, and you need its position on its parent. That is almost never necessary.

You need to decide on positions for your rectangle button first.

Rectangles have an upper left (and lower right) corner positions, and they have a width and a height. x,y,w,h will suffice.

So first define your button area :

#SelectExpand
1int btnx = 200 , btny = 150 , btnw = 400 , btnh = 300; 2int mx = 0,my = 0; 3 4/// Now check for events in your game loop : 5 ALLEGRO_EVENT ev; 6 al_wait_for_event(event_queue , &ev); 7 if (ev.type == EAGLE_EVENT_MOUSE_AXES) { 8 mx = ev.mouse.x; 9 my = ev.mouse.y; 10 } 11 else if (ev.type == EAGLE_EVENT_MOUSE_BUTTON_DOWN) { 12 if (mx >= btnx && mx <= (btnx + btnw) && my >= btny && my <= (btny + btnh)) { 13 /// Button click 14 } 15 }

DuncanShine
Member #17,479
March 2020

so is there any way to get the x value of a bitmap?

also i am doing this to store the x values but i don't think it works

if (event.type == ALLEGRO_EVENT_MOUSE_AXES) {
posX = event.mouse.x;
posY = event.mouse.y;
}

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

Non sequitur. There is no such thing as a bitmap x. It draws exactly where you tell it to. The button coordinates are totally independent of the image you draw, but are often the same area.

EDIT
You can use <code> code goes here ... </code> tags to quote code on this forum.

DuncanShine
Member #17,479
March 2020

Okay, i seem to have fixed the issue of it not loading the x and y positions of the cursor, so when i hold my mouse over the button it now runs the code inside it, but i'm still not sure how to integrate the mouse buttons into that

MikiZX
Member #17,092
June 2019

If you mean that you do not know how to detect left, middle or right mouse button click then you will find this information in 'event.mouse.button' variable that will contain the button information once you are in the ALLEGRO_EVENT_MOUSE_BUTTON_DOWN / ALLEGRO_EVENT_MOUSE_BUTTON_UP block.

Go to: