← BACK

This tutorial will provide you with a basic framework to create a Choose Your Own Adventure project, where the user will be taken to a different outcome depending on the choice they make. The path view below shows an overview of how this project branches. 

Download project for this tutorial

Step 1: Project Setup
  1. Create 7 scenes using the following naming conventions:
    1. Scene_01
    2. Scene_02
    3. Choice_scene
    4. Choice_1_scene_01
    5. Choice_1_scene_02
    6. Choice_2_scene_01
    7. Choice_2_scene_02
Step 2: Dialogue Scenes
  1. Select scene_01
    1. Click and drag from the assets panel to add the asset cyoa_d1.png
    2. Name this image character_1_dialogue in the Properties panel. You will see the image appear in the Layers panel. 
      1. Click on the icon in the Layers panel to toggle on the Global Layers functionality. The character_1_dialogue will now appear in every scene of your project. This is an easy way to reuse a gesture without having to re-create it for each scene. We will reuse this image later on in the project and we will go over how to hide it from scenes where it does not need to be used.

    3. Click and drag a Gesture Area from the Elements panel and resize the element to fit the entire canvas. 
      1. Name this element Full Screen Tap in the Properties panel. You will see the element appear in the Layers panel. 
      2. Click on the icon in the Layers panel to toggle on the Global Layers functionality. The Full Screen Tap gesture will now appear in every scene of your project. 
      3. In the Properties panel, use the Add Gesture to Area menu to add a Tap command to this gesture. 
      4. Also in the Properties panel, add a Transition from scene_01 to scene_02. This action requires the user to tap in order for the unit to progress to the next scene. 
  1. Select scene_02
    1. In the Layers panel, locate the character_1_dialogue image and toggle the . This will hide the image from appearing in this scene and provide you with a blank canvas. 
    2. Click and drag from the assets panel to add the asset cyoa_d2.png
    3. Name this element character_2_dialogue in the Properties panel. You will see this image appear in the Layers panel.
      1. Click on the icon in the Layers panel to toggle on the Global Layers functionality. The character_2_dialogue will now appear in every scene of your project. Return to scene_01 and hide the image in the layers panel and then navigate back to scene_02. 
    4. Double check that the Full Screen Tap gesture is present in the Layers panel under Global Layers. You should also see the gesture overlay on the canvas. 
    5. Navigate to the Properties panel for the Full Screen Tap gesture. Add a transition from scene_02 to choice_scene.
Step 3: Choice Scenes
  1. Select choice_scene from the Scenes panel
    1. In the Layers panel, locate the Full Screen Tap and toggle the  image. This will hide the Full Screen Tap gesture from appearing in this scene. Repeat this step for the character_1_dialogue image and character_2_dialogue image. 
    2. Click and drag from the assets panel to add the asset cyoa_choice.png
    3. Name this element choice_image in the Properties panel. You will see this image appear in the Layers panel.
    4. Click and drag a Gesture Area from the Elements panel and resize the element to fit over Choice 1 on the canvas image.
      1. Name this gesture choice_1_tap in the Properties panel. It will appear in the Layers panel under the Scene Layers list. 
      2. In the Properties panel, use the Add An Action menu to add a Tap command to this gesture. 
      3. Also in the Properties panel, add a Transition from choice_scene to choice_1_scene_01. This is where the unit will progress differently depending on the choice the user makes. 
    5. Click and drag a Gesture Area from the Elements panel and resize the element to fit over Choice 2 on the canvas image.
      1. Name this gesture choice_2_tap in the Properties panel. It will appear in the Layers panel under the Scene Layers list. 
      2. In the Properties panel, use the Add An Action menu to add a Tap command to this gesture. 
      3. Also in the Properties panel, add a Transition from choice_scene to choice_2_scene_01. This is where the unit will progress differently depending on the choice the user makes.

        1. Select choice_1_scene_01 from the Scenes panel
          1. In the Layers panel, locate the character_2_dialogue image and toggle the  image. This will hide the image from appearing in this scene.
          2. You should now see the character_1_dialogue image on the canvas, in addition to the Full Screen Tap gesture. These elements will be reused in this scene. 
          3. Select the Full Screen Tap to toggle on the Properties panel. 
            1. Add a Transition from choice_1_scene_01 to choice_1_scene_02.
        2. Select choice_1_scene_02 from the Scenes panel
          1. In the Layers panel, locate the character_2_dialogue image and toggle the image. This will hide the image from appearing in this scene. Repeat this step for the Full Screen Tap Gesture. 
        3. Select choice_2_scene_01 from the Scenes panel
          1. In the Layers panel, locate the character_1_dialogue image and toggle the image. This will hide the image from appearing in this scene.
          2. You should now see the character_2_dialogue image on the canvas, in addition to the Full Screen Tap gesture. These elements will be reused in this scene. 
          3. Select the Full Screen Tap to toggle on the Properties panel. 
            1. Add a Transition from choice_2_scene_01 to choice_2_scene_02.
        4. Select choice_2_scene_02 from the Scenes panel
          1. In the Layers panel, locate the character_1_dialogue image and toggle the image. This will hide the image from appearing in this scene. Repeat this step for the Full Screen Tap Gesture. 
Step 4: Preview & Share

Click the Preview icon to preview the project on desktop, or the Connect icon to preview the project on your device. Once you’ve built your own project, select Share to generate a shareable URL!

Was this helpful?

Updated October 01, 2019