Note that the reference does not include the base directory or an initial backslash. The file extension for UI canvases should be included.

Transcription

1 We are going to be loading UI canvases by filename, let's get our file structure and naming conventions defined first. Lumberyard will generally be looking at your project's base directory as a starting point, assume that the project name for this tutorial is UITutorial, the base directory for this project will be:...lumberyard\someversionnumber\dev\uitutorial\ Create a folder in the base directory to hold Script Canvas (SC) graphs, call it 'sc'. Save all SC graphs here. Either create a sub-folder for each level in the project or append the level name to all SC graphs to keep the 'sc' folder organized across the entire project. Create a second folder in the base directory to hold UI Canvases, call it 'ui'. Like before, create sub-folders or include the level names in the filenames; save all UI canvases in this folder. UI canvases are loaded in relation to the base directory. Assume we have created a level named 'ui_basics' within the project and are organizing all files by creating a subdirectory for each level. The correct reference to a UI canvas will be: ui\ui_basics\filename.uicanvas Note that the reference does not include the base directory or an initial backslash. The file extension for UI canvases should be included. Open the UI Editor in the 'Tools' menu, a blank canvas is created by default. The 'Hierarchy' and 'Properties' panels of the editor should be visible, they are by default. Right-click in the Hierarchy panel and create a new empty element, Double-click on the new element in the Hierarchy panel and rename it to 'background_image'. With the element selected, it's properties should be visible in the Properties panel, this empty element has an ID and a Transform2D component by default. Change the elements transform anchors so that the element covers the entire screen, the correct setting for this behavior is the bottom-right icon in Transform2D > Anchors. When set, Left and Top anchors should be at 0%, and Bottom and Right anchors at 100%. Add a new 'image' component to 'background_image' in the Properties panel.

2 A white texture should cover the entire UI canvas. Set the texture's color to black. The canvas should look like the following: Left click an empty area of the Hierarchy panel to deselect the renamed background_image. In the Properties panel the general canvas should now display. Default draw order for a canvas is '0'. Canvases with higher draw orders are displayed in front of those canvases with lower draw orders. Tip: As a general design principle, for any background canvas, set the draw order to '1', leave others at the default '0'. Load canvases at any time, they will be drawn behind the background. When it is time to draw the canvas in front of the background, change the draw order to '2' or higher. For this example, the draw order has been set to '1'. Save the completed canvas as 'background.uicanvas' in the appropriate directory. You may close the UI Editor at this point.

3 A preview of referencing the background UI canvas from Script Canvas: Create an new entity in the level named 'UIControl' and add a Script Canvas component to it.

4 Open the Script Canvas Editor in the 'Tools' menu, a blank SC graph is created by default. The Node Palette, Node Inspector and Variable Manager panels need to be visible. Enable them in the 'Views' menu. Open 'Global Preferences' in the 'Edit' menu of Script Canvas. Show nodes excluded from preview should be checked. Everything is ready to create a SC graph that loads the background canvas. In the Node Palette, search for the 'On Graph Start' node under Utilities and add it to the graph. Search for 'Load Canvas' under UI Canvas Manager and add that node to the graph as well. There may be multiple Load Canvas nodes, be sure to use the one from UI Canvas Manager only. Connect On Graph Start to Load Canvas. For pathname, supply the proper reference to the background canvas:

5 ui\ui_basics\background.uicanvas Note that the reference does not include the base directory or an initial backslash. The file extension for UI canvases should be included. The completed SC graph: Save the completed graph as 'uicontrol.scriptcanvas' in the appropriate directory. You may close the Script Canvas Editor at this point. In the Lumberyard Editor, select the UIControl entity and in the script canvas component of the Entity Inspector, select 'uicontrol.scriptcanvas' as the Script Canvas Asset. Save the level and press Ctrl+G to start the level. The background canvas should display over the game world.

6

7