GUI animation types
| 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.
Contents |
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.
-
Interpolate- Will change fields of a Control based on upper and lower boundary arguments. For example, it could be used to change a control's color, size, position, or any combination of other numeric (float-value) fields.
-
Frames- This animation takes a given texture file, and steps through different sections of it, making each part of the texture file a different "frame" of the animation. The arguments of this animation specify things like the size of the frame, how many rows of frames exist in the file, how long each frame needs to be displayed, and so forth.
-
Revealer- Used by the character manager, this displays a graphic in a left to right "revealing" style, with some sparkles tossed in for good measure.
-
CategoryTopicExpansion- Used in the character manager to get category and topic headers to expand and collapse.
-
ButtonClicks- Animates the depression of a button when it is clicked. This animation is specific to buttons, and cannot be used on any other type of GUIControl.
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.
ButtonClicks()
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:
- Examine the Button control via the GUI Editor
- Look at the button's properties
- In the button's Animation field, add the following:
onMouseDown=ButtonClicks(press); onMouseUp=ButtonClicks(depress);
Revealer()
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:
OnMouseClick=Revealer();
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", "") .
Interpolate()
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.
//==Args== //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:
onMouseEnter=Interpolate(defaultStatePresentation.color.a,0.5,1.0,0.6,1,false,SMOOTH,false,0,fadein); onMouseLeave=Interpolate(defaultStatePresentation.color.a,1,0.5,0.6,1,false,SMOOTH,false,0,fadeout);
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)
Frames()
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
onMouseClick=frames(default,0,59,15,15,0,0,0,false,false,0,clockShadow);
HSL Syntax
For sample code, please check the mainBar.hsl client-side script, in the applyClockShadow() function.
