Create a basic flow

Last updated last month

What to learn?

  • Basic setup to using Scene Flow.

  • Create and editing the Scene Flow graph.

  • Connecting scene actions to UI.

Scenario

Player can start the game with play button in main scene. Then, the game play scene will be loaded. After the game finish, it will back to main scene.

You can find the the finished project in the demo folder.

You can have Video Tutoiral here.

Steps

1. We create two scenes in this tutorial, Game-Main, which have a new game button and Game-Play which have an end game button.

Game Main
Game Play

2. In order to load the scene in runtime. We need to add the scenes in the build settings.

3. Next, create an empty new scene and named it bootstrap.unity. This is the scene contains the Scene Flow Manager and use to control the loading of other scenes.

4. In the scene, create a “Scene Flow Manager”. Right click on the hierarchy and select menu Digicrafts > Scene Flow Manager. Along with Scene Flow manager, a sceneflow.asset file will be created in the same directory. This is the file for storing the scene flow graph.

5. Select the Scene Flow Manager from the hierarchy window and open the Scene Flow Editor by the edit button in inspector.

6. Use the toolbar button ”+Add Base Scene” and add the scenes, Game Main and Game Play, from the list. Or, you can drag and drop the scenes from project windows to Graph Editor windows.

7. Now, you have Game Main and Game Play node on the graph.

8. First connect the Start node to the Game Main node by connecting the output port and input port of the nodes.

9. Then, connect the node from Game Main to Game Play.

10. Last, connecting Game Play back to Game Main.

10. The basic flow is completed. The game flow will start from the Game Main and go to Game Play. Then, back to the Game Main. Close the graph editor and save the scene.

11. Next, we will connect the actions to the UIs. Open Game Main.unity scene.

12. Create a Scene Action Manager from create menu (Digicrafts > Scene Action Manager).

13. The Scene Action Manager is use to connecting the UIs and the actions defined in the scene flow graph. Select the Scene Action Manager and add a new action by pressing the “Add Connection” button.

14. In the dropdown, you will see a list of actions defined in the graph. “To Game Play“ is defined by the connection between Game Main and Game Play node. “Back” is a build in action that means go back to previous scene. Select “To Game Play” from the dropdown.

15. Drag and drop the New Game Button from the scene to the object field. This connects the UI click event to the action “To Game Play”.

16. Next, open Game Play.unity Scene. Here we have a UI Button for bringing back to main scene.

17. Repeat steps 9 to 11 to create a connection.

18. This time, we select “To Game Main” from the dropdown.

19. Drag and drop the UI Button from the scene to the object field.

20. Open the Bootstrap.unity again. Play and test the scene. You can try click on button and it will going to game playing scene. Press the Back To Main button and it will back to main menu.