Introduction

This article explains how the Tap Challenge 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 experience uses Intuiface Headless CMS (H-CMS). If you are unfamiliar with Headless CMS, we suggest you first become familiar with it - either via the Headless CMS chapter in our Help Center or the Headless CMS course in Intuiface Academy - before proceeding with this article.

About the "Tap Challenge" experience

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

What you are seeing above is a web-published version of this 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/tap-challenge" frameborder="0" width="100%" height="auto"></iframe>

Of course, you don't have to publish your work to the web. Intuiface Player enables you to deploy and run experiences on multiple operating systems as if they were native applications.

How is this experience built?

This experience uses a variety of out-of-the-box Interface Assets -  Simple Counter, Random Number Generator, and Excel  - to bring its content to life.

The following stylesheet, located above the canvas in every scene, serves as the primary resource for defining the background, button release states, font colors, and fonts. 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 the How To Play group, which provides instructions for playing the game. The tappable logos remain hidden until the experience is running and the Start Game button is pressed.

Once the game starts, the How To Play group is hidden, and five tappable logos are displayed, along with a score display, a timer display, and a progress bar that visualizes the remaining game time. 

The objective is to tap as many logos as possible within 30 seconds. (If you tap the smaller logos, higher points are rewarded.)

When a logo is tapped, the Score Simple Counter Interface Asset is incremented and a tap sound effect is played. The logo then generates itself a new random X and Y position using its associated Logo X and Logo Y Interface Assets, causing it to move to a new location on the screen.

Each logo has its own pair of Value Operator Interface Assets used to generate random coordinates:

• Logo 1 X and Logo 1 Y
• Logo 2 X and Logo 2 Y
• Logo 3 X and Logo 3 Y
• Logo 4 X and Logo 4 Y
• Logo 5 X and Logo 5 Y

The Countdown Interface Asset is used to track the remaining game time. As the countdown progresses, the progress bar updates to provide visual feedback on the time remaining.

Once the countdown reaches zero, the game ends and the Finished group is displayed.

The Finished group contains a text input field that allows players to enter their name and submit their score to the leaderboard. Leaderboard entries are stored using the Excel Interface Asset.

How to reuse this experience

The easiest way to reuse these experiences is to carry out the following steps:

1. Open the "Tap Challenge" experience in Composer.
2. Use "Save as" to create a copy of the experience with a custom name.
3. When you use "Save As," Composer will ask if you want to duplicate the Headless CMS Base. Select "Duplicate". (You don't want to have to create it yourself!)
4. Customize the experience to suit your needs by altering the stylesheet or content within the Headless CMS base.

Data Structure of the Headless CMS base

The structure of the H-CMS base for this experience is made up of two Components, which are used throughout the experience.

• Logos & Points: Contains the logos and point values used throughout the game.
• Misc & Text: Contains text, images, and audio used throughout the experience.

Contents of the H-CMS base

"Logos & Points" Content

The "Logos & Points" component contains the logo graphics and point values used throughout the experience

Each item represents a logo that can appear during gameplay and contains the following fields:

• Logo Name: The name of the logo.
• Logo Image: The image displayed on screen and tapped by the player.
• Points: The number of points awarded when the logo is tapped.

You can customize each ite to replace the logo images, update the logo name, or modify the point value awarded to players. Additional logos can also be added to create new gameplay variations.

"Misc & Text" Content

The "Misc & Text" component contains the text, imagery, and audio used throughout the experience.

This content includes:

• Background imagery used within the scene.
• Progress bar imagery used to visualize the remaining time.
• Sound effects played when logos are tapped.
• Text displayed within the How To Play group.
• Text displayed within the Finished group.
• Button labels and other instructional text used throughout the experience.

By updating the content in this component, you can quickly customize the appearance, audio, and messaging of the experience without modifying any of the game logic.