Menu
Lumberyard
Legacy Reference

Loading Canvases in the Flow Graph Editor

This topic references tools and features that are legacy. If you want to use legacy tools in Lumberyard Editor, disable the CryEntity Removal gem using the Project Configurator or the command line. To learn about the latest features, see the Amazon Lumberyard User Guide.

You can use the Flow Graph Editor to load and unload UI canvases.

For more information about using flow graphs, see Flow Graph System.

For more information about the flow graph nodes you can use to make elements and components respond to user input, see UI Flow Graph Nodes.

You can load canvases in the Flow Graph Editor using either the UIe node set (recommended) or the legacy UI node set. You can also load a canvas automatically using a component entity (without using flow graph). These procedures are described in this section.

Use the following procedure to load canvases using the UIe node set. This is the recommended method of loading canvases in flow graph.

To load a canvas in the Flow Graph Editor using the UIe node set

  1. In Lumberyard Editor, click Tools, Flow Graph.

  2. In the Flow Graph editor, select a flow graph from the Graphs pane.

  3. Right-click anywhere in the graphs pane and select Add Node, Game, Start.

  4. Right-click anywhere in the graphs pane and select Add Node, UIe, Canvas, LoadIntoEntity.

  5. Right-click the UIe:Canvas:LoadIntoEntity node and select Assign selected entity or Assign graph entity to assign a UI canvas reference entity to the node.

    For more information about assigning a UI canvas reference entity to the node, see Associating Canvases with UI Flow Graph Nodes.

  6. Connect the Game:Start node output to the Activate input on the UIe:Canvas:LoadIntoEntity node.

To use the legacy UI node set to load canvases, use the following procedure.

To load a canvas in the Flow Graph Editor using the legacy UI node set

  1. In Lumberyard Editor, click Tools, Flow Graph.

  2. In the Flow Graph editor, select a flow graph from the Graphs pane.

  3. Right-click anywhere in the graphs pane and select Add Node, Game, Start.

  4. Right-click anywhere in the graphs pane and select Add Node, UI, Canvas, Load.

  5. Connect the Game:Start node output to the Activate input on the UI:Canvas:Load node.

  6. Double-click CanvasPathname in the UI:Canvas:Load node, and type a path in the CanvasPathname text box or use the file browser to navigate to the path. The path is relative to the project folder.

    Note

    You might need to zoom in to be able to edit CanvasPathname.

The following method uses the component entity system to load a canvas, without using any flow graphs.

Using the Component Entity system to load a UI canvas

  1. In the level, create a component entity.

  2. In the Entity Inspector, add to this component entity a UI Canvas Asset Ref to specify the UI canvas and optionally to automatically load it when the level loads.

  3. Select the Load automatically check box.

For more information, see Working with Entities and Components in the Amazon Lumberyard User Guide.

The canvas is automatically loaded when the level loads. It can be referenced from any of the UIe flow graph nodes, as long as they are in a flow graph that belongs to any component entity.