In this tutorial in our Amazon Lumberyard series, I'll show you how to use the UI Editor and its features. You will add and configure several elements such as background, text labels, and buttons. Then you'll learn how to create a user interface menu from scratch. Finally, you'll be faced with a challenge.
Note that you are advised to read the rest of the series in order to fully understand the notations from this part.
Who Should Read This Tutorial Series?
This tutorial series is primarily aimed at two groups of game developers: those who are completely unfamiliar with game engines at all, and those who are familiar with other game engines (such as Unity, Unreal Engine, or Cry Engine), but not with Lumberyard. I assume that you have some knowledge of computer graphics notation, so I won't exhaustively cover all notations.
The UI Editor
The UI Editor can be opened using two main ways; the first is through the Main menu using the link at View > Open View Pane > UI Editor.
The second way is through the UI Editor icon available in the Editor toolbar.
Open the UI Editor using one of the aforementioned options.
After the UI Editor opens, you will notice that it will be empty. When the UI Editor opens, by default it loads an empty canvas.
In order to better understand how the UI Editor is organized, we will open the Lumberyard UI canvas sample. To do so, click File > Open. Now navigate to the dev\SamplesProject\Levels\Samples\UIEditor_Sample\UI folder and select the UiSample.uicanvas file. Click Open. A shiny interface will appear as follows:
The UI Editor consists of the following panes:
- Main menu: Access to the main UI Editor features.
- Toolbar: Contains commonly used features such as Select, Move, Rotate, local coordinates or UI canvas resolution.
- Viewport: Displays the UI elements available in the UI canvas. You can directly manipulate the UI elements inside the canvas.
- Hierarchy: Displays all elements inside the UI canvas using a hierarchical view. If you select an item inside the viewport, that same element will be highlighted inside the Hierarchy view.
- Properties: Displays the properties of each individual selected element. The properties are context sensitive, and it will display different properties for buttons, backgrounds, or text labels.
Note that you can increase or decrease the size (by zooming in and out) of the viewport by using the mouse wheel.
If you select the Background element inside the Hierarchy, the following Properties are presented:
Likewise, if you select any of the buttons, the Properties menu will change accordingly (it is context sensitive).
Adding a Button to the UI Canvas
With the UI Editor opened, select the Background element in the Hierarchy pane. Right click on it and select New > Empty from prefab... > Button.
A new button should appear inside the viewport.
You will notice that the new Button does not have the same appearance as the Play, Options, and Quit buttons.
Modify the Button Appearance
To start modifying the button appearance, let us first move the button to a new location. The new location should be under the Quit button. To perform this action, select the Button (using the viewport or the Hierarchy); then select the Move tool and finally, place it in the desired location.
Next, you need to change the Button text. Select Text under the Button inside the Hierarchy pane. Notice that the Property pane changed accordingly. Change the Text property to About.
You can also modify the text Color, transparency (Alpha), Font path, Font size, or Font effects, and both Vertical text alignments and Horizontal text alignments. As mentioned above, these properties are context sensitive, so they change taking into consideration your chosen element.
Now, change the Color to white and the Alpha value to 1. Then double click on the default Font path. Navigate to the fonts folder and select the notosans-regular.xml file. Finally, change the Font effect from drop_shadow to default. Your button configurations should be as follows:
Select the new Button inside the Hierarchy pane and modify the Sprite path. Navigate to SamplesProject\textures\UIEditor_Sample, select the ButtonNormal file, and click Open.
In order to hide the image, you need to change its Alpha. Change the ImageType to Stretched, the Color to white, and the Alpha to 0. The final configuration is:
Set the Button's States
A button without user interaction is not a button. The next step is to add some interaction to the buttons. In Lumberyard, acting with a button is performed using the button's states. Modifying the states is a great way to send feedback to the user to let them know when they are manipulating a specific button inside the viewport.
Each button can have three states:
- Hover: Activated when you mouse over the button.
- Pressed: Activated when you click on a specific button.
- Disabled: Activated when you disable the button.
Let us start by changing the Hover state. Select the Sprite folder and change its value to ButtonNormal. By default, you should be at the last used folder. If not, navigate to SamplesProject\textures\UIEditor_Sample and select the ButtonNormal.
Now change the Pressed state by performing the same step as before, but now select the ButtonPressed file.
At this moment, the next logical step was to test the interactions just created. However, we will leave that for a later step (in the next tutorial). For now, you will just believe that what you just performed work as intended.
Create a Button Prefab
When you need more than one type of element, you are advised to create, use and reuse prefabs. This can be very useful if you need to reuse your element across several canvases inside your project.
To save the button as a prefab, right click on it, and select Save as Prefab...
Name the prefab CustomButton and click Save.
Now that you already created a prefab, you can delete the button from the Hierarchy.
How about the new prefab? How can we add it again? To add the prefab, you should click on the New... button and select Element from prefab > CustomButton.
Your button should appear exactly in the same place where it was previously configured.
Create a UI Canvas From Scratch
At this point you already know the basics of the UI Editor and its properties. Therefore, it is now time to create a UI Canvas from scratch.
Open the UI Editor and start by adding an Image prefab ( New... > Element from prefab > Image).
A white square is placed inside the viewport. It is now time to configure it. Select the Image and double click on its name. Change it to Background.
With the Background selected, look at the Properties pane. Our objective is to fit the Background image into the complete viewport, so we must control its properties under the Transform2D properties.
Select the Anchor presets and choose the bottom right one.
By doing so, you are saying that the Image should cover the entire viewport. The Anchor specifies proportional positions within the parent element's rectangle.
Have you noticed the blue anchors that just appeared?
The blue anchors inside the white rectangle indicate the anchor points. Using the aforementioned configuration, the anchors will be automatically placed near the four corners.
However, you should already have noticed that the white rectangle size is different than the default resolution. To solve this issue, you must modify all Offsets to 0.
Using that configuration, you can now change the viewport resolution to any given resolution and the background Image will change accordingly.
Your next step is to add a pretty background image into the Background element. Download this image and place it inside your project folder (for example under the dev\SamplesProject folder).
Note that, if you don't place the image file inside our project, Lumberyard will return a "Texture Missing Error". Proceed and select it from the Sprite path under the Image section of the Properties pane.
Add a Text prefab (New... > Element from prefab > Text). Change its Text name to "AWESOME gamedevelopment.tutsplus.com GAME" and its color to a light green. The Font size should be 60, and it should be positioned near the top.
You have a title, but you lack buttons for user interaction. Therefore, the next step is to create three buttons:
- Start Game: Button to load your first level.
- Options: to display the options canvas (more on this later).
- About: to display information regarding the game developers.
For each button, you will use different configurations.
- Start Game: You will use the Button prefab, and you don't need to modify the default configurations (only the Text name).
- Options: You should download this image and use it as your button. Don't forget to copy the image into your project folder (as mentioned before).
- About: You should import the CustomButton prefab and change its Color to red.
What you are expected to create is something similar to the following:
You need to create three buttons with different properties. Let's start with the easy one, the CustomButton prefab. To import that button, you need to click on New... > Element from prefab > CustomButton. The button should appear. It is now just a matter of positioning it.
The second button should be Start Game. Add a Button prefab (New... > Element from prefab > Button) and change its Text name to Start Game. If you want, you can modify additional properties of this button. Is up to you to do so.
The third button, Options, is a bit trickier than the previous two. Start by adding another Button prefab (New... > Element from prefab > Button). Change its Sprite Path to the options_icon.png file. After this step, you will see the button image but with the wrong Height size. Proceed and change the Height value to 200.
Your last step is to save the UI canvas. Select File > Save as and name it MyCanvases.
To Be Continued
As previously mentioned, there are some steps that were not properly tested (like the button states and further user interaction). The main reason relates to the fact that you need to use FlowGraph to test those interactions. Therefore, the next tutorial in the series will be focused on FlowGraph, and we will come back to dissect this part.
You are now challenged to create a new UI canvas for the About and Options buttons. In the next tutorial, you will be asked to connect everything.
This concludes this tutorial on Lumberyard. You learned how to use the UI Editor and its properties. You learned how to add and configure several UI elements as Image, Text, and Button. You are now able to create custom menus from scratch and configure its appearance. If you have any questions or comments, as always, feel free to drop a line in the comments.