7 - States
Last updated
Last updated
States allow you to set multiple variables at one time. Examples of states might include:
A button with Regular, Highlighted, Pressed, and Disabled states
A game logo in Large and Small modes
A game where multiple options can be selected
This tutorial builds upon the previous tutorial where a Button component was created. To follow along you will need to have a Button component created as defined in the earlier tutorials.
First we'll define two new states. All components and screens have a "Default" state automatically. This Default state is uncategorized, but all other states must be in a category. Therefore, we'll first add a new category:
Right-click in the States tab
Select Add Category
Enter the name ButtonStateCategory
To add a new state:
Right-click on ButtonStateCategory
Select Add State
Enter the name "Highlighted"
Click OK
The Button component will now have a new state called Highlighted:
Once a state is defined and selected, setting a variable will associate that variable with a given state. In other words, any variable that is set when the "Highlighted" state is selected will associate the variable with the Highlighted state.
For this example, we will make the button become a lighter blue when highlighted. To do this:
Verify the Highlighted state is selected
Select the ColoredRectangleInstance
Set the Green and Red values to 100
Notice that the Green and Red values are rendered with a white background rather than green - indicating that they are values that are explicitly set in the Highlight state.
The values that have just been set apply only to the state that was selected - the Highlight state. This means that clicking on the Default state will switch the button back to the default colors. By clicking on the states in Gum you can preview and edit states easily.
Whenever a state in a category sets a variable, that variable is set across all states in that category. So far this tutorial only created a single state called Highlighted, but if additional states are set, all will explicitly set the Red and Green state. This topic is covered in more detail in the next tutorial.
