User Tools

Site Tools


en:tutorials:ui:mouse-over-effect

This is an old revision of the document!


Introduction

There are plenty of ways to implement some kind of hovering effect. In this tutorial I will describe how do it using the animation framework of orx. In order to do so, you will have to write quite some lines in your ini files. Luckly you can just copy-paste most of it. I will not provide a running example, but rather some bits and pieces that you can use for your existing project.

Prerequisites

It is supposed that your button consists of two images. One representing the active and on the inactive state.

The configuration

Ok let's suppose you have some kind of game menu, in which you got a “Play” button, that will start the actual game. So we define two animations for this button: one that shows the active image and one showing the inactive image. You can just copy paste those lines, replacing “PlayButton” with the name you like and the paths inside “PlayButtonGraphicActive” and “PlayButtonGraphicInactive”, so that they will point to the correct images. Repeat this step for all the buttons you have.

[PlayButton]
Graphic = PlayButtonGraphicInactive
Position = (0,0,0.00001)
Pivot = top left
AnimationSet = PlayButtonAnimationSet
AnimationActive = PlayButtonActive
AnimationInactive = PlayButtonInactive
 
[PlayButtonAnimationSet]
AnimationList = PlayButtonInactive#PlayButtonActive
LinkList = PlayButtonInactiveLoop#PlayButtonInactive2Active#PlayButtonActiveLoop#PlayButtonActive2Inactive
 
[PlayButtonActive]
DefaultKeyDuration  = 0.5
KeyData1            = PlayButtonGraphicActive
KeyData2            = PlayButtonGraphicActive
 
[PlayButtonInactive]
DefaultKeyDuration  = 0.5
KeyData1            = PlayButtonGraphicInactive
KeyData2            = PlayButtonGraphicInactive
 
[PlayButtonInactiveLoop]
Source      = PlayButtonInactive
Destination = PlayButtonInactive
 
[PlayButtonInactive2Active]
Source      = PlayButtonInactive
Destination = PlayButtonActive
Property = immediate
 
[PlayButtonActiveLoop]
Source      = PlayButtonActive
Destination = PlayButtonActive
 
[PlayButtonActive2Inactive]
Source      = PlayButtonActive
Destination = PlayButtonInactive
Property = immediate
 
[PlayButtonGraphicActive]
Texture = ../../data/img/ui/btn_badge_play_hover.png
Pivot = top left
 
[PlayButtonGraphicInactive]
Texture = ../../data/img/ui/btn_badge_play.png
Pivot = top left

The code

Now that you have all the buttons configured, we can go to the coding part: We want to set the target animation to PlayButtonActive when the mouse hovers the button and to PlayButtonGraphicInactive when the mouse leaves the button.

So you probably have some update function that handles all your game logic stuff. You may either use this one, are register a new one, that is called less frequently(, because the hovering effect of the mouse is not really important/time critical). Nevertheless this is how the update function would look like:

//object that stores the currently highlighted button:
orxOBJECT* highlighted_button_ = orxNULL;
 
void orxFASTCALL Update(const orxCLOCK_INFO *_pstClockInfo, void *_pstContext)
{
  //let's fetch the mouse's position:
  orxVECTOR vPos; 
  if(orxRender_GetWorldPosition(orxMouse_GetPosition(&vPos), orxNULL, &vPos))
  {
    //let's see what's currently under the mouse:
    orxOBJECT* object = orxObject_Pick(&vPos, orxU32_UNDEFINED);
    if(object)
    {
      //check if the user clicked or just hovered over the object:
      if(orxInput_IsActive("Select")&&orxInput_HasNewStatus("Select")) {
        //he clicked...so let's start the game if it was the PlayButton
        if(orxString_Compare(orxObject_GetName(object),"PlayButton")==0) {
          //INSERT SOME CODE THAT STARTS YOUR GAME
        } else if(orxString_Compare(orxObject_GetName(object),"OtherButton")==0) {
          //DO OTHER STUFF FOR OTHER BUTTONS
        }
      } else {
        //he just hovered...so let's set the animations correctly
        if(object!=highlighted_button_ && highlighted_button_!=orxNULL) {
          //The mouse left the currently hightlighted object...so remove the animation:
          if(orxConfig_PushSection(orxObject_GetName(highlighted_button_)))
          {
            orxObject_SetTargetAnim(highlighted_button_, orxConfig_GetString("AnimationInactive"));
            orxConfig_PopSection();
          }
          highlighted_button_ = orxNULL;
        }
        //let's check if the mouse is over one of our buttons
        //this could also be made more intelligent, like searching for the string Button in the name of the object, given that all the buttons have the hovering animations specified
        //furthermore this could also be mode more efficient, but comparing the concrete object pointers, (given you have them)
        if(orxString_Compare(orxObject_GetName(object),"PlayButton")==0 || 
           orxString_Compare(orxObject_GetName(object),"OtherButton")==0) {
          if(orxConfig_PushSection(orxObject_GetName(object)))
          {
            orxObject_SetTargetAnim(object, orxConfig_GetString("AnimationActive"));
            orxConfig_PopSection();
          }
          highlighted_button_ = object;
        }
      }
    }
  }
}
It assumes, that you have multiple buttons and you want the possibility to add new buttons easily. Once you added the configuration lines for a new button simple add a new check (orxString_Compare(orxObject_GetName(object),“NewButton”)==0) at the bottom of the update function(where the animation is set to AnimationActive).

Hope that helps!!

en/tutorials/ui/mouse-over-effect.1486983901.txt.gz · Last modified: 2017/05/30 00:50 (7 years ago) (external edit)