# Exploring the Scene Flow Editor

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXOeIYe-0LI9Qhdpk0F%2F-LXOeMpRsp2u_rdLgoN6%2Fimage052.png?alt=media\&token=a26a276a-4508-430e-9708-cc330f7d15c6)

The **Scene Flow Editor** is use to create and design the flow of your game. It is a visual node based editor. Each node represents a scene in your project. Each graph will have a start node that represents the bootstrap scene and the flow will start here.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXOeIYe-0LI9Qhdpk0F%2F-LXOeMpSEH_pY7LGQu_8%2Fimage054.png?alt=media\&token=fb451e5e-2954-4ba3-b2b5-b6f550fa7e2f)

Beside the start scene, there are 2 types of scene node, base scene and overlay scene. When a base scene loaded, it will replace the previous scene. On the other hand, the overlay scene will add on top of other scene.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXOeIYe-0LI9Qhdpk0F%2F-LXOeMpTKAb_azRhXnu-%2Fimage056.png?alt=media\&token=4f89b1b2-18bb-4eec-b99f-38f3621740da)

You can add a new scene node by the drop down button on the toolbar. Or, press the shortcut **Key “A”**popup the dropdown menu. A list of available scene will show in the drop down menu. Select to add on the scene. 

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSn6fSMPyUhXqKwq3a%2F-LXSnhEVAQCSGBDHhcwF%2F1.gif?alt=media\&token=8d8c8491-9131-4e95-b823-a8b35ac56214)

After adding the scenes, you can connect the node by drag and drop from the output port to the input port of the node.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXOeIYe-0LI9Qhdpk0F%2F-LXOeMpUoXutdsGFpury%2Fimage058.png?alt=media\&token=ee18eb5b-2136-4839-b33e-76ab885922ba)

You can select the node and change the properties from the inspector. Toggle the inspector by clicking on the arrow at each side of the toolbar. Or, pressing **Key“N”** to toggle the inspector.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXOeIYe-0LI9Qhdpk0F%2F-LXOeMpVGDbod9GO2Eas%2Fimage060.png?alt=media\&token=fb85cbeb-d5cf-40bc-8ad1-d50ac2a1e93a)

You can find the common properties for each node.

| **Property**       | **Description**                                                                                                                                                                                                                   |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Scene              | Scene asset of this node represents.                                                                                                                                                                                              |
| Load Async         | Enable/disable loading the Scene asynchronously in the background.                                                                                                                                                                |
| Preloading Scene   | <p>Set the preloading scene when loading the sene. <br><strong>Default:</strong> use the default loading scene. <br><strong>Custom:</strong> use custom loading scene. <br><strong>None:</strong> don't use preloading scene.</p> |
| Wait before appear | The time (seconds) before the scene appear after loading completed.                                                                                                                                                               |
| Custom Name        | Custom name appear on the node. The scene name will be used if empty.                                                                                                                                                             |
| Description        | The description appears below each node.                                                                                                                                                                                          |

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXOeIYe-0LI9Qhdpk0F%2F-LXOeMpWmhrxB-K9OLw8%2Fimage062.png?alt=media\&token=6185a6d9-7375-47fb-85f9-4898cdc13d32)

| **Property** | **Description**                                                                                              |
| ------------ | ------------------------------------------------------------------------------------------------------------ |
| Overlays     | Show the overlay scene connected to this scene node. You can change the loading order for each overlay here. |
| Routes       | Show the routes connected to this node.                                                                      |
| Actions      | Custom action defined in this scene node. You can use the actions in each scene to control the flow.         |