Animation keyframes are defined by creating states in categories. If an animation uses two states in the same category then the animation will tween between the
Gum supports creating and previewing animations in the editor through the use of states. The general workflow for creating an animation is as follows:
Create states representing the keyframes in the animation (usually one category per animation)
Add an animation to the component or screen
Add states to the animation and adjust their time
Set interpolation values for each keyframe to control "easing"
Gum's animation system is very powerful and can be used in a variety of situations:
Animations which play when a screen or component is shown or hidden
Animations used to transition between behavior states such as changing a button from regular to highlighted state
Lengthy animations which can last multiple seconds for complex transitions
Animations are stored separate from the screen or component on the file system. If a screen or component contains at least one animation then Gum will save a Gum Animation XML file (.ganx extension) with the word "Animations" appended on the screen or component's name. In other words GameScreen would have a file called GameScreenAnimations.ganx in the same folder containing information about its animations.
Once an animation has been made it can be played back in editor. The following shows how an animation is played back, both in real time and also by dragging the slider.
Gum supports creating animations which can play other animations. This is especially useful when creating animations in Screens that contain components which themselves have animations. This tutorial will build upon the previous tutorial where we created an animated component called TextComponent.
First we'll create a Screen called AnimatedScreen. To do this:
Right-click on Screens
Select "Add Screen"
Enter the name "AnimatedScreen" and click the OK button
Drag+drop a few TextComponents into the Screen and spread them out visually
The animation we will be creating in our Screen will start with all TextComponents being invisible, then each one appearing by playing their Show animation. The animations will be slightly staggered. First we'll add the initial state where all of the TextComponents are invisible. To do this:
Verify that the AnimatedScreen is selected
Right-click in the states area and select "Add State"
Name the state "AllInvisible" and click OK
Select one of the TextComponents
Set its State to Hidden
Repeat setting the State to Hidden for the other TextComponents
Now we have all of the states and animations that we'll use as keyframes in our animation. To create the animation:
Select AnimatedScreen
Select "State Animation" -> "View Animations"
Click "Add Animation"
Name the animation "ShowAll"
Select the ShowAll animation
Click "Add State"
Select "AllInvisible" and click OK
The animation now sets all TextComponents to their Hidden state initially.
Next we'll be adding animations to animate the TextComponent instances to visible. To do this:
Bring up the animation window for AnimatedScren if it is not already showing
Select "ShowAll"
Click "Add Sub-animation"
Select the first TextComponentInstance
Select the Show animation and click OK
Select the newly-created animation and set its Time to 0.5
Repeat the above steps to add animations for the other two TextComponents, but set their times to 1.0 and 1.5
Now the animation can be played or previewed with the slider bar:
This article shows how to create an animated component. It will contain an animation which can be used when the component first appears.
First we'll create a component which will be animated. To do this:
Right-click on Components
Select Add Component
Enter the name TextComponent and click OK
Drag+drop the Text Standard into the TextComponent to create a Text instance
Select the Alignment tab and click the middle button to have the TextInstance fill the TextComponent
Now that we have a component we'll add the states needed for animation. We'll add all states in a category called HideShow. Animation states should always be categorized. To create the states:
Right click in the States list box
Select Add Category
Enter the name HideShow
Right-click on the HideShow folder
Select Add State
Enter the name Hidden and click OK
Right-click on the HideShow folder
Select Add State
Select Shown
Now that we have the states defined we can set values for the states. In this case the only thing we'll be modifying is the TextInstance's Font Scale value. To do this:
Select TextInstance
Select the Hidden state
Set the Font Scale to 0. This makes the Text so small that it's invisible
Select the Shown state
Verify the Font Scale is 1, or set it to 1 if not. This makes the Text regular size
The two states we created above will be used as the keyframes for our animation. The animation will begin in the Hidden state then interpolate to the Shown state. To add this animation:
Verify that TextComponent or any objects under it are selected
Select State Animation ->View Animations
Click the Add Animation button
Name the animation Show and click OK
Select the Show animation and click Add State
Select the Hidden state and click OK - this is the first keyframe in our animation
Click Add State again
Select Shown and click OK
The animation can now be played or previewed:
The Interpolation Type value sets how one keyframe blends to another. By default keyframes use Linear interpolation, which is a constant change from one state to another. When interpolating from one keyframe to another, the first keframe defines the interpolation type. In our case the Hidden frame defines the interpolation type. We can change the Interpolation Type and preview the animation:
Select the Hidden keyframe
Change Interpolation Type to Elastic
Playing the animation will reflect these changes.
