1 - The Basics
Last updated
Last updated
This page walks you through the basics of using the Gum UI tool (which we'll refer to simply as Gum for this and all other documentation).
Gum separates its elements into three categories: Screens, Components, and Standard (Behaviors are an advanced topic that we'll skip for these tutorials):
Standard elements represent the building-blocks for screens and components, and all projects use the same set of standard elements. To see the list of elements, expand the Standard tree item. Clicking on any element will display it in the preview window.
Sprite element is selected in the image above. Notice that since a SourceFile is not set, the Sprite renders as a red X.
Note that through plugins the Standard list can be expanded. For example, Gum supports additional standard types through a Skia plugin.
Components are objects which can contain standard elements and instances of other components. Components can be very simple, such as a Label, or very complex, such as an options menu with dozens of items.
Screens are objects which can contain standard elements and instances of other components. Unlike Components, Screens cannot be added to other Screens. Screens exist mainly for organization.
Components and screens are similar - both can contain instances of standard elements, and both can contain other components. The only difference between screens and components is that screens cannot contain other screens.
You can think of screens like a screen in a video game. Examples include a main menu, credits screen, options screen, and level selection screen. You can think of components as elements which are composed of multiple standard elements. Examples include a Button component which is made up of a Sprite instance and a Text instance, or a Logo component which may be made up of multiple Sprites and Text objects.
To create a screen:
Right-click on the Screens tree item and select Add Screen
Enter the name of the new screen - such as MainMenu
The newly-created screen is created and selected
Instances of standard and component elements can be added to screens and components. To add an instance:
Select the destination screen or component. For example, select the MainMenu screen
Push the left mouse button (but don't release it) on the Text item. If you happen to release the mouse button, this will select the Text item, so you need to re-select the destination (MainMenu).
Drag the Text item onto the preview window
Release the mouse button. A new text instance appears in your screen.
Once an instance is a part of a screen or component it can be edited visually in the preview window. The selected instance has eight (8) handles surrounding it. These are called the resize handles and can be used to change the selected instance's width and height.
In the case of the Text object, the resize handles are used to control how the text object performs line wrapping.
You can use the resize handles to resize the instance, or you can simply push the mouse button and drag inside the instance to change its position. Notice that an object's outline is displayed when the cursor is hovering over the instance.
Circle - circle outline. These are usually not used for UI, but can be used if you are defining collision in your Gum objects for a game.
ColoredRectangle - filled-in rectangle. These are often used for solid-colored backgrounds and frames.
Container - invisible object used to contain other objects. These are used to provide margins, change layouts (such as vertical vs horizontal stacking), and to organize your UI.
NineSlice - visual object which uses nine sprites to create a resizable object from a source PNG (or portion of a PNG). The corner sprites (4) are not resized. The top, bottom, left, and right sprites are stretched on one axis. The middle sprite stretches both horizontally and vertically. These are used to create resizable frames.
Polygon - polygon outline which can have any number of points. These are usually not used for UI, but can be used if you are defining collision in your Gum objects for a game.
Rectangle - rectangle outline. These can be used for single-line frames or if you are defining collision in your Gum objects for a game.
Sprite - a visual object which displays a source PNG (or a portion of a PNG). These are used for icons, backgrounds, and other visual objects which are usually not resized dynamically.
Text - a visual object which can display charcters. These are used for any situation where text needs to be displayed such as labels and paragraphs.
