13
Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph editor and how to use it to create game logic. At the end of this tutorial, you will have solid understanding of how the Flow Graph system works. You will learn the following: Flow Graph concepts The Flow Graph editor user interface including its panes and their usage How to navigate in the Flow Graph editor viewport Creating and using graph Modules and Tokens Step 1: Flow Graph core concepts Flow Graph is a visual scripting system which provides game developers access to create and edit game events and logic through the creation of a visually created graph of nodes. Graphs can be simple or complex, from driving gameplay logic to handling game menu navigation. Flow Graph allows designers and artists to change a game’s performance without needing an engineer to write code. For example, using Flow Graph and Lumberyard’s Game Mode, a small team of designers and artists can start prototyping game levels quickly, without writing any code or needing to compile their game project. Engineers can create new Flow Graph nodes, extending the functionality of the Flow Graph editor to give game designers access to game-specific events and functions. This empowers game teams to create whatever they dream of and then quickly iterate on those dreams. Step 2: User Interface walkthrough The Flow Graph editor is a node-based visual editor that can be accessed from the Lumberyard editor’s main toolbar.

Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

  • Upload
    others

  • View
    20

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

editor and how to use it to create game logic. At the end of this tutorial, you will have

solid understanding of how the Flow Graph system works.

You will learn the following:

Flow Graph concepts

The Flow Graph editor user interface including its panes and their usage

How to navigate in the Flow Graph editor viewport

Creating and using graph Modules and Tokens

Step 1: Flow Graph core concepts Flow Graph is a visual scripting system which provides game developers access to

create and edit game events and logic through the creation of a visually created graph

of nodes. Graphs can be simple or complex, from driving gameplay logic to handling

game menu navigation. Flow Graph allows designers and artists to change a game’s

performance without needing an engineer to write code. For example, using Flow

Graph and Lumberyard’s Game Mode, a small team of designers and artists can start

prototyping game levels quickly, without writing any code or needing to compile their

game project.

Engineers can create new Flow Graph nodes, extending the functionality of the Flow

Graph editor to give game designers access to game-specific events and functions.

This empowers game teams to create whatever they dream of and then quickly iterate

on those dreams.

Step 2: User Interface walkthrough The Flow Graph editor is a node-based visual editor that can be accessed from the

Lumberyard editor’s main toolbar.

Page 2: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

Flow Graph walkthrough

1. With Lumberyard opened, click on the Flow Graph button in the editor toolbar.

2. The Flow Graph editor will open with its own menu, toolbar and panels.

1) Canvas View pane: This is the main viewport, where most of the editing

takes place. When a Flow Graph is selected, nodes can be added, deleted,

moved, and linked here.

2) Component List pane: This is a library of all available nodes you can add to

your Flow Graphs.

3) Flow Graph File Tree pane: A hierarchy of all the Flow Graphs in your

project and current level.

Page 3: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

4) Node Properties pane: A context sensitive pane displaying node properties

based on the current selection in the viewport.

5) Search Results pane: Allows you to search for specific nodes in canvas

view

Navigating the viewport:

1. To navigate, click and hold anywhere in the viewport with the right mouse button

and move the mouse.

2. You can also use the viewport’s scrollbars to pan around the view.

3. Use the mouse wheel to zoom in and out.

Selecting Nodes in the Viewport:

1. Nodes can be selected by clicking on them with the left mouse button and

deselected by clicking on empty space in the viewport. Multiple nodes can be

selected by clicking and holding with the left mouse button and dragging a

marquee box around the nodes that you want to select.

2. If a node has an assigned entity, which can be an entity in your game level, then

double-clicking on the node will select that assigned entity in the level.

Page 4: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

Using Right-Click Menus in the Viewport

1. When you right-click in empty graph space in the viewport, a context menu will

be displayed offering options like creating a new node, copy, paste, grouping and

others.

2. Right-clicking on top of a node in the graph displays a context menu that offers

options specific to that node, such as rename and others related to the node’s

input and output channels.

Using the Components pane

1. Flow Graph’s Components pane contains a list of nodes. Each node contains

information about objects in the level or functions to call when activated through

the script. Flow Graph nodes can be pulled from two places: from an entity object

currently in the Perspective Viewport, or from the list of components in the Flow

Graph’s Components pane. In this tutorial, you will be pulling nodes from the

Components pane list.

Page 5: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

2. At the top of the Components pane is a search bar allowing you to search for

nodes by name.

