Buttons normal/pressed textures managment

Buttons normal/pressed textures managment
7th September, 2011

HUD, Scripting, Tutorials

(2 votes, average: 5.00 out of 5)

Loading ...

Having buttons in your HUD is fine for your application to work, but it’s better when the user can have a feedback of his actions. That’s the goal of this tutorial, changing the texture of a button when the user clic it with his mouse, or tap it with his finger.

Steps

1. Create an AIModel named « ButtonsManager », and add it to your game User Main AIs.

2. Create 2 hashtables to store the textures of your buttons, one for the state « normal » and one for the state « pressed ».

3. Create a string variable named « sUnderMouseButton » to store the button that has been clicked.

4. Create a function to simplify the setup of the buttons. The function take in parameter the tag of the button, and its textures for both states. Then, the function adds the textures in our 2 hashtables, using the component tag as key. The function should looks like that :

--------------------------------------------------------------------------------
function ButtonsManager.addButton ( sComponent, sTextureNormal, sTexturePressed )
--------------------------------------------------------------------------------
 
    if ( sTextureNormal )
    then
        hashtable.add ( this.htButtonsNormal ( ), sComponent, sTextureNormal )
    end
    if ( sTexturePressed )
    then
        hashtable.add ( this.htButtonsPressed ( ), sComponent, sTexturePressed )
    end
 
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------

5. Create the onInit handler, and add the button you want to interact with, by using the function you have created above :

--------------------------------------------------------------------------------
function ButtonsManager.onInit (  )
--------------------------------------------------------------------------------
 
	this.addButton ( "Menu.PlayButton", "play_button_normal", "play_button_pressed" )
	this.addButton ( "Menu.OptionsButton", "options_button_normal", "options_button_pressed" )
	this.addButton ( "Menu.CreditsButton", "credits_button_normal", "credits_button_pressed" )
 
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------

6. Create a new function to update the state of a button. The function takes the button tag and the button state as parameters. Create 2 local variables for the 2 possible states the button can have. These variables will be used as constants. The button state in parameter must match one of the constants.

--------------------------------------------------------------------------------
function ButtonsManager.setButtonTexture ( sButtonTag, kButtonState )
--------------------------------------------------------------------------------
 
    local hButton = hud.getComponent ( application.getCurrentUser ( ), sButtonTag )
    if ( hButton )
    then
        local kButtonStateNormal = 0
        local kButtonStatePressed = 1

Then, get the texture name corresponding to the wanted button state, and update the button texture :

        local sTexture
        if ( kButtonState == kButtonStateNormal )
        then
            sTexture = hashtable.get ( this.htButtonsNormal ( ), sButtonTag )
        elseif ( kButtonState == kButtonStatePressed )
        then
            sTexture = hashtable.get ( this.htButtonsPressed ( ), sButtonTag )
        end
        if ( sTexture )
        then
            hud.setComponentBackgroundImage ( hButton, sTexture )
        end
    end
 
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------

7. Add the onMouseButtonDown handler to your AI. When this handler is being called, if a button is under the cursor, you have to change its texture (from normal to pressed). Start by checking which component is under the mouse cursor, and if this component is a button. If it’s the case, store the button tag in the sUnderMouseButton variable, to be able to restore its previous texture when the mouse button will be released.

--------------------------------------------------------------------------------
function ButtonsManager.onMouseButtonDown ( nButton, nPointX, nPointY, nRayPntX, nRayPntY, nRayPntZ, nRayDirX, nRayDirY, nRayDirZ )
--------------------------------------------------------------------------------
 
    local hComponent = hud.getUnderCursorComponent ( application.getCurrentUser ( ) )
    if ( hComponent and hud.getComponentType ( hComponent ) == hud.kComponentTypeButton )
    then
        local sButtonTag = hud.getComponentTag ( hComponent )
        this.sUnderMouseButton ( sButtonTag )

And then, update the component texture by calling the setButtonTexture function you have created a few minutes ago, using the right button state contant :

        local kButtonStateNormal = 0
        local kButtonStatePressed = 1
 
        this.setButtonTexture ( this.sUnderMouseButton ( ), kButtonStatePressed )
    end
 
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------

8. Finally, create the onMouseButtonUp handler and restaure the button normal texture :

--------------------------------------------------------------------------------
function ButtonsManager.onMouseButtonUp ( nButton, nPointX, nPointY, nRayPntX, nRayPntY, nRayPntZ, nRayDirX, nRayDirY, nRayDirZ )
--------------------------------------------------------------------------------
 
    if ( not string.isEmpty ( this.sUnderMouseButton ( ) ) )
    then
        local kButtonStateNormal = 0
        local kButtonStatePressed = 1
 
        this.setButtonTexture ( this.sUnderMouseButton ( ), kButtonStateNormal )
        this.sUnderMouseButton ( "" )
    end
 
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------

Conclusion

You can use this AIModel in all of your games, you only have to change the onInit content to match the buttons of your games.
Do not forget to reference all your buttons textures in your game (Game Editor > Resources tag).
This sample also works for a multitouch application.