Tutorial: Modify UI 01 How to Load a UI Canvas Using Flow Graph
Tutorial: Modify UI 01 How to Load a UI Canvas Using Flow Graph This tutorial is the first tutorial in the Creating an Options Menu tutorial series and walks you through the steps to load a canvas using Flow Graph, including creating a new level, creating a Flowgraph Entity, and using Flow Graph to load a canvas. At the end of the tutorial you will have loaded a pre-existing canvas using Flow Graph. The Your First Game Menu tutorial series briefly touches upon Flow Graph in the Testing Your UI tutorial, but in this tutorial we’ll create a Flow Graph from scratch. You will learn how to do the following:
Create a new level Create a Flowgraph Entity Use Flow Graph to load a canvas
Prerequisites Before starting the Creating an Options Menu series of tutorials, it is recommended that you have familiarized yourself with the concepts introduced in the Your First Game Menu tutorial series. Additionally, you must meet the following prerequisites.
It is assumed that you are running on Windows (64-bit). In the file paths mentioned below, /lumberyard represents the path to your local Lumberyard installation folder. For reference, the sample canvases used in this tutorial series are located in dev/SamplesProject/Levels/Samples/UIEditor_Sample/UI.
* This tutorial requires you use the SamplesProject supplied with the Lumberyard.
Step 1: Create a New Level The first step in the tutorial is to create a level that we’ll use for the remainder of the tutorial series. To create a new level in the Lumberyard Editor 1. In the Welcome to Lumberyard Editor screen, click the New level button. If the welcome screen isn’t displayed, click File>New. 2. In the New Level dialog, name your level optionsMenu. 3. Select a Heightmap Resolution of 128x128 and click OK.
4. The Generate Terrain Texture will appear. Select 512x512 for Texture Dimensions and click OK.
You have now created a new level. Note: that the specific heightmap and terrain texture settings mentioned above aren’t specific to our UI needs – other settings would work fine as well.
Step 2: Create a FlowgraphEntity After creating a new level, you will create a FlowgraphEntity. To use Flow Graph to load our canvas, we to create an entity in the level that we can associate our Flow Graph with. To Create a FlowgraphEntity 1. In the Objects tab of the Rollup Bar, in the Objects section, click the Entity button. a. If the Rollup Bar isn’t visible, click View>Rollup Bar.
2. In the Browser section, expand the Default folder, and left-click and drag FlowgraphEntity into the Viewport.
3. Left-click again in the Viewport to place the FlowgraphEntity in the level.
4. With the FlowgraphEntity still selected, scroll down the Rollup Bar and left-click the Entity: FlowgraphEntity section to expand it. 5. In the Entity: FlowgraphEntity section of the Rollup Bar, click the Create button in the Flow Graph section.
6. Give your Flow Graph a name, I used the name UI-01, or use the default by clicking OK.
You have now created a Flowgraph Entity and placed it in your level.
Step 3: Use Flow Graph to Load a Canvas This final step in the tutorial will show you how to load a canvas using Flow Graph. To Use Flow Graph to Load a Canvas 1. If the Flow Graph window isn’t already open, click View, Open View Pane, Flow Graph. Note: that the Flow Graph pane may already be visible. Check the main Editor window and ensure that the Flow Graph pane isn’t docked. 2. Verify that you see the Graphs pane (typically docked in the lower-left corner of the Flow Graph window, If not, click the View option in navigation bar and verify that the Graphs option is checked.
3. In the Graphs pane, expand Level, Entities and select the FlowgraphEntity that you created. a. In a new level, this will be the only entity listed, otherwise it will have the name that you provided in Step 2: Create a FlowgraphEntity. b. If you didn’t provide a name, the default name scheme is “FlowgraphEntity1”, “FlowgraphEntity2”, etc.
4. Add the Game:Start node to the entity’s Flow Graph. In the Components pane. If not visible, verify that Components is checked in the View menu. Expand the Game category, and drag the Start node into the Viewport.
Alternate Ways to add nodes: a. Or, right-click in the Viewport and select Add Node, Game, Start. b. Or, use the Quick Node Create feature by left-clicking in the Viewport and hit the ‘Q’ key on your keyboard and start typing “Game:Start”. When you see “Game:Start” show up in the pop-up menu, hit the enter key to select it.
5. Add the UI:Canvas:Load node to the Flow Graph, In the Components pane expand UI>Canvas>Load, and drag the Load node to the Viewport.
6. Connect output port of Game:Start to Activate of UI:Canvas:Load. 7. In the UI:Canvas:Load node, double-click the CanvasPathname port and type the following path: Levels/Samples/UIEditor_Sample/UI/UiSample.uicanvas 8. Right-click on an empty area inside the UI:Canvas:Load node, Rename and add “UISampleCanvas” in the input box. This will help us down the line when our Flowgraph network becomes complex.
9. In the main Editor window, click File, Save to save your changes. I named my saved file UI-0.
10. Enter Game Mode by clicking Game, Switch to Game (Ctrl+G). And when you run the game, you should see this:
Congratulations! You have successfully loaded a canvas using Flow Graph.
Related Tasks and Tutorials Now that you have loaded a canvas in Flow Graph, continue on to the next tutorial in the Creating an Options Menu series:
Modify UI 02 Creating the Window Overlay Modify UI 03 Options Menu Layout Modify UI 04 Adding setting panels and buttons.
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.
Create a new level Create a Flowgraph Entity Use Flow Graph to load a canvas
Prerequisites Before starting the Creating an Options Menu series of tutorials, it is recommended that you have familiarized yourself with the concepts introduced in the Your First Game Menu tutorial series. Additionally, you must meet the following prerequisites.
It is assumed that you are running on Windows (64-bit). In the file paths mentioned below, /lumberyard represents the path to your local Lumberyard installation folder. For reference, the sample canvases used in this tutorial series are located in dev/SamplesProject/Levels/Samples/UIEditor_Sample/UI.
* This tutorial requires you use the SamplesProject supplied with the Lumberyard.
Step 1: Create a New Level The first step in the tutorial is to create a level that we’ll use for the remainder of the tutorial series. To create a new level in the Lumberyard Editor 1. In the Welcome to Lumberyard Editor screen, click the New level button. If the welcome screen isn’t displayed, click File>New. 2. In the New Level dialog, name your level optionsMenu. 3. Select a Heightmap Resolution of 128x128 and click OK.
4. The Generate Terrain Texture will appear. Select 512x512 for Texture Dimensions and click OK.
You have now created a new level. Note: that the specific heightmap and terrain texture settings mentioned above aren’t specific to our UI needs – other settings would work fine as well.
Step 2: Create a FlowgraphEntity After creating a new level, you will create a FlowgraphEntity. To use Flow Graph to load our canvas, we to create an entity in the level that we can associate our Flow Graph with. To Create a FlowgraphEntity 1. In the Objects tab of the Rollup Bar, in the Objects section, click the Entity button. a. If the Rollup Bar isn’t visible, click View>Rollup Bar.
2. In the Browser section, expand the Default folder, and left-click and drag FlowgraphEntity into the Viewport.
3. Left-click again in the Viewport to place the FlowgraphEntity in the level.
4. With the FlowgraphEntity still selected, scroll down the Rollup Bar and left-click the Entity: FlowgraphEntity section to expand it. 5. In the Entity: FlowgraphEntity section of the Rollup Bar, click the Create button in the Flow Graph section.
6. Give your Flow Graph a name, I used the name UI-01, or use the default by clicking OK.
You have now created a Flowgraph Entity and placed it in your level.
Step 3: Use Flow Graph to Load a Canvas This final step in the tutorial will show you how to load a canvas using Flow Graph. To Use Flow Graph to Load a Canvas 1. If the Flow Graph window isn’t already open, click View, Open View Pane, Flow Graph. Note: that the Flow Graph pane may already be visible. Check the main Editor window and ensure that the Flow Graph pane isn’t docked. 2. Verify that you see the Graphs pane (typically docked in the lower-left corner of the Flow Graph window, If not, click the View option in navigation bar and verify that the Graphs option is checked.
3. In the Graphs pane, expand Level, Entities and select the FlowgraphEntity that you created. a. In a new level, this will be the only entity listed, otherwise it will have the name that you provided in Step 2: Create a FlowgraphEntity. b. If you didn’t provide a name, the default name scheme is “FlowgraphEntity1”, “FlowgraphEntity2”, etc.
4. Add the Game:Start node to the entity’s Flow Graph. In the Components pane. If not visible, verify that Components is checked in the View menu. Expand the Game category, and drag the Start node into the Viewport.
Alternate Ways to add nodes: a. Or, right-click in the Viewport and select Add Node, Game, Start. b. Or, use the Quick Node Create feature by left-clicking in the Viewport and hit the ‘Q’ key on your keyboard and start typing “Game:Start”. When you see “Game:Start” show up in the pop-up menu, hit the enter key to select it.
5. Add the UI:Canvas:Load node to the Flow Graph, In the Components pane expand UI>Canvas>Load, and drag the Load node to the Viewport.
6. Connect output port of Game:Start to Activate of UI:Canvas:Load. 7. In the UI:Canvas:Load node, double-click the CanvasPathname port and type the following path: Levels/Samples/UIEditor_Sample/UI/UiSample.uicanvas 8. Right-click on an empty area inside the UI:Canvas:Load node, Rename and add “UISampleCanvas” in the input box. This will help us down the line when our Flowgraph network becomes complex.
9. In the main Editor window, click File, Save to save your changes. I named my saved file UI-0.
10. Enter Game Mode by clicking Game, Switch to Game (Ctrl+G). And when you run the game, you should see this:
Congratulations! You have successfully loaded a canvas using Flow Graph.
Related Tasks and Tutorials Now that you have loaded a canvas in Flow Graph, continue on to the next tutorial in the Creating an Options Menu series:
Modify UI 02 Creating the Window Overlay Modify UI 03 Options Menu Layout Modify UI 04 Adding setting panels and buttons.
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.
