# Create a basic flow **What to learn**? * Basic setup to using **Scene Flow.** * Create and editing the **Scene Flow** graph. * Connecting scene actions to UI. **Scenario** ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSmpnqTTjR7cYmZdfF%2F-LXSmsjHP1viMYFcqP34%2F18.gif?alt=media\&token=37f4f888-ddc6-494e-ac62-382e8d33d58c) Player can start the game with play button in main scene. Then, the game play scene will be loaded. After the game finish, it will back to main scene. {% hint style="info" %} You can find the the finished project in the demo folder. {% endhint %} {% hint style="success" %} You can have Video Tutoiral here. {% endhint %} #### Steps 1\. We create two scenes in this tutorial, **Game-Main**, which have a new game button and **Game-Play** which have an end game button. ![Game Main](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSZFtQNFzrKE-X0PBd%2F-LXSZhKZVTOQVzSmuBwi%2Fimage013.gif?alt=media\&token=186042e3-b1e5-499d-8a86-17cf9c832035)
Game Play
2\. In order to load the scene in runtime. We need to add the scenes in the build settings. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSZFtQNFzrKE-X0PBd%2F-LXS_k_oxl8sFzKXWBGS%2F5.png?alt=media\&token=bb54aac7-549e-418b-b3c9-832980fd5077) 3\. Next, create an empty new scene and named it **bootstrap.unity**. This is the scene contains the **Scene Flow Manager** and use to control the loading of other scenes. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSZFtQNFzrKE-X0PBd%2F-LXS_sE_FYhz92KhmKBZ%2F6.png?alt=media\&token=14128531-3db4-449a-a653-35d22197de01) 4\. In the scene, create a **“Scene Flow Manager”.** Right click on the hierarchy and select menu ***Digicrafts > Scene Flow Manager***. Along with Scene Flow manager, a sceneflow\.asset file will be created in the same directory. This is the file for storing the scene flow graph. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSW98sjqClNPDtNJJS%2F-LXSXQrbec0EgZqU8rrN%2Fimage020.png?alt=media\&token=9689600b-e228-4142-8ce1-a5162f731776) 5\. Select the **Scene Flow Manager** from the hierarchy window and open the **Scene Flow Editor** by the edit button in inspector. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSW98sjqClNPDtNJJS%2F-LXSXef8RMOgY9nToG19%2Fimage022.png?alt=media\&token=28ae563d-148b-4816-ba88-244cbcc101ea) 6\. Use the toolbar button ”***+Add Base Scene***” and add the scenes, **Game Main** and **Game Play,** from the list. Or, you can drag and drop the scenes from project windows to Graph Editor windows. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSW98sjqClNPDtNJJS%2F-LXSXef9Jpo8ov6_rUMP%2Fimage024.png?alt=media\&token=8e8a3257-c22f-4b8a-9ace-79899db3084f) 7\. Now, you have **Game Main** and **Game Play** node on the graph. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSZFtQNFzrKE-X0PBd%2F-LXSda0Tbzvf3NaZLZoN%2F7.png?alt=media\&token=5dba1c2b-329f-4a45-a12c-caab34b9e38e) 8\. First connect the **Start** node to the **Game Main** node by connecting the output port and input port of the nodes. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSZFtQNFzrKE-X0PBd%2F-LXSda0UyyEzcUAtSJP7%2F8.png?alt=media\&token=eef04b86-5eb7-4000-9cb4-ab9e20ccb056) 9\. Then, connect the node from **Game Main** to **Game Play**. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSZFtQNFzrKE-X0PBd%2F-LXSda0Vz2FMAr1sKTUo%2F9.png?alt=media\&token=120fbc06-adc3-4d0a-b1b5-d1224faedd4e) 10\. Last, connecting **Game Play** back to **Game Main**. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSZFtQNFzrKE-X0PBd%2F-LXSda0WFjCDEp2uT24J%2F10.png?alt=media\&token=95f384d0-52d6-473d-98d1-d542d5aee593) 10\. The basic flow is completed. The game flow will start from the **Game Main** and go to **Game Play.** Then, back to the **Game Main.** Close the graph editor and save the scene. 11\. Next, we will connect the actions to the UIs. Open **Game Main.unity** scene. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSlPPMTyP3uoD0INvH%2F-LXSlSsM297P6arrH3YN%2F11.png?alt=media\&token=376a4836-bf0b-4789-9c6a-159cddd10a54) 12\. Create a **Scene Action Manager** from create menu (***Digicrafts > Scene Action Manager***). ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSlPPMTyP3uoD0INvH%2F-LXSlSsOBte6ZQrz1TBI%2F12.png?alt=media\&token=e2947cfa-0890-44cc-a7d5-0b0587174b17) 13\. The **Scene Action Manager** is use to connecting the UIs and the actions defined in the scene flow graph. Select the **Scene Action Manager** and add a new action by pressing the ***“Add Connection”*** button. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSlz9Ark1uiQlzJDlt%2F-LXSm1-zUpLYLvo_CJh2%2F11_5.png?alt=media\&token=e161746e-3038-4358-b205-6cd5d5bc6dc4) 14\. In the dropdown, you will see a list of actions defined in the graph. “**To Game Play**“ is defined by the connection between **Game Main** and **Game Play** node. “**Back**” is a build in action that means go back to previous scene. Select “**To Game Play**” from the dropdown. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSlPPMTyP3uoD0INvH%2F-LXSlSsPe-6zBavrnYpG%2F13.png?alt=media\&token=d79054f9-67e7-4d9d-9500-eeb1e76102e4) 15\. Drag and drop the **New Game Button** from the scene to the object field. This connects the UI click event to the action “**To Game Play”**. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSlPPMTyP3uoD0INvH%2F-LXSlSsQpy1wou14VphU%2F14.png?alt=media\&token=5a195b15-29b4-408a-b499-7bbe582a01da) 16\. Next, open **Game Play.unity** Scene. Here we have a UI Button for bringing back to main scene. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSlPPMTyP3uoD0INvH%2F-LXSlSsRpQ4Y15bn_jc1%2F15.png?alt=media\&token=5f0465b1-04cc-47c1-80d9-2df4e63e0a85) 17\. Repeat **steps 9 to 11** to create a connection. 18\. This time, we select **“To Game Main”** from the dropdown. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSlPPMTyP3uoD0INvH%2F-LXSlSsSeDGwQdi4c33M%2F16.png?alt=media\&token=380dc152-3bfe-4972-b57e-6ea774f5dc91) 19\. Drag and drop the UI Button from the scene to the object field. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSlPPMTyP3uoD0INvH%2F-LXSlSsTciMnZPVohYB9%2F17.png?alt=media\&token=551f3a40-6a37-4b9f-b214-b24de37c002e) 20\. Open the **Bootstrap.unity** again. Play and test the scene. You can try click on button and it will going to game playing scene. Press the Back To Main button and it will back to main menu. ![](https://2173864829-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LX7wZveSDgKTUIzUGok%2F-LXSmpnqTTjR7cYmZdfF%2F-LXSmsjHP1viMYFcqP34%2F18.gif?alt=media\&token=37f4f888-ddc6-494e-ac62-382e8d33d58c)