Tutorial: Options Menu Layout
Tutorial: Options Menu Layout This tutorial walks you through the steps to add a window title and avatar selection section, including adding the window title, adding the user profile section, configuring scroll box for avatar selection, and previewing your changes. At the end of the tutorial you will have an options menu with a window title and avatar selection section. Further content will be added in subsequent tutorials in this tutorial series, Creating an Options Menu. You will learn how to do the following:
Add the window title Add the user profile section Configure scroll box for avatar selection Preview your changes
Prerequisites
It is recommended that you have completed the previous tutorial in the Creating an Options Menu series: How to Create the Options Menu Overlay
* This tutorial requires you use the SamplesProject supplied with the Lumberyard.
Step 1: Add the window title The first step in the tutorial is to add a title to the options window. To add the window title and user profile section 1. In the Lumberyard Editor, open the UI Editor by clicking View> Open View Pane> UI Editor. 2. In the UI Editor, select File> Open Canvas and open optionsMenu.uicanvas in the dev/SamplesProject/Levels/optionsMenu folder.
3. In the Hierarchy pane, right-click the Background element and select New> Element from prefab> Text.
4. In the Properties pane, under Anchors, click the following Anchor Preset to anchor the text to the topmiddle of the window:
5. In the Properties pane, change the text value to “Settings” under Text>Text.
6. Click the Color swatch and copy and paste the following value into the HTML field: #9ac7d6
You have now added a window title to the options window. The title should read “Settings” and positioned centered at the top of the window frame. Your canvas should look similar to this:
Step 2: Add the User Profile Section After you have added the window title, you will add the user profile section of the options screen. This is an area of the window where users can set their username and avatar, for example. To add the user profile section 1. In the Hierarchy pane, right-click the Background element and select New, Empty element. a. Double-click the newly-created element and name the element UserPanel.
2. Right-click UserPanel and select New, Element from prefab, Text. a. Double-click the newly-created element and name the element UserText.
3. Right-click UserPanel and select New, Element from prefab, TextInput. a. Double-click the newly-created element and name the element UserName.
4. Right-click UserPanel and select New, Element from prefab, ScrollBox. a. Double-click the newly-created element and name the element AvatarSelection.
At this point, your Hierarchy should look like this:
5. Select the UserPanel element, then select the Resize gizmo and drag along the X-axis (red) in the Viewport and resize the element to have a width of about 600px
Note: you can watch the Width value change in the Properties pane as you drag the mouse and verify its value.
6. Select UserText and, in the Properties pane, select the middle-left Anchor Preset:
7. In the text properties panel change the text field to “User”. Text> text.
8. In the Hierarchy pane, select AvatarSelection and, in the Properties pane, select the middle-right Anchor Preset:
9. In the Hierarchy pane, select UserPanel and, in the Properties pane, select the top-middle Anchor Preset:
10. In the Hierarchy pane, select UserPanel, then select the Move gizmo, and drag the element downwards, just below the “Settings” window title (using the Y-axis/green arrow).
a. You can also take this time to adjust the positioning of other elements within the UserPanel element, such as UserText, UserName, and AvatarSelection. You have now added the user profile section to the options window. Note that this section of the window isn’t complete yet – we will continue working on this section in subsequent tutorials in the Creating an Options Menu series. For reference, your canvas should look similar to this:
Step 3: Configure scrollbox for avatar selection After you added the user profile section, you will configure the scrollbox for avatar selection. To configure the scrollbox for avatar selection 1. In the Hierarchy pane, delete all of the Image child elements of AvatarSelection, Mask, Content. 1. These are default content elements that are included in the ScrollBox prefab, but we will use our own images instead.
2. Right-click the Content element and select New, Element from prefab, Image. 3. With the new Image element selected in the Hierarchy pane, hit Ctrl+C (or select Edit, Copy) to copy the image element to the clipboard. 4. Hit Ctrl+V four times, or select Edit, Paste as sibling four times. Your AvatarSelection hierarchy should look like this:
5. Starting with the first Image child element of Content, in the Properties pane, in Image, Sprite path, click the … button and select scroll_box_icon_1.dds in the textures/uieditor_sample/ folder.
1. Select each of the following Image child elements of Content and repeat this step, selecting the following images, in order: i. scroll_box_icon_2.dds ii. scroll_box_icon_3.dds iii. scroll_box_icon_4.dds iv. scroll_box_icon_5.dds
6. In the Hierarchy pane, select AvatarSelection and in the Properties pane, right click the Image component and select Remove component Image.
7. In the Hierarchy pane, select the Mask element, and, in the Properties pane, click the Browse button in Image, Sprite path.
1. Select circle_mask.dds in the textures/uieditor_sample folder.
8. In the Properties pane, in Mask, check Use alpha test.
9. With the Mask element still selected, select the Resize gizmo, and drag left along the X-axis until, in the Properties pane, the Offsets, Left value reads around 40 pixels.
10. Drag downwards along the Y-axis until, in the Properties pane, the Offsets, Top value reads around 25 pixels.
Step 4: Add mouse-hover Frame 1. In the Hierarchy pane, right-click AvatarSelection and select New, Element from prefab, Image.
2. Double-click the newly created Image element in the Heirarchy Panel and rename it to FrameImage.
3. In the Properties pane, under Image, Sprite path click the Browse button choose circleframe.dds in the textures/uieditor_sample folder.
4. With the Resize gizmo still selected, drag left along the X-axis until the frame just touches the border of the Mask element (or, approximately when the Offsets, Width value reads around 120 pixels).
5. Drag downwards along the Y-axis until the frame just touches the border of the Mask element (or, approximately when the Offsets, Height value reads around 150 pixels).
6. In the Hierarchy pane, click the AvatarSelection element.
7. In the Properties pane, in ScrollBox> Interactable> States> Hover> Color, select FrameImage in the Target drop-down box.
8. Click File, Save to save your progress thus far.
You have now completed the design of your avatar selection scrollbox.
Step 5: Preview Your Changes After you added the user profile section, you will preview your UI changes. The UI Editor features a Preview feature that allows you to preview your UI at different target resolutions and explore “interactable” components, such as buttons, text input, scroll boxes, etc., all without requiring any scripting. Note that this step in the tutorial series has no direct impact on the final UI that you create. It’s a tool that you can leverage to help you quickly test and prototype your canvases without leaving the UI Editor. To preview your changes 1. In the UI Editor, click the Preview button in the upper-right of the window.
2. Change the target resolution by clicking the drop-down menu next to Preview canvas size in the Preview Toolbar (typically located at the top of the window). a. If the Preview Toolbar isn’t visible, click View and ensure that Preview Toolbar is checked. b. The User Viewport Size drop-down option will change the target canvas resolution as the UI Editor window size changes. c. For target resolutions larger than the window can accommodate, note that the view will be scaled to fit the window and the scale is shown as Canvas scale in the Preview Toolbar.
3. Click and drag the mouse on the scroll box you created.
4. Type in the User text input field.
Congratulations! You have now added a window title and a user profile section. We also explored the Preview feature – a powerful tool for quickly prototyping UI without any scripting required. For reference, your canvas should look similar to this:
Related Tasks and Tutorials Now that you have added a window title and a user profile section, continue on to the next tutorial in the Creating an Options Menu series:
Modify UI Elements 04 Add Settings Panels and buttons Modify UI Elements 05 Opening the menu options Modify UI Elements 06 Closing and Saving
Want to learn more about Lumberyard? Visit the complete Lumberyard Tutorials Page. We’d love to hear from you! Head to our Tutorial Discussion forum to share any feedback you have, including what you do or don’t like about our tutorials or new content you’d like to see in the near future.
Add the window title Add the user profile section Configure scroll box for avatar selection Preview your changes
Prerequisites
It is recommended that you have completed the previous tutorial in the Creating an Options Menu series: How to Create the Options Menu Overlay
* This tutorial requires you use the SamplesProject supplied with the Lumberyard.
Step 1: Add the window title The first step in the tutorial is to add a title to the options window. To add the window title and user profile section 1. In the Lumberyard Editor, open the UI Editor by clicking View> Open View Pane> UI Editor. 2. In the UI Editor, select File> Open Canvas and open optionsMenu.uicanvas in the dev/SamplesProject/Levels/optionsMenu folder.
3. In the Hierarchy pane, right-click the Background element and select New> Element from prefab> Text.
4. In the Properties pane, under Anchors, click the following Anchor Preset to anchor the text to the topmiddle of the window:
5. In the Properties pane, change the text value to “Settings” under Text>Text.
6. Click the Color swatch and copy and paste the following value into the HTML field: #9ac7d6
You have now added a window title to the options window. The title should read “Settings” and positioned centered at the top of the window frame. Your canvas should look similar to this:
Step 2: Add the User Profile Section After you have added the window title, you will add the user profile section of the options screen. This is an area of the window where users can set their username and avatar, for example. To add the user profile section 1. In the Hierarchy pane, right-click the Background element and select New, Empty element. a. Double-click the newly-created element and name the element UserPanel.
2. Right-click UserPanel and select New, Element from prefab, Text. a. Double-click the newly-created element and name the element UserText.
3. Right-click UserPanel and select New, Element from prefab, TextInput. a. Double-click the newly-created element and name the element UserName.
4. Right-click UserPanel and select New, Element from prefab, ScrollBox. a. Double-click the newly-created element and name the element AvatarSelection.
At this point, your Hierarchy should look like this:
5. Select the UserPanel element, then select the Resize gizmo and drag along the X-axis (red) in the Viewport and resize the element to have a width of about 600px
Note: you can watch the Width value change in the Properties pane as you drag the mouse and verify its value.
6. Select UserText and, in the Properties pane, select the middle-left Anchor Preset:
7. In the text properties panel change the text field to “User”. Text> text.
8. In the Hierarchy pane, select AvatarSelection and, in the Properties pane, select the middle-right Anchor Preset:
9. In the Hierarchy pane, select UserPanel and, in the Properties pane, select the top-middle Anchor Preset:
10. In the Hierarchy pane, select UserPanel, then select the Move gizmo, and drag the element downwards, just below the “Settings” window title (using the Y-axis/green arrow).
a. You can also take this time to adjust the positioning of other elements within the UserPanel element, such as UserText, UserName, and AvatarSelection. You have now added the user profile section to the options window. Note that this section of the window isn’t complete yet – we will continue working on this section in subsequent tutorials in the Creating an Options Menu series. For reference, your canvas should look similar to this:
Step 3: Configure scrollbox for avatar selection After you added the user profile section, you will configure the scrollbox for avatar selection. To configure the scrollbox for avatar selection 1. In the Hierarchy pane, delete all of the Image child elements of AvatarSelection, Mask, Content. 1. These are default content elements that are included in the ScrollBox prefab, but we will use our own images instead.
2. Right-click the Content element and select New, Element from prefab, Image. 3. With the new Image element selected in the Hierarchy pane, hit Ctrl+C (or select Edit, Copy) to copy the image element to the clipboard. 4. Hit Ctrl+V four times, or select Edit, Paste as sibling four times. Your AvatarSelection hierarchy should look like this:
5. Starting with the first Image child element of Content, in the Properties pane, in Image, Sprite path, click the … button and select scroll_box_icon_1.dds in the textures/uieditor_sample/ folder.
1. Select each of the following Image child elements of Content and repeat this step, selecting the following images, in order: i. scroll_box_icon_2.dds ii. scroll_box_icon_3.dds iii. scroll_box_icon_4.dds iv. scroll_box_icon_5.dds
6. In the Hierarchy pane, select AvatarSelection and in the Properties pane, right click the Image component and select Remove component Image.
7. In the Hierarchy pane, select the Mask element, and, in the Properties pane, click the Browse button in Image, Sprite path.
1. Select circle_mask.dds in the textures/uieditor_sample folder.
8. In the Properties pane, in Mask, check Use alpha test.
9. With the Mask element still selected, select the Resize gizmo, and drag left along the X-axis until, in the Properties pane, the Offsets, Left value reads around 40 pixels.
10. Drag downwards along the Y-axis until, in the Properties pane, the Offsets, Top value reads around 25 pixels.
Step 4: Add mouse-hover Frame 1. In the Hierarchy pane, right-click AvatarSelection and select New, Element from prefab, Image.
2. Double-click the newly created Image element in the Heirarchy Panel and rename it to FrameImage.
3. In the Properties pane, under Image, Sprite path click the Browse button choose circleframe.dds in the textures/uieditor_sample folder.
4. With the Resize gizmo still selected, drag left along the X-axis until the frame just touches the border of the Mask element (or, approximately when the Offsets, Width value reads around 120 pixels).
5. Drag downwards along the Y-axis until the frame just touches the border of the Mask element (or, approximately when the Offsets, Height value reads around 150 pixels).
6. In the Hierarchy pane, click the AvatarSelection element.
7. In the Properties pane, in ScrollBox> Interactable> States> Hover> Color, select FrameImage in the Target drop-down box.
8. Click File, Save to save your progress thus far.
You have now completed the design of your avatar selection scrollbox.
Step 5: Preview Your Changes After you added the user profile section, you will preview your UI changes. The UI Editor features a Preview feature that allows you to preview your UI at different target resolutions and explore “interactable” components, such as buttons, text input, scroll boxes, etc., all without requiring any scripting. Note that this step in the tutorial series has no direct impact on the final UI that you create. It’s a tool that you can leverage to help you quickly test and prototype your canvases without leaving the UI Editor. To preview your changes 1. In the UI Editor, click the Preview button in the upper-right of the window.
2. Change the target resolution by clicking the drop-down menu next to Preview canvas size in the Preview Toolbar (typically located at the top of the window). a. If the Preview Toolbar isn’t visible, click View and ensure that Preview Toolbar is checked. b. The User Viewport Size drop-down option will change the target canvas resolution as the UI Editor window size changes. c. For target resolutions larger than the window can accommodate, note that the view will be scaled to fit the window and the scale is shown as Canvas scale in the Preview Toolbar.
3. Click and drag the mouse on the scroll box you created.
4. Type in the User text input field.
Congratulations! You have now added a window title and a user profile section. We also explored the Preview feature – a powerful tool for quickly prototyping UI without any scripting required. For reference, your canvas should look similar to this:
Related Tasks and Tutorials Now that you have added a window title and a user profile section, continue on to the next tutorial in the Creating an Options Menu series:
Modify UI Elements 04 Add Settings Panels and buttons Modify UI Elements 05 Opening the menu options Modify UI Elements 06 Closing and Saving
Want to learn more about Lumberyard? Visit the complete Lumberyard Tutorials Page. We’d love to hear from you! Head to our Tutorial Discussion forum to share any feedback you have, including what you do or don’t like about our tutorials or new content you’d like to see in the near future.
