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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digicrafts.com.hk/sceneflow/tutorials/tutorial-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.