Create flow with overlay UI

What to learn?

Using overlay scene.
Using API to invoke scene actions.

Scenario

The game flow start with a main scene with menu. The menu have a new game button to start a new game and a settings button goto settings. In gaming scene, it has a control ui with a pause button. It will enter pause scene after press the pause button. The pause also have a settings button which navigate to settings scene. There also a end game button in gaming scene will will call a script to navigate to game-ending scene. In game-ending scene, a button will allow to bring back to main scene.

Steps

1. We will have the following scenes in this example.

Scene Name

Type

Description

Main

Base

The start scene

Main UI

Overlay

Overlay UI scene on main scene

Game

Base

Game playing scene

Game Control UI

Overlay

Control UI in game playing scene

Pause UI

Overlay

Pause UI in game playing scene

Game End

Base

Game ending scene

Settings

Overlay

Settings scene

2. Follow last tutorial to create a bootstrap scene and add a Scene Flow Manager to the scene.

3. Open Scene Flow Editor and add the 3 base scenes to the graph.

4. Connect the nodes shown. From Start > Main > Game Play > Game End and back.

5. Add the Main UI scene as overlay to the graph. Connect the overlay port to the overlay scene input port. This let the overlay scene loaded on top of the base scene.

7. Add the remains overlay UI scenes and connect shown. The basic route is completed.

8. Then, we need to create an action in Main UI scene that trigger the route from Main to Game Play. Select Main UI scene. Add a new action in the inspector and named it "Play".

9. Connect the action port "Play" from Main UI node to the trigger port "To Game Play".

10. Repeat for Game Play Control UI and Game Pause UI scene node. Add the "End the Game" and "Exit to Main" actions.

11. Connect the action ports to the trigger ports. "End the Game" to "Game End" and "Exit to Main" to "Main".

12. The flow graph is completed. We need to connect the scene actions now.

13. Open Main UI scene. Add a SceneActionManager from create component menu.

14. Add a new connection. Select action "Play". Drag and drop the new game button gameobject to the object field.

15. Add another connection. Select "To Settings". Drag and drop the settings button gameobject to the object field.

16. Open Game Control UI scene. Add a SceneActionManager from create component menu.

17. Add a new connection. Select "To Game Play Pause UI". Drag and drop the pause button gameobject to the object field.

18. Open Game Pause UI scene. Add a SceneActionManager from create component menu.

19. Add a new connection. Select "To Settings UI". Drag and drop the settings button gameobject to the object field.

20. Open Settings UI scene. Add a SceneActionManager from create component menu.

21. Add a new connection. Select "Back". Drag and drop the back button gameobject to the object field.

22. Most of the flow is working now except the flow from Game Play to Game End. We will use API call for this.

23. Open scene Game Play UI. Select SceneActionManager game object and add a new script called DemoPlay.cs (You can use any name for your choice).

24. We will invoke the API function SceneActionManager.CallActionWithName() in order to execute the action defined in the graph.

public void OnButtonClick()
{
    // Get the current actionManager
    SceneActionManager actionManager = SceneActionManager.GetCurrentActionManager();
          
    // Call the action named "End the Game"
    actionManager.CallActionWithName("End the Game");
}