3. To create a new node, simply drag it from the Component pane into the viewport

and a new instance of that node will be added to your graph.

The Flow Graph File Tree pane

This pane is where you will access and open Flow Graph files.

1. Level Flow Graphs: A list of Flow Graph files created in the currently opened

level.

2. Global Flow Graphs: A list of Flow Graph files specific to your project which are

shared and accessible across multiple level files.

Page 6: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

The Input pane

This pane allows you to edit properties on the currently selected node and includes a

description field, which explains what the node is used for.

The Search & Search Results panes

1. Type a string into the “Find what” field in the Search pane, then press the Find All

button. Search results will be displayed in the Search Results pane.

2. Double-click on a search result item to select that node in the graph.

Step 3: Get to know the Flow Graph Module system A Flow Graph module is like a mini Flow Graph that can be used in other normal Flow

Graphs. This is useful for instances where you need to use the same logic multiple

times. For example, if your game logic calls for performing a math operation that is

always the same, but would normally take 10 nodes to construct, you can write that

logic once into a single module, allowing changes to be made more efficiently.

There are two supported module types: Global modules, which once created are

accessible to any Flow Graph file created in your game project, and Level modules,

which are only accessible to the Flow Graph files within the currently opened level.

Page 7: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

To Create a Flow Graph module

1. In Flow Graph Editor, click on File, New FG Module, Level to create a level Flow

Graph module

2. A Save As dialog will appear asking you to create a filename for the new graph

module. Give it a name and click on the Save button.

3. Locate a created module.

The module has start and end nodes by default.

To see an example of a module, take a look at the “Character_Controller_Robot”

global module which is included with the Sample Project.

To create input / output for the modules

1. Select the module for which you would like to add input / output.

Page 8: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

2. Go to Tools > Edit Module.

3. Click New Input, type in a name, and select Input Type to create a new Input.

Page 9: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

Use the same method to create outputs.

4. Check “My_First_Module” from the Graph pane. You can see input and output

are created and applied.

5. To edit created inputs / outputs, you can also select Tools > Edit Module and

Click “Edit Input/Output.”

Page 10: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

6. Take Global Flow Graph Modules > Character_Controller_Robot as an example:

You can see the inputs it uses in the Start_Character_Controller_Robot module

node.

The module logic uses nodes to convert player input into physics impulses that

control the robot character.

Page 11: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

To call a Module

You can call a level or a global module from Flow Graph components.

1. Right click on the main pane to access the context menu: Add Node > Module.

You can see Call_<Global module> and Call<Level_module> on the list.

2. You can also locate modules from the Components Pane > NodeClass > Module

> and then select the module you want to call and drag it on the main pane.

Step 4: Creating and using a Graph Token A Graph Token is a single variable which can be created and used in a level’s Flow

Graph. A Graph Token is only visible and accessible to the graph it was created in. The

token’s variable type can be either a boolean, integer, float, entity ID, Vector 3 or a

string. For example, using a Graph Token you can create a single global mission

variable that can be accessed and modified by almost any node in any Flow Graph.

To create a Graph Token

1. In Flow Graph Editor, click on Tools, Edit Graph Token

Page 12: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

2. In the dialog that appears, click on the New Token button.

3. Type in a name for your token, set the desired variable type, and then click on

the OK button.

To use a Graph Token

Graph tokens are most commonly used by the Mission Game Token nodes which

offer operations like getting, setting, or verifying game token values.

1. Create a Game:Start node

2. Create a Mission:GameTokenSet node

3. Connect the output of the Game:Start node into the Activate of the

Mission:GameTokenSet node.

4. Double-click on the Token input of the Mission:GameTokenSet node and

type in the name of the Graph Token you wish to set.

5. Double-click on the TokenValue input of the Mission:GameTokenSet node

and type in a new value for the token.

Using the Mission:GameTokenSet node as described above allows the graph to

set the value of the Graph Token to any value at any point within the graph.

Page 13: Tutorial: Introduction to Flow Graph - Amazon S3€¦ · Tutorial: Introduction to Flow Graph This tutorial introduces you to Flow Graph, including its core concepts, the Flow Graph

Congratulations! You now know the features Flow Graph offers and how to build game

logic with the Flow Graph editor.

Related tasks and tutorials Now that you have a basic understanding of Flow Graph and its user interface, continue

on with the rest of this tutorial series which include the following:

Adding triggers and volumes

Using movers

Camera basics

Input controls and debug

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.