A variable can be a number, string, or boolean (true or false). All variables have an initial value, but that value can be changed through user interaction, making variables very useful for prototyping.
Creating a Variable
Before you use a variable, you need to define it in the Variables Panel.
Variable Scope
First, you need to choose where the variable can be used. Variables have three possible scopes: global, page, and component.
Global Variables: Variables that can be used, updated, and displayed throughout an entire project. For example, if you wanted to save a user's name from an input text field and use their name on other pages of the app, you would use a global variable.
Page Variables: Variables that can be used on the page they are created on. They cannot be used across different pages.
Component Variables: Variables that can only be used or edited on a main component. Each instance of the component will have its own distinct variable value. For example, if you wanted to create a social media post “like count,” you would use a component variable.
Prefab Variables: variables that are specific to the prefab they were created on. They can only be edited within the prefab, and they’ll exist anywhere the prefab is used.
Variable Properties
Once you choose the scope, add a new variable to that scope’s list by clicking the plus button.
Name: Name your variable whatever you’d like, as long as there are no spaces. We recommend making the name something short, easy to remember, and descriptive.
Type: Specify if your variable should be a number, string, or bool. The type should depend on your use case.
A string variable holds a text value, which can store anything from a single character to an entire paragraph of text. Use a string variable to:
Save the text a user inputs in a text field
A number variable stores a numerical value. Use a number variable to:
Save a stepper or slider’s value
Track the number of lives remaining in a game
Store the Y location of a user’s tap
A boolean variable stores either True or False (On / Off). Use a bool variable to:
Track if a user has tapped a button
Track if a user is actively panning
Determine if a toggle is switched on or off
Create conditional statements
Value: Set the initial/default value of your variable. This is often ‘0’ for number variables, “” (empty string) for string variables, and ‘off’ for bool variables, but there are some situations where you want to use a different initial value.
Set Value to (nil): Turning this on sets your variable to empty. Empty variables indicate that the variable has not been set/used through interaction.
You might create an empty variable to set a condition to false prior to user interaction.
Description: Add an optional description of what your variable is used for. This is helpful when collaborating with teammates and sharing Play files with engineers.
Make sure to click ‘Create’ to add the variable. Once created, variables can always be edited through the Variables Panel. They can also be deleted or duplicated through the right-click menu.
Using a Variable
Set Variable
The Set Variable action lets you update the value of one or more variables through an interaction. You’ll select the variable on the left side of the equals sign (=), and enter the new value on the right, using the Expressions Editor.
You can enter a hard-coded value into the Expression Editor, like “Hello”, 20, or True, to set a variable to something specific.
You can also use properties and equations as the variable’s value. For example, you could set a variable as…
An input text field’s value (probably a string)
The X or Y location of a user’s tap
An updated count
You can also use a Set Variable action to set the value of a specific object property. For example, you could set the center position of a stack to the location of the user's tap.
[Stack.midX] = = [Tap.gestureLocationX]
Using Variables as Values
You can use a variable as the value for any property in Play. For example, you can set the value of a text element to a variable by using a Set Text action. In the Set Text action’s Value property, open the Expression Editor and type the variable name.
Variables in Expressions and Conditions
Once a variable is defined, you can use it to simplify expressions and conditions. Since variables often change through Set Variable actions, using them in conditions allows for more responsive interactions.
In this example, a user adds an item to their cart using a stepper. If they add three or more, a discount is applied to the price of each item.
Using the stepper will change the stepper's value. The top Set Variable action saves that stepper's value.
The condition checks if the variable's value (the item quantity) is three or more. If it's true, the price is set to $12.99. If it's false, the price is set to $15.49.
Then, you can use both variables to calculate the total price (item quantity * item price) in the Expression Editor.
