www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

Amazon Lumberyard: UI Editor

Final product image
What You’ll Be Creating

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.

UI Editor Menu

The second way is through the UI Editor icon available in the Editor toolbar.

UI Editor Menu Option 2

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.

UI Editor UI

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 devSamplesProjectLevelsSamplesUIEditor_SampleUI folder and select the UiSample.uicanvas file. Click Open. A shiny interface will appear as follows:

UI Editor with a loaded canvas

The UI Editor consists of the following panes:

  1. Main menu: Access to the main UI Editor features. 
  2. Toolbar: Contains commonly used features such as Select, Move, Rotate, local coordinates or UI canvas resolution.
  3. Viewport: Displays the UI elements available in the UI canvas. You can directly manipulate the UI elements inside the canvas.
  4. 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.
  5. 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.
UI Editor with loaded canvas - Hierarchy and Properties pane

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:

UI Editor with loaded canvas - Properties pane

Likewise, if you select any of the buttons, the Properties menu will change accordingly (it is context sensitive).

UI Editor with loaded canvas - Properties pane - Button selected

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.

Add a new Button prefab

A new button should appear inside the viewport.

UI Canvas - the new Button element

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.

UI Canvas - Button element new position

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.

UI Canvas - Button properties

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:

UI Canvas - Button Text properties

Select the new Button inside the Hierarchy pane and modify the Sprite path. Navigate to SamplesProjecttexturesUIEditor_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:

UI Editor - Button ImageType

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:

  1. Hover: Activated when you mouse over the button.
  2. Pressed: Activated when you click on a specific button.
  3. Disabled: Activated when you disable the button.
UI Editor - Button States

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 SamplesProjecttexturesUIEditor_Sample and select the ButtonNormal.

Now change the Pressed state by performing the same step as before, but now select the ButtonPressed file.

UI Editor - Button Sprites

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..

UI Editor - Button - Save as PreFab

Name the prefab CustomButton and click Save.

Button PreFab Save dialog

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.

UI Editor - Add the CustomButtom PreFab

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).

New and empty UI Canvas

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. 

Empty UI Canvas - Anchor properties

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.

Empty UI Canvas - Anchors - Description

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.

Empty UI Canvas - Offsets properties

Using that configuration, you can now change the viewport resolution to any given resolution and the background Image will change accordingly.

Background

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 devSamplesProject 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.

UI Editor - Image and background properties

Text

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.

UI Editor - Text properties

Multiple Buttons

You have a title, but you lack buttons for user interaction. Therefore, the next step is to create three buttons:

  1. Start Game: Button to load your first level.
  2. Options: to display the options canvas (more on this later).
  3. About: to display information regarding the game developers.

For each button, you will use different configurations.

  1. Start Game: You will use the Button prefab, and you don’t need to modify the default configurations (only the Text name).
  2. 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). 
  3. 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:

UI Editor - Text description
If you have any issue in achieving the previous configuration, go to the next section and I’ll walk you through it.

Buttons Configuration

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.

UI Editor - Text Background and Buttons layout

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.

Challenge

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.

Conclusion

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.