> For the complete documentation index, see [llms.txt](https://docs.digicrafts.com.hk/sceneflow/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digicrafts.com.hk/sceneflow/tutorials/tutorial-2.md).

# Create flow with overlay UI

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

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

#### **Scenario**

![](/files/-LXZJ5B0OzUmJ_eKaS0a)

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.

![](/files/-LXY3n8YQhG1Axc2S8fr)

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

![](/files/-LXY3n8_XoepyrLXxeke)

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

![](/files/-LXY3n8aAdAtPSOEEWsc)

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

![](/files/-LXY3n8bvDAXzByM96Bx)

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.

![](/files/-LXY3n8cnpVnghVGJ7Ji)

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

![](/files/-LXY3n8eZrcyhay_AG47)

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

![](/files/-LXY3n8fRJ7mMVFYEwpg)

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

![](/files/-LXY3n8g7TTHQWiM5sUJ)

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

![](/files/-LXZF8oHSYzAi0UlnADH)

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

![](/files/-LXZF8oJi0lymCzwp8PE)

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

![](/files/-LXZF8oK6ZRo9Ryw4s9T)

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

![](/files/-LXY3n8hi0jsINncBecw)

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

![](/files/-LXZGUyAsL3IcKUCbG6r)

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

![](/files/-LXZGUyBXB1U3Ckvi6F3)

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

![](/files/-LXZH7rUBnSumn8NdiI9)

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

![](/files/-LXZGUyCmxQGt1B7OQR7)

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

![](/files/-LXZH7rVBsGZTifYLkwj)

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

![](/files/-LXZGUyBXB1U3Ckvi6F3)

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

![](/files/-LXZHWoTF6Y9XIPY0CbV)

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

![](/files/-LXZHWoUw55HJedE-ipS)

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

![](/files/-LXZS-DsZXX1fofoddeG)

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

![](/files/-LXZS-Dtwo3RFsjaPP7a)

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

![](/files/-LXZS-Due-7304vS2p-f)

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

![](/files/-LXZS-Dvg2y41bvvEl2L)

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

![](/files/-LXZS-Dw6E_9W2Z6l6Sx)

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

![](/files/-LXZS-DxpTGFmIu0y5Bn)

29\. All steps completed. You can play.

![](/files/-LXZJ5B0OzUmJ_eKaS0a)