Introduction
Starting with r370 we are introducing a new feature, Flow Charts. In the editor, a flow chart allows you to:
- Create nodes
- Add arbitrary data to those nodes
- Stablish logical connections between the nodes
Later, at runtime, it is possible to create multiple instances of a flow chart and use the new Flowchart Controller plugin to navigate through the nodes. Each instance will keep it's state independently, namely the current node.
Since event sheets are the main method of managing any kind of logic in C3, flow charts themselves don't have any functionality to perform logic, instead they only serve as data holders and to model the connections between the nodes. Any logic that can be associated with the current state of a flow chart is handled by events.
Possible applications
This kind of data structure can be used to model any kind of system that might look like a tree structure, like dialog trees, skill trees or quest trees in an RPG. It could also be used as a state machine to manage the logic behind objects in a game that have moderately complex behaviours, like a boss or mini boss would have in a shoot 'em up game.
Those are just some examples I could come up off the top of my head and certainly not the only applications.
Creating a flow chart
To create a flow chart, just do so through the Project bar by bringing up the context menu in the new Flow charts sub folder and selecting the Add Flow chart option.
Editing a flow chart
Double clicking on a flow chart item in the Project bar will open a new tab with a Flow chart view where it is possible to edit it.
Some of the basic editing options are the following:
- Adding nodes
- The context menu that comes up by clicking on any empty space in the flow chart will have the "Insert node" option, which will create a new node in that position.
- Deleting nodes
- The context menu that comes up by clicking on any empty space in a node will have the "Delete node" option, which will delete the corresponding node.
- Adding node outputs
- A newly created node has one output, which has a name and a value. By clicking on the "Add" link at the bottom of a node, it is possible to add as many outputs as needed to a node.
- Deleting node outputs
- A node output can be deleted by bring up the context menu of the output and choosing the "Delete output" option. Nodes must have at least one output.
- Edit output name
- The name of an output can be edited by double clicking it or by bringing up the context menu and choosing the "Edit name" option.
- Edit output value
- The value of an output can be edited by double clicking it or by bringing up the context menu and choosing the "Edit value" option.
- Connecting nodes
- Each output of a node can be connected to the input of another node. To do so:
- tap and hold on the starting input or output icon
- drag to the other input or output
- release the pointer device
- Disconnecting nodes
- Connected nodes can be disconnected by bringing up the context menu option in the corresponding input or output and choosing the "Unlink" option
- Edit a node's tag
- Every node has a tag property which can be used at runtime to identify it.
- Sorting outputs
- By tapping and holding an output and then dragging it it is possible to give it a different position in the node.
Asides from those options, nodes can also be moved by tapping and holding the caption of the node and resized by tapping and holding the borders of the node.
Moving and resizing is limited by other nodes.
Properties Bar
The Properties bar shows another view of the properties of a flow chart and more importantly the individual nodes. At the moment of writing there is only one option which can only be edited through the properties bar and not the nodes themselves.
That is the "Start Node" property which indicates which should be the default starting node when a new flow chart instance is created at runtime.
Using any of the "Reset" actions will also set the current node of a flow chart as the one set as the starting one.
Flow chart controller plugin
The plugin is used to instantiate flow charts at runtime, navigate through them, extract data and eventually release them when no longer needed.
Actions
- Start flow chart & Start flow chart by name
- Used to instantiate a new flow chart from the ones defined in the editor. The newly created flow chart starts at the node defined as the starting one. A tag needs to be passed when starting a flow chart to be able to control it later.
- End flow chart & End flow chart by tag
- Used to release all resources associated with a flow chart. The first action releases the currently active flow chart, while the "by tag" variant allows you to release any other flow chart.
- Reset flow chart & Reset flow chart by tag
- Reset a flow chart to it's initial state. The first action resets the currently active flow chart while the "by tag" variant targets a specific one. The current node is set as the one marked as the starting one in the editor.
- Set flow chart
- Sets a flow chart instance as the currently active one. Other actions, conditions and expressions will work according to the active flow chart. Some expressions can receive a flow chart tag as argument to work according to that specific flow chart rather than the active one.
- Go to next node
- Uses an index or a name and will follow the corresponding output into the next node.
- Go to any node
- Uses a tag to just jump to that node ignoring all connections.
- Go to previous node
- Goes to the previous node that was navigated to with one of the previous actions.
- Go to parent node
- uses an index or a tag to go to the parent of the current node. In this action the index or tag is only meaningful if a node has more than one parent.
Conditions
- On any flow chart change
- Triggered when the current flow chart changes.
- On any node change
- Triggered when the current node changes.
- On tagged node change
- Triggered when the current node changes and it's tag matches the one specified.
- On tagged node change by flow chart
- Triggered when the current node changes and it's tag matches the one specified, in the flow chart specified.
- On any node change by flow chart
- Triggered when the current node changes in the flow chart specified.
- Is at start node
- Check if the current node is the starting one.
- Is at start node by flow chart
- Check if the current node is the starting one, in the specified flow chart.
- Has flow chart
- Check if the plugin instance has a flow chart for the specified tag.
Expressions
- GetCurrentFlowchartTag
- Get the tag of the current flow chart.
- GetCurrentNodeTag
- Get the tag of the current node in the current flow chart. An optional flow chart argument can be passed to get the same value of another flow chart instance.
- GetCurrentNodeOutputCount
- Get the number of outputs in the current node of the current flow chart. An optional flow chart argument can be passed to get the same value of another flow chart instance.
- GetCurrentNodeOutputNameAt
- Get the name of an output in the current node of the current flow chart. Pass in an index or a name as argument. An optional flow chart argument can be passed to get the same value of another flow chart instance.
- GetCurrentNodeOutputValueAt
- Get the value of an output in the current node of the current flow chart. Pass in an index or a name as argument. An optional flow chart argument can be passed to get the same value of another flow chart instance.
- GetCurrentNodeParentCount
- Get the amount of parent nodes the current node in the current flow chart has. An optional flow chart argument can be passed to get the same value of another flow chart instance.
- GetCurrentNodeParentTag
- Get the tag of the parent of the current node in the current flow chart. In the case of having more than one parent an index can be specified to choose which tag to get. An optional flow chart argument can be passed to get the same value of another flow chart instance.
- GetCurrentNodeParentIndex
- Get the index of the parent of the current node in the current flow chart. In the case of having more than one parent a tag can be specified to choose which index to get. An optional flow chart argument can be passed to get the same value of another flow chart instance.
Example project
Lastly, make sure to check out the example browser for the new example, it is a moderately complex project, showing a possible use for this new feature. It is exactly 50 events, so it will work on the free edition.