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");
}     

25. Save the file. Select the Goto Winner Scene button in the scene Game Play UI.

26. Open inspector and navigate to events section. Add a new button click event.

27. Drag and drop the SceneActionManager game object to the object field.

28. From the function drop down menu, select OnButtonClick. The OnButtonClick should be invoked when player click on the button.

29. All steps completed. You can play.