← BACK

This tutorial will provide you with a framework to create a simple game, where the user will have to successfully make ice cream sandwiches in order to win. The setup and functionality used in this tutorial are also used in the “Treats Onboard” template in Studio. 

Download project for this tutorial

 

Step 1
  1. Create 14 scenes using the following naming conventions:
    1. Splash
    2. Title In
    3. Title Out
    4. Tutorial1
    5. Tutorial2
    6. Spawn
    7. Spawn_Early
    8. Spawn_Hit
    9. Spawn_Late
    10. Spawn_Idle
    11. Gameover
    12. Gameover_Loop
    13. Gameover_Fail
    14. Gameover_Loop_Fail
Step 2
  1. Select Splash in the Scenes panel
    1. Click and drag from the assets panel to add the video splash.mp4 to the canvas
    2. Click and drag from the assets panel to add the background music, Treats_Onboard_BG_music.mp3 to the canvas
      1. Click the icon to allow the background music to loop throughout the unit.
    3. Add a transition in the Events & Actions panel to Title In
Step 3
  1. Select Title In in the Scenes panel
    1. Click and drag from the assets panel to add the video titlein.mp4 to the canvas                       
    2. Click the Play button at the bottom of the canvas to play through to the end of the scene.
    3. Click and drag a Gesture Area onto the canvas and position it over the “Play” on the video.
      1. In the Properties panel, name this Gesture Element Play Now Button
      2. Use the Add Gesture to Area menu to add a Tap command to this gesture.
      3. In the Add an Action menu below, select Play Sound Effect and select tap_sfx.mp3
      4. Add a transition from Title In to Title Out 
Step 4
  1. Select Title Out in the scenes panel
    1. Click and drag from the assets panel to add the video titleout.mp4 to the canvas
    2. Add a transition in the Events & Actions panel to Tutorial1

Step 5

  1. Select Tutorial1 in the scenes panel
    1. Click and drag from the assets panel to add the video tutorial1.mp4 to the canvas
    2. Click and drag a Gesture Area onto the canvas and position it over the entire canvas.
      1. In the Properties panel, name this Gesture Element Tap
      2. Use the Add Gesture to Area menu to add a Tap command to this gesture.
      3. Add a transition to Tutorial2
Step 6
  1. Select Tutorial2 in the scenes panel
    1. Click and drag from the assets panel to add the video tutorial2.mp4 to the canvas
    2. Add a transition in the Events & Actions panel to Spawn
Step 7
  1. Select Spawn in the scenes panel. In this scene, we will be adding gestures and transitions for the actions a user takes to create a burger. The 3 actions are an early hit, a hit, or a late hit.
    1. Click and drag from the assets panel to add the video spawn.mp4 to the canvas
    2. Click and drag from the assets panel to add the image CTA.png to the upper lefthand corner of the canvas. Name this image CTA.
    3. Click and drag an Open URL Button from the Elements panel and resize it over the CTA image. Name this button Insert_CTA_URL
      1. In the Properties panel, add a URL of your choosing to the URL field.
    4. In the Layers panel, select the icon for both the CTA image and URL button to make these layers global and appear in every scene.
      1. Note: You will need to return to the scenes you previously set up and hide these elements from appearing. 
    5. Click and drag a Gesture Area onto the canvas and position it over the entire canvas.
      1. In the Properties panel, name this Gesture Element tap_spawn_early
      2. Use the Add Gesture to Area menu to add a Touch Down command to this gesture.
      3. Add a transition to Spawn_Early
    6. In the Events & Actions Panel, add an action to hide the element tap_spawn_early
      1. Select and update the seconds elapsed to 0.51. This means that the gesture will be hidden if the user doesn’t tap it within 0.51 seconds.
    7. Click and drag another Gesture Area onto the canvas and position it over the entire canvas.
      1. In the Properties panel, name this Gesture Element tap_spawn_hit
      2. Use the Add Gesture to Area menu to add a Touch Down command to this gesture.
      3. Add a transition to Spawn_Hit
      4. In the layers panel, toggle the to hide this element.
    8. In the Events & Actions Panel, add an action to show the element tap_spawn_hit
      1. Select and update the seconds elapsed to 0.5. This means that the gesture will appear on the canvas if the user doesn’t interact the tap_spawn_early gesture.
      2. Add another action to hide the element tap_spawn_hit
        1. Select and update the seconds elapsed to 0.61. This means that the gesture will be hidden if the user doesn’t interact with it within the time elapsed.
    9. Click and drag another Gesture Area onto the canvas and position it over the entire canvas.
      1. In the Properties panel, name this Gesture Element tap_spawn_late
      2. Use the Add Gesture to Area menu to add a Touch Down command to this gesture.
      3. Add a transition to Spawn_Late
      4. In the layers panel, toggle the to hide this element.
      5. In the Events & Actions Panel, add an action to show the element tap_spawn_late
        1. Select and update the seconds elapsed to 0.6. This means that the gesture will be shown if the user doesn’t interact with tap_spawn_hit.
    10. In the Events & Actions Panel, add an action to hide the element tap_spawn_late
      1. Select and update the seconds elapsed to 1.0. This means that the gesture will be hidden if the user doesn’t interact with it.
    11. Add an action to Set Counter
      1. Select “Choose New Counter” and name the Counter “win”
      2. Leave the value at 0
    12. Add another action to Set Counter
      1. Select “Choose New Counter” and name the Counter “fail”
      2. Leave the value at 0
    13. Add a transition in the Events & Actions panel to Spawn_Idle
