4 - Components
Last updated
Last updated
Components can contain instances of other components and of standard objects. Examples of components include:
Check boxes
Buttons
Popup Menus
Components can also be simple such as a button or more complex UI elements such as a full Options screen with dozens of instances.
To understand how components work, we'll create a simple Button component. To do this:
Right-click on the Components folder in Gum and select Add Component
Name the Component "Button"
Drag+drop a ColoredRectangle standard element into the Button component
Drag+drop a Text standard element into the Button component
Since ColoredRectangleInstance and TextInstance are both white you may not be able to see the Text. Let's change the ColoredRectangleInstance's color:
Select ColoredRectangleInstance
Change Red to 0
Change Green to 0
Keep Blue as 255
Notice that as you change the values, the background on the text box changes from green to white to indicate that the value has an explicit value. The Blue text box keeps a green value since it has not been changed from its default value.
Now you should be able to see the Text on top of the rectangle:
At this point we have made some progress towards creating our first button, but it still needs some work.
First, we're going to adjust the size of the instances inside of our Button component. At this point you can see that the ColoredRectangle (the blue background) is not the same size as the button. Not only do we want to make the blue ColoredRectangle larger, but we also want it to automatically match the Button's size (the dotted outline).
To do this:
Select the ColoredRectangleInstance
Select the Alignment tab
Click the Fill Dock button
Alternatively you can adjust the individual values. Keep in mind that using the Alignment tab is the fastest way to get your instances setup. The next section shows all of the changes that the Alignment tab performs for you:
Select the ColoredRectangleInstance
Change Height Units to Relative To Parent
Change Width Units to Relative to Parent
Change Height to 0. This means that the actual height of the ColoredRectangleInstance matches the actual height of its container (the Button Component). Since Height Units is set to Relative To Parent.
Change Width to 0. This means that the actual width of the ColoredRectangleInstance matches the actual width of its parent.
Now the ColoredRectangleInstance automatically matches the Button's actual with and height:
Next we'll position the TextInstance. We'll want to adjust the Text so that it is always centered, and line-wraps with the size of the button.
To do this:
Select TextInstance
Click the Alignment tab
Set Margin to 20
Click the Fill Dock button
Alternatively you can set each individual value on the Text by following these steps:
Select TextInstance
Change its Horizontal Alignment to Center
Change its Vertical Alignment to Center
At this point the Text is vertically and horizontally centered within its boundaries, but we want to have the boundaries centered within the Button. To do this:
Keep TextInstance selected
Change the X Units to Pixels From Center
Change the X Origin to Center
Change X to 0
Now let's make it centered on the Y as well:
Keep the TextInstance selected
Change the Y Units to Pixels From Center
Change the Y Origin to Center
Change Y to 0
Finally, let's make the width of the text match the width of the button. For the Text we'll actually leave a border around the edge so the Text doesn't line wrap right against the edge of the button. To do this:
Keep the TextInstance selected
Change the Width Units to Relative to Parent
Change Width to -40. This means the actual width of the Text is 40 pixels less than the actual width of its container. Since the button is centered this means a 20 pixel border on the left and 20 on the right (20+20=40).
Buttons are typically wider than they are tall. To match this common layout, let's set some variables on the Button:
Select the Button component
Change Width to 120
Change Height to 36
Notice that whenever you change these values, the contained objects (text and colored rectangle) adjust automatically.
Now that we have a component created, we can add instances of this component the same way we have added standard elements. To do this:
Create a new Screen. I'll call mine MainMenu
Drag+drop the Button component into the Screen
We can now resize and position the Button instance. We can reuse our Button component to create multiple instances. Each instance can be adjusted by changing its X, Y, Width, and Height values.
We can change top level variables on the Button such as X, Y, Width, and Height, but we cannot change variables on instances within the Button - all of our buttons currently display "Hello" text.
The next tutorial shows how to use exposed variables to further customize each button instance.
Width and Width Units set explicitly to give the text a margin
