[ClickableButton] Add an extension to handle button states according to mouse events.

[D8H]

It's only a FSM.

• Project: https://www.dropbox.com/s/0vb32rlqbp0unv4/ButtomExample.zip?dl=1
• Build: https://liluo.io/instant-builds/b9346ead-759f-4f82-85a0-0d96fecfb127

[tristanbob]

Looks like you attached the files for the pinch example instead of the button example.

[D8H]

Looks like you attached the files for the pinch example instead of the button example.

Sorry, I fixed the link.

[VegeTato]

Really cool extension to make buttons in simpler way. I took a look at the example, everything is great, the only thing I noticed is: what if the user want the button to be pressed on click, not on button released ? maybe add a new condition for it.

[ghost]

@D8H This is awesome! I've been trying to work out how to make a button that acts a certain way (see list below), and you've done pretty much exactly what I was trying to do.

I love that your button:

• Changes on hover
• Changes on click (but not release)
• Doesn't allow clicking outside the button and then dragging over it
• Changes back when clicking on the button and then dragging outside it
• Doesn't allow clicking on one button but then releasing on another

The only issue I found is that if you click and hold on the button, it changes hover state and pressed state, and then if you drag outside the button the pressed state is removed :+1: but the hover state remains :-1:

[D8H]

The only issue I found is that if you click and hold on the button, it changes hover state and pressed state, and then if you drag outside the button the pressed state is removed 👍 but the hover state remains 👎

It's actually expected. It allows the user to understand which button has the focus and why other buttons can't be interacted with until the mouse button is released. It's quite common in UI.

[ghost]

Ah OK, thanks for the explanation.

[tristanbob]

Research

I did some quick research on button states. Most states make sense in this extension and some don't (i.e. "focused", "dragged").

1) https://material.io/design/interaction/states.html#usage

• Enabled/Disabled: An enabled state communicates an interactive component or element.
• Hover: A hover state communicates when a user has placed a cursor above an interactive element.
• Focused: A focused state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.
  I don't think we can offer this state inside a GDevelop app
• Pressed: A pressed state communicates a user-initiated tap or click by a cursor.
• Dragged: A dragged state communicates when a user presses and moves an element. This is provided by the Draggable extension

2) https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

1. Active & disabled state
2. Hover & hover off (mouse over & mouse off)
3. Focus
4. Pressed
5. Clicked

Recommendations

Users will much prefer and understand "Clicked" over "Validated". Therefore, I suggest these conditions and actions for this extension.

Actions:

• Enable (or disable) the button
• Select mouse button for interaction (default: left-button)

Conditions:

• Is disabled (or this could be "IsEnabled"): User cannot change the button state with mouse or touch.
• Is idle: The user is not currently interacting with the button.
• Is hovered: The cursor or touch is located over the button.
• Is pressed: Click or touch started while the button was hovered. This state ends when the cursor or touch is released.
• Is clicked: Click or touch was started AND released while the cursor was over the button. This state only lasts one frame.

Things to consider:

• When a touch/click was started outside the button and the cursor moves over the button, do we want hover to be true or false? Currently, hover is false in this case, which I think is fine. Some applications use this logic and some don't. Should we make this a property so users can decide?

[tristanbob]

@D8H should we close this and recommend people use the custom panel sprite button that has this logic?