Flow Chart Editor
Flow charts are a new feature in wade. You can construct your game from predefined blocks and string them together to achieve any functionality you wish. Each wade scene has it's own flow chart. In addition, all scene objects also have their own personal flow chart, making it easy to separate internal behavior from the overall flow of your game.
Above you can see an example flow chart. The chart is a collection of boxes, each of which performs a specific action. Boxes can be linked together by connections, this dictates the order your program will run in.
Note that a box may have more than one connection to another box. Without some extra information, we might not know what behavior to expect from our program. It is also possible for a box to have more than one connection coming into it, for example, two different actions could trigger the same sound to be played.
Getting started
Great, we can make flow charts, but how? Let's keep things simple. Here we will look at how to use the flowchart editor for the global scene flowchart. We will stick to using boxes in the basic category. There are separate categories for scene objects and isometric objects but we will look at them a bit later.
The first thing we need to do is open the flow chart editor. The scene's flowchart editor can be found in the scene properties (Edit Flow Chart button).
Now we get our first glimpse of the editor. The main editor is split into two sections. On the left you will see your chart, consisting of boxes and connections. You will notice a starting box has been created for you and is bordered by a white line. The white line shows that this box is currently selected.
The right side of the editor shows the details of the currently selected box. At the top we have the box id, a start box button and a delete button. The box id is a unique identifier that you cannot change. It is mostly used internally by the graph so is of little consequence. The start box button lets you set the current box to be the start point, where the flow chart will being executing from. This is what gives our starting box it's slightly octagonal shape, if you untick start box, it becomes a rectangle. You may have only one start box in a graph. Setting a new start box will remove that flag from all other boxes. The x in the top right simply deletes the currently selected box.
The box title and color can be changed at any point to make your chart clearer. Initially, the first box is a code box. We can tell because next to type, the current value is code. At the bottom of the right pane we can see a code box. This contains the code that will be executed. It is show by default for the code box, but is hidden for all other box types. Manually entering code in here will force a type change to code box, this is useful if you want most of a boxes functionality, while customizing it to suit your needs.
Looking at the type button, you can see all the different box types you can choose from. If we go ahead and select the "random" box, we get some new options.
Looking at the image above, you can see we have a new green parameters area with two parameters, Smallest Number and Largest Number. Updating either of these properties instantly updates the code in the dialog box. In the case of the random box, these values represent the range that the random number must fall inside. Looking below we can see a use case of this random box, along with 2 sound boxes. Notice also the box titles, they have been changed to make their purpose more obvious. Like variable names in code, you should try and make the purpose of a box obvious.
The functionality of this chart should be fairly obvious. The random box is the starting point and is our currently selected node. It picks a random number, zero or one in this case, and then plays the song that is on that condition. Notice the box with the number 0 in it. Highlighting over a connection, displays that connections condition. The random box is designed to execute the next box based on the number chosen.
The blue children area which we have not yet discussed, shows all boxes that the current box can execute next. Our random box has two children in this case, and therefore two child connections. The values of these conditions are zero and one. You can set a condition name to anything you want, however in this case it makes sense to keep them as numbers, given that the random box will only trigger a child node based on the generated number.
Custom boxes
There are two different ways to create new functionality. The first is simple but very limiting. A code boxallows you to define any code you want, with no pre existing template. This is good if you just need a unique piece of code that you wont use anywhere else. If however you want a new box that you can reuse, you might want to look at the box type editor. You can open the box type editor for the current box by clicking on the icon to the right of the current box type.
Above we see the "Move to Pos" box display in the type editor. You are not limited to modifying existing types, you can create completely new ones by providing a unique name in the name input.
Looking at this window, there are three main sections; the base code, the update code and the right pane that holds all the other details.
The base code is the functionality of your box. This is the code that will be executed. This particular box moves the specified scene object to a given position. Notice the "__sceneObject__" on the second line of the code. This is a string which will get replaced by one of our parameters, that brings us to the update code.
The update code treats the base code as a template. Specific strings are replaced with parameters provided by the user. This is how the code dialog updates whenever you change a parameter. When designing your own tiles, you will have to decide what parameters you want, and write the update function to fill in your base code template correctly.