Step 8
  1. Select Spawn_Early in the scenes panel.
    1. Click and drag from the assets panel to add the video spawn_early.mp4 to the canvas
    2. Click and drag from the assets panel to add the sound effect miss_sfx.mp3 to the canvas
    3. Add an action to Add Value to Counter and complete the following:
      1. Counter: fail
      2. Operation: Add
      3. Min: 0
      4. Max: 10
      5. Value: 1
    4. Add a transition to Spawn
      1. Click on the transition in the Events & Actions panel and add a Counter Conditional with the following items:
        1. Counter: fail
        2. Conditional: Less Than
        3. Value: 3
        4. This means that the unit will transition to the Spawn scene if the “fail” counter value is less than 3.
    5. Add a transition to Gameover_Fail
      1. Click on the transition in the Events & Actions panel and add a Counter Conditional with the following items:
        1. Counter: fail
        2. Conditional: Greater Than or Equal To
        3. Value: 3
        4. This means that the unit will transition to the Gameover_Fail scene if the “fail” counter value is greater than or equal to 3.
Step 9
  1. Select Spawn_Hit in the scenes panel.
    1. Click and drag from the assets panel to add the video spawn_hit.mp4 to the canvas
    2. In the Events & Actions panel, Add an Action to play sound effect hit_sfx.mp3 at time after .04 seconds have elapsed.
    3. In the Events & Actions panel, select Add Value to Counter from the Add an Action menu.
      1. Choose the Counter “win”
      2. Leave the min at 0 and change the max to 10
      3. Make the value = 1
      1. Select and update the seconds elapsed to 0.4
    4. Add a transition to Spawn
      1. Click on the transition in the Events & Actions panel and add a Counter Conditional with the following items:
        1. Counter: win
        2. Conditional: Less Than
        3. Value: 3
        4. This means that the unit will transition to the Spawn scene if the “win” counter value is less than 3.
    5. Add a transition to Gameover
      1. Click on the transition in the Events & Actions panel and add a Counter Conditional with the following items:
        1. Counter: win
        2. Conditional: Greater Than or Equal To
        3. Value: 3
        4. This means that the unit will transition to the Gameover scene if the “win” counter value is greater than or equal to 3.
Step 10
  1. Select Spawn_Late in the scenes panel.
    1. Click and drag from the assets panel to add the video spawn_late.mp4 to the canvas
    2. Click and drag from the assets panel to add the sound effect miss_sfx.mp3 to the canvas
    3. In the Events & Actions panel, select Add Value to Counter from the Add an Action menu.
      1. Choose the Counter “fail”
      2. Leave the min at 0 and change the max to 10
      3. Make the value = 1
    4. Add a transition to Spawn
      1. Click on the transition in the Events & Actions panel and add a Counter Conditional with the following items:
        1. Counter: fail
        2. Conditional: Less Than
        3. Value: 3
        4. This means that the unit will transition to the Spawn scene if the “fail” counter value is less than 3.
    5. Add a transition to Gameover_Fail
      1. Click on the transition in the Events & Actions panel and add a Counter Conditional with the following items:
        1. Counter: fail
        2. Conditional: Greater Than or Equal To
        3. Value: 3
        4. This means that the unit will transition to the Gameover_fail scene if the “fail” counter value is greater than or equal to 3.
