Introduction

This article explains how the Catching Sticks Reaction Game sample experience was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer.

This sample shows how to use the Catching Sticks Interface Asset to create a touchscreen reaction game inspired by the real-world catching sticks challenge.

About the "Catching Sticks Reaction Game" experience

You can interact with the experience below. Go ahead - tap it!

What you are seeing above is this web-published experience running within an iFrame. Below is the HTML code. Note that the "src" value is the URL of the published experience. Pasting that URL into a browser tab will run the experience in full screen. (Feel free to try it!)

<iframe src="https://web.intuiface.com/catching-sticks-reaction-game" frameborder="0" width="100%" height="auto"></iframe>

The objective of this game is to successfully catch all six sticks as they fall. The sticks drop one at a time in a randomly selected order, and the player must react quickly enough to catch the active stick before it reaches the bottom.

Catching all six sticks wins the game. Selecting the wrong stick, tapping the background, or taking too long to catch a stick ends the game.

How is this experience built?

This experience uses the Catching Sticks Interface Asset to manage the game logic, including selecting which stick should drop, tracking successfully caught sticks, measuring reaction times, and determining whether the game has been won or lost.

The Interface Asset acts as the game controller but does not render the sticks visually. The six sticks - their positions, animations, sounds, and different game states - are created within the experience.

When a new game begins, the Interface Asset randomly determines the order in which the six sticks will drop. Only one stick is active at a time, and each stick is used once during the game.

The experience also tracks the player's performance by displaying the number of sticks caught and the player's average reaction time.

The stylesheet, located above the scene and only visible in Composer's Edit Mode, serves as the primary resource for defining elements such as colors and fonts used throughout the experience. If you modify the fonts and colors here, the changes will be reflected throughout the experience.

Scene breakdown

"Game" scene

Within the "Game" scene, you are initially presented with six sticks and a "Start" Group collection containing instructions for playing the game. The "Caught" and "Avg Reaction" values are displayed at the top of the scene to provide feedback on the player's performance.

The sticks are visible in their starting positions, but the game does not begin until the "Start" button is pressed.

Once the "Start" button is pressed, the instructions are hidden, and the Start Game action of the Catching Sticks Interface Asset is called. The Interface Asset randomly determines which of the six sticks should drop first and raises that particular stick's Stick Dropped trigger.

The Active Stick Number property identifies which stick is currently active, enabling the corresponding stick created in the experience to begin its falling animation.

Controlling the stick animations

We created six conditional triggers using the Stick Dropped trigger - one for each of the six sticks.

Each conditional trigger checks the Active Stick Number property to determine which stick has been selected by the Interface Asset. If the condition matches, the corresponding stick is moved from its starting position to its finished position.

For example:

• Active Stick Number = 1 moves Stick 1.
• Active Stick Number = 2 moves Stick 2.
• Active Stick Number = 3 moves Stick 3.
• Active Stick Number = 4 moves Stick 4.
• Active Stick Number = 5 moves Stick 5.
• Active Stick Number = 6 moves Stick 6.

This means the Interface Asset is responsible for randomly selecting the next stick, while animation actions created in Composer are responsible for visually moving that stick.

For each conditional trigger, we use a Move To action to animate the selected stick to its finished position. The animation duration of the Move To action is bound to the Drop Duration property of the Catching Sticks Interface Asset. This ensures that the movement of the stick has the same duration as the timeout managed by the Interface Asset. For example, if Drop Duration is set to 2 seconds, the stick takes 2 seconds to reach its finished position and the player has that same amount of time to catch it.

We also call the Start Reaction Timer action when the stick begins to move. This ensures that reaction time is measured from the point at which the player visually sees the stick begin to fall.

The same conditional trigger setup is repeated for all six sticks.

Catching a stick

The player must tap the active stick before the configured Drop Duration expires.

Each of the six sticks has its own group. When a stick is tapped, it raises the Catch Stick action of the Catching Sticks Interface Asset and supplies its corresponding stick number.

For example, tapping Stick 1 raises Catch Stick with a Stick Number of 1, while tapping Stick 2 supplies 2, and so on.

The Interface Asset compares this number with the current Active Stick Number.

If the correct stick is selected, the Interface Asset records the successful catch, calculates the player's reaction time, raises the Stick Caught trigger, and randomly selects the next remaining stick.

Each stick can only be selected once during a game, so the process continues until all six sticks have been caught or the player makes a mistake.

The Caught Sticks property is used to display how many of the six sticks have been successfully caught, while Average Reaction Time In Milliseconds is used to display the player's average reaction time across all successful catches.

If all six sticks are successfully caught, the Game Won trigger is raised and the experience displays the winning state.

A player can lose the game in three ways:

• Selecting a stick other than the currently active stick.
• Tapping the background instead of the falling stick.
• Failing to catch the active stick before the configured drop duration expires.

If any of these occur, the Game Lost trigger is raised. This trigger provides a message identifying why the game ended, such as "Wrong stick selected", "You missed the stick", or "You waited too long!". This message is then be displayed to the player as part of the losing state.

How to reuse this experience

The easiest way to reuse this experience is to carry out the following steps:

1. Open the "Catching Sticks Reaction Game" experience in Composer.
2. Use Save As to create a copy of the experience with a custom name.
3. Customize the experience to suit your needs by replacing the stick imagery, modifying the stylesheet, changing the game text, or adjusting the game settings.

The Drop Duration property of the Catching Sticks Interface Asset can be adjusted to change the amount of time a player has to catch each stick. A shorter duration increases the difficulty, while a longer duration gives the player more time to react.

The visual presentation of the sticks can also be completely customized. Because the Interface Asset controls the game logic rather than rendering the sticks itself, you can replace the provided stick design with your own images or other assets while retaining the same game mechanics.

Catching Sticks Interface Asset

The Catching Sticks Interface Asset exposes a set of properties, triggers, and actions that are used to manage the game and connect its logic with the assets created in the experience.

Properties

• Is Playing - Indicates whether a game is currently in progress. This is a read-only property managed by the Interface Asset.
• Caught Sticks - Contains the number of sticks successfully caught during the current game. This is used to display the player's progress.
• Active Stick Number - Identifies which of the six sticks is currently active. This property is used by the six conditional triggers to determine which stick should be moved.
• Last Reaction Time In Milliseconds - Contains the player's reaction time for the most recently caught stick.
• Average Reaction Time In Milliseconds - Contains the player's average reaction time across all successfully caught sticks.
• Drop Duration - Defines, in seconds, how long the player has to catch the active stick. The Move To animation duration for each stick is bound to this property so that the animation and game timeout remain synchronized.

All properties except Drop Duration are read-only and are automatically updated by the Interface Asset as the game progresses.

Actions

• Start Game - Starts a new game, resets the current progress, and randomly selects the first stick.
• Stop Game - Stops the current game.
• Start Reaction Timer - Starts measuring the player's reaction time when a stick begins its falling animation.
• Catch Stick - Called when a stick is tapped. The corresponding stick number is supplied as a parameter so the Interface Asset can determine whether the correct stick was selected.
• Miss Stick - Called when the player taps the background instead of the active stick.

Triggers

• Game Started - Raised when a new game begins.
• Stick Dropped - Raised when the Interface Asset selects the next stick to fall.
• Stick Caught - Raised when the player successfully catches the active stick.
• Game Won - Raised when all six sticks have been successfully caught.
• Game Lost - Raised when the game ends because of a mistake or timeout. The trigger includes a Message parameter explaining why the game was lost.

The Game Lost Message parameter contains one of the following values:

• "Wrong stick selected"
• "You missed the stick"
• "You waited too long!"