Custom Event Editor: Step Item

A "step" is the main thing you have to deal with when you are creating an event. An event is formed by a series of steps.

Step Item and the basic info 

In this post the step item and the basic info of a step will be introduced.

From (9) to (11), it is the UI of a step item in the main working grid. You can drag the step item and rearrange it as you want. 

(9) The icon indicates the type of the step item. 

(10) The name of the step. It shows the text input in (15) if it is not empty, otherwise the Step ID (13) will be shown here.

(11) The connection dot. An arrow line will be drawn if you click the dot and start dragging. And if you drag the arrow over another step, the 2 steps will be connected.

From (12) to (16), it is the UI shown in the upper part of the editing panel. It is the common part for every step item.

(12) The title of the panel. It shows the name indicating the type of the step selected.

(13) The Step ID. This is the ID that the Loader will use. It is automatically generated when you click to create a new step so for most of the case you don't have to alter it. 

However in some cases you may want to edit it to make the values in some steps more tidy. For example in the Branching step you are required to input the Step ID for each branch, having a meaning Step ID would improve readability. 

Note that after renaming the Step ID of a step item, you may need to reconnect the connections that end in this step. 

(14) The Next Step ID. It indicates the Step ID that the system should load when this step is completed. 

If you drag the dot to connect steps mentioned in (11), this field will be filled in automatically. If you want to set the connection manually you can update this text field.

(15) The Step name. This field is for human read only. The system does not care about it.

It is a good idea to assign a name for each step as you dont want to end up with lots of "step000xxx" steps in the chart.

(16) Waiting Type. It tells the system when it should go to the next step. In most of the case you do not want to change this field as the default value is good enough. But I leave it to be updatable just in case.

If you really want to update the value, please just choose one of these two only.

Auto: The game moves to the next step when the process of the current step is finished.

User Click: The game moves to the next step only if the user clicks in the game.

 

---

Rearrange Connecting Line

When you keep on adding step items to the chart and connecting them, it could become a very complex chart. And you may find that the connecting arrow is not in a good place after you rearrange the step items. In this case you can click on the connecting line to set a pair of better connecting points.

When you click on a connecting line, it will turn red. You can see that there are 2 small squares at the both end of the arrow. You can click and start dragging it.

You will see something like the screenshot above when you are dragging one of the end of the arrow. You can see there are 8 squares appeared in the step that the arrow was pointing to. These are the border points that can be connected to. Drag and move the mouse pointer within one of the square and release the mouse pointer, it will make the connecting line to update its connecting point.

Another method is to click the connecting dot and drag to connect them again. The editor will always find the shortest path to connect between two steps. So in case you have moved and rearranged a lot of steps, making the connecting lines in a mess, you can simply use this method to fix the visual of the lines.