GUI animation types

Revision as of 22:51, 5 January 2010 by SIMU-NOVA (Talk)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Caution: This page may contain information which is Hero's Journey-specific!

There are several different pre-existing GUI animation types which can be applied to a GUIControl, each of which has its own specific use and arguments. This page gives details on the different types.


Commonly Used Types

To see a complete list of all available animation types, open the script editor and look for scripts that start with the prefix "GUIA_". To create a new type, see the section on GUIAnimations. Following is a list of the more commonly-used ones. For detailed arguments of each type, please see the appropriate section further down on the page, or open the appropriate script and look at its comments. For example, to learn the details of the Interpolate animation, you could examine the client-side script GUIA_Interpolate.hsl.

Each of the above animations can be set on a control either by directly adding a reference to the "animation" field of the control's properties, or via a script.


This animation causes the movement of a button Control that makes it look like the button is depressed when the mouse clicks on it. Note that this animation type is unique to button Controls, and cannot be used on other types of Controls (since they won't have the pieces that this animation looks for).

XML Syntax

Most buttons already have this animation type built in to their animation field. However, if one doesn't, here is how to add it:

       onMouseDown=ButtonClicks(press); onMouseUp=ButtonClicks(depress);


This animation causes a Control to draw (or redraw) itself from left to right, with some attached sparkles. For an example, look at the Character Manager, for the way that the header text appears at the top left of the screen.

XML Syntax

In the animation field of the Window control, add the following:


HSL Syntax

To do the same thing via a script, for example, to set it such that right-clicking on a button will make its entire window sparkle, add the following:

function WonderfulButton_OnMouseClick(args references Class GUIMouseEvent)
  if (args.rightButton = true)
    var ButtonsWindow = GUIutils:rootParent(me)
    GUIAnimation:addAnimation(ButtonsWindow, "Revealer", "")


This animation takes two different values for some field on the target GUIControl, and then animates the Control by moving from one value to the other. For example, if a minimum and maximum values were indicated for the Control's size field, this animation would cause the Control to appear to grow from one size to another.

//1 field(string), the field on the GUIControl to modify, such as size.x or defaultStatePresentation.color.a
//2 min(float)
//3 max(float)
//4 duration in seconds(float)
//5 repeat count(integer)
//6 reverse(boolean), forward and backward(true), or just forward(false)
//7 curve(Enum of type interpolation curve), LINEAR, HOLD, EASE_IN, EASE_OUT, SMOOTH
//8 restore(boolean), restores the orignal value after the animation is finished
//9 delay in seconds(float), the amount of time to wait before actually starting the animation
//10 id(string), the ID of the animation

XML Syntax

This is the value of the animation field on an "Action Mark" icon (such as when a character approaches an object that they can sit down on) which causes the icon to solidify as the mouse cursor passes over it:


HSL Syntax

GUIAnimation:addAnimation(getReady, "Interpolate", "size.y, getReady.size.y, 0, 0.5, 1, false, smooth, false, 0, readyshrink")

Though the above would be acceptable, it would be difficult to read. A better way to send the arguments would be as follows:

  aa as String
  aa = aa + "size.y"                               // field to change
  aa = aa + "," + getReady.size.y                  // Minimum value
  aa = aa + "," + "0"                              // Maximum value
  aa = aa + "," + "0.5"                            // duration of effect
  aa = aa + "," + "1"                              // repeat count
  aa = aa + "," + "false"                          // reverse direction when max achieved
  aa = aa + "," + "SMOOTH"                         // interpolation curve
  aa = aa + "," + "false"                          // restore value when done
  aa = aa + "," + "0"                              // delay start by seconds
  aa = aa + "," + "readyshrink"                    // name for this animation
  animationNode as NodeRef of Class GUIAnimation = GUIAnimation:addAnimation(getReady, "Interpolate", aa)


This animation works with the Control's texture file, which is assumed to have several frames of animation within it. The animation's arguments specify the size and placement of the frames, and then how quickly to play through them. Note that this animation type does not bring its own animation with it! It can only work with the texture that is already on the Control, which must already have been created by an artist to supply the necessary animation frames.

Examples of this animation can be found in the Ability Bar icons, to supply the moving clock shadow that appears on them when they are clicked. In that case, there is a "shadow" control with the texture file that has the animation frames, and this control is overlaid on top of whichever ability icon needs to have the animation. The texture file has a set of frames for each of the three icon shapes, and all three sets are in the same texture file. Its size is hardcoded -- it doesn't "stretch" to other controls, so this animation can only be used on something that's the exact size and shape of an Ability Bar icon.

Frames are numbered sequentially, with the first frame being #0 (not 1). All frames must be the same size, and arranged in the texture file in such a way that their borders are right up against each other without any space in between.

Argument Datatype Description
statePresentation String Potential values are: (default, disabled, hover, selected, selectedDisabled)
startFrame Integer The frame of animation to start with, counting the first frame as #0.
endFrame Integer The last frame to display
duration Float  
framesPerRow Integer  
startingX Float The x,y coordinates specify the location of the first frame of animation in the texture file
startingY Float  
repeatCnt Integer  
reverse Boolean  
restore Boolean  
delay Float  
animID String = args[12]  

XML Syntax


HSL Syntax

For sample code, please check the mainBar.hsl client-side script, in the applyClockShadow() function.

See also

Personal tools