Step 11
  1. Select Spawn_Idle in the scenes panel.
    1. n the Events & Actions panel, select Add Value to Counter from the Add an Action menu.
      1. Choose the Counter “fail”
      2. Leave the min at 0 and change the max to 10
      3. Make the value = 1
    2. Add a transition to Spawn
      1. Click on the transition in the Events & Actions panel and add a Counter Conditional with the following items:
        1. Counter: fail
        2. Conditional: Less Than
        3. Value: 3
        4. This means that the unit will transition to the Spawn scene if the “fail” counter value is less than 3.
    3. Add a transition to Gameover_Fail
      1. Click on the transition in the Events & Actions panel and add a Counter Conditional with the following items:
        1. Counter: fail
        2. Conditional: Greater Than or Equal To
        3. Value: 3
        4. This means that the unit will transition to the Gameover_fail scene if the “fail” counter value is greater than or equal to 3.
Step 12
  1. Select the scene Gameover in the scenes panel
    1. Click and drag from the assets panel to add the video end_card.mp4 to the canvas
    2. In the Layers panel, hide the CTA image and URL button from appearing in the scene
    3. Add a transition to Gameover_Loop
Step 13
  1. Select the scene Gameover_Loop from the scenes panel
  2. Click and drag from the assets panel to add the video end_card_loop.mp4 to the canvas
    1. Click the icon to make the scene looping
  3. In the Layers panel, hide the CTA image and CTA button from appearing in the scene.
  4. Click and drag a Gesture Area from the Elements panel and resize it over “Play Again.” Name this Gesture “Play Again Win.”
    1. In the Properties panel, select Add Gesture to Area and add a Tap command to the gesture
      1. Add an Action to play the sound effect tap.mp3
      2. Add a transition to Spawn
    2. Click and drag an Open URL Button to the canvas and resize it over “Free Coupon”
      1. Name this button “Insert_Custom_URL_Here_Win”
      2. Add your own URL to it in the URL field located in the Properties panel
Step 14
  1. Select the scene Gameover_Fail from the scenes panel
    1. Click and drag from the assets panel to add the video end_card_lose.mp4 to the canvas
    2. In the Layers panel, hide the CTA image and CTA button from appearing in the scene.
    3. Click and drag a Gesture Area from the Elements panel and resize it over “Play Again.” Name this Gesture “Play Again Fail.”
      1. In the Properties panel, select Add Gesture to Area and add a Tap command to the gesture
        1. Add an Action to play the sound effect tap.mp3
        2. Add a transition to Spawn
      2. Click and drag an Open URL Button to the canvas and resize it over “Free Coupon”
        1. Name this button “Insert_Custom_URL_Here_Fail”
        2. Add your own URL to it in the URL field located in the Properties panel
    4. Add a transition to Gameover_Loop_Fail
Step 15
  1. Select the scene Gameover_Loop_Fail from the scenes panel
    1. Click and drag from the assets panel to add the video end_card_loop_lose.mp4 to the canvas
    2. In the Layers panel, hide the CTA image and CTA button from appearing in the scene.
    3. Click and drag a Gesture Area from the Elements panel and resize it over “Play Again.” Name this Gesture “Play Again Fail Loop.”
      1. In the Properties panel, select Add Gesture to Area and add a Tap command to the gesture
        1. Add an Action to play the sound effect tap.mp3
        2. Add a transition to Spawn
      2. Click and drag an Open URL Button to the canvas and resize it over “Free Coupon”
        1. Name this button “Insert_Custom_URL_Here_Fail_Loop”
        2. Add your own URL to it in the URL field located in the Properties panel
Step 16
  1. Once you’ve completed the necessary steps, select Preview in order to see how the unit will cycle through the three different scenes, depending on the button that is selected.

Was this helpful?

Updated October 01, 2019