# Create flow with overlay UI

#### **What to learn**? 

* Using overlay scene.
* Using API to invoke scene actions.

#### **Scenario**

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZJ28VtPEX2p9Olffp%2F-LXZJ5B0OzUmJ_eKaS0a%2Ft2_0.gif?alt=media\&token=e96885b5-9b2a-4efb-ba7f-5e8310f35c46)

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.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8YQhG1Axc2S8fr%2Ft2_1.png?alt=media\&token=b5f4ee31-0cf9-4df7-9280-935ca9320e02)

| 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.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8_XoepyrLXxeke%2Ft2_2.png?alt=media\&token=8f14e9ea-3754-4b70-991d-aff19646ce0a)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8aAdAtPSOEEWsc%2Ft2_3.png?alt=media\&token=8aff97f1-2c0f-488b-9e43-84096ea07e2a)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8bvDAXzByM96Bx%2Ft2_4.png?alt=media\&token=9c9ee615-4469-4005-9231-ae13005bcffd)

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.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8cnpVnghVGJ7Ji%2Ft2_5.png?alt=media\&token=0b446871-c9a9-4ff6-aef4-d84909609ed8)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8eZrcyhay_AG47%2Ft2_7.png?alt=media\&token=f6fd865f-056f-4f3c-b69a-1fb761bdd46f)

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"**.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8fRJ7mMVFYEwpg%2Ft2_8.png?alt=media\&token=e21360c7-8c57-440e-90cb-183d7db00375)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8g7TTHQWiM5sUJ%2Ft2_9.png?alt=media\&token=c26ae4de-2613-45eb-bd00-a70c63422578)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZF3M4Ca3rMmXPHyGe%2F-LXZF8oHSYzAi0UlnADH%2Ft2_10.png?alt=media\&token=1d7a51ae-7c99-434e-90da-4e54c64f7d76)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZF3M4Ca3rMmXPHyGe%2F-LXZF8oJi0lymCzwp8PE%2Ft2_11.png?alt=media\&token=ecdfaa37-def6-4f57-956b-2f032c7e0a3c)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZF3M4Ca3rMmXPHyGe%2F-LXZF8oK6ZRo9Ryw4s9T%2Ft2_12.png?alt=media\&token=b1d3e04f-26c5-4423-8c5e-67e2534295f0)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXY3P4BV7muoeZjfcDV%2F-LXY3n8hi0jsINncBecw%2Ft2_10.png?alt=media\&token=241f0143-6065-4b3a-b10c-c3a872b1d215)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZFnrY0kaf24Db5ckO%2F-LXZGUyAsL3IcKUCbG6r%2Ft2_15.png?alt=media\&token=179e953e-2d0b-441c-9eca-af7024d00a71)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZFnrY0kaf24Db5ckO%2F-LXZGUyBXB1U3Ckvi6F3%2Ft2_16.png?alt=media\&token=a2c2f19f-4ac9-45c8-9cde-078bd4e27c86)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZFnrY0kaf24Db5ckO%2F-LXZH7rUBnSumn8NdiI9%2Ft2_14.png?alt=media\&token=e12ff135-e5b2-47c8-bf9b-82442d63d63e)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZFnrY0kaf24Db5ckO%2F-LXZGUyCmxQGt1B7OQR7%2Ft2_18.png?alt=media\&token=e0f515a3-330e-4e9c-bf50-76602aaa4cbc)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZFnrY0kaf24Db5ckO%2F-LXZH7rVBsGZTifYLkwj%2Ft2_17.png?alt=media\&token=e53be833-5466-468f-937c-d97d0eceee21)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZFnrY0kaf24Db5ckO%2F-LXZGUyBXB1U3Ckvi6F3%2Ft2_16.png?alt=media\&token=a2c2f19f-4ac9-45c8-9cde-078bd4e27c86)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZHTj46E7bRpHCx4dk%2F-LXZHWoTF6Y9XIPY0CbV%2Ft2_19.png?alt=media\&token=aa42a6f2-a607-4d99-a592-a8641d834918)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZHTj46E7bRpHCx4dk%2F-LXZHWoUw55HJedE-ipS%2Ft2_20.png?alt=media\&token=5196beb2-3a9e-410c-8015-11f4a10db4d3)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZNGiZMG-Tomwsn_pD%2F-LXZS-DsZXX1fofoddeG%2Ft2_21.png?alt=media\&token=e1981ac4-c39b-48a1-98dd-9a3124771b68)

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).

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZNGiZMG-Tomwsn_pD%2F-LXZS-Dtwo3RFsjaPP7a%2Ft2_22.png?alt=media\&token=62cf9358-1187-43d5-9f31-f0f4a2a04ef9)

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

```csharp
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**.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZNGiZMG-Tomwsn_pD%2F-LXZS-Due-7304vS2p-f%2Ft2_23.png?alt=media\&token=92e47923-cdca-4e8e-ae4b-9e53a8d1974a)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZNGiZMG-Tomwsn_pD%2F-LXZS-Dvg2y41bvvEl2L%2Ft2_24.png?alt=media\&token=3eb29af7-4b4e-4396-b847-522cd335b375)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZNGiZMG-Tomwsn_pD%2F-LXZS-Dw6E_9W2Z6l6Sx%2Ft2_25.png?alt=media\&token=05ad513c-3356-4763-8c15-5d380c5d31d3)

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

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZNGiZMG-Tomwsn_pD%2F-LXZS-DxpTGFmIu0y5Bn%2Ft2_26.png?alt=media\&token=65f2fb9c-9ba1-4116-be3b-59ea4f1e73b7)

29\. All steps completed. You can play.

![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXZJ28VtPEX2p9Olffp%2F-LXZJ5B0OzUmJ_eKaS0a%2Ft2_0.gif?alt=media\&token=e96885b5-9b2a-4efb-ba7f-5e8310f35c46)