1. Introduction.
With Cool Tabs, you can create an interactive Runner-style game inspired by classic arcade titles. The player must move forward through a scene, dodging obstacles and collecting rewards, to earn points and climb the participant ranking.
You can use the predefined design or create a fully customized one: characters, backgrounds, sounds, and animations.
2. Step by step.
2.1. Create your campaign.
First, create your campaign in Cool Tabs and configure its basic sections.
If this is your first time using Cool Tabs, you can follow this tutorial:
How to get started creating a campaign: basic settings.
If you have any questions, contact us at help@cool-tabs.com.
2.2. Configure the runner.
Once the general part of the campaign is set up:
Go to the "Gamifications" section.
Activate the "The Runner" option.
Click "Configure".
Customize the design, sounds, and maximum number of plays.
2.2.1. Default design.
Cool Tabs includes a ready-to-use design called Space Runner, which consists of:
1. Animated character (astronaut). The animation uses an 11-frame sprite.
2. Background image. The base of the game. A static image with no animation.
3. Background image 2. The intermediate background that animates automatically to create a sense of movement.
4. Floor image. This is the surface the character runs on.
5. Death image. No animation. If the user fails to dodge it and collides, the game ends.
6. Prize image. No animation.
7. Start button.
8. Sounds (background music, reward, and death). You can check "Empty" if you don't want audio.
Finally, set the maximum number of plays and click "Save".
2.2.2. Custom design.
If you'd rather build your game from scratch, here are the required specifications.
A) Images (required format: PNG)
1. Character. Can be:
Static: 120 × 120 px (1:1).
Animated: 1320 × 120 px (11:1). Must meet the specific requirements described in Animations below.
2. Background image (static)
1280 × 720 px (16:9).
3. Background image 2 (auto-animated)
1280 × 720 px (16:9). Moves to create a sense of depth.
4. Floor image (static, the surface the character runs on)
1280 × 96 px.
5. Death or bomb image. No animation. If the user fails to dodge it, the game ends.
80 × 80 px (1:1).
You can set up up to 3 different images, with configurable appearance priority.
6. Reward image. No animation.
80 × 80 px (1:1).
You can upload up to 3 different images, assigning priority (appearance probability) and an individual score to each.
Example of priority settings:
Gold coin image → priority: 10
Silver coin image → priority: 30
Bronze coin image → priority: 60
This means a 60% chance the next image will be bronze, 30% silver, and 10% gold.
7. Start button image.
Maximum size: 200 × 200 px (1:1).
B) Animations
There are two types:
1. Constant movement (side scrolling).
Uses images that repeat horizontally through a tiled sprite. For a smooth visual effect, the image must have continuous edges so it lines up seamlessly when repeated.
This animation applies to:
Background 2. Moves slower than the floor, creating a sense of depth in the scene.
Floor. Shorter in height, it acts as the base the character runs on.
2. Frame animation.
Used to animate the main character through a sequence of images (frames). These are laid out in a 1320 × 120 px sprite sheet, divided into 11 frames of 120 × 120 px each:
Frames 1–8 → running
Frame 9 → jump
Frames 10–11 → collision (game over)
To use frame-based character animation, select the "The image is a sprite for animation" option.
C) Audio (required format: MP3, max. 2 MB)
Background music
Reward sound
Death sound
You can check "Empty" if you don't want to include sound.
2.2.3. Playing conditions.
Death Mode
The game has no time limit. The user keeps playing as long as they dodge obstacles and collect rewards.
To increase the difficulty, you can enable the "Death Mode" option, which progressively increases the appearance of obstacles (bombs) starting from a time you configure.
Example: if you set it to 60 seconds, more obstacles will start appearing after one minute, making it harder for the player to keep going.
Maximum number of plays
Defines how many times each user can play.
When a game ends, a popup appears showing:
Score.
The message "You have X more tries".
A "Play Again" button.
Once the player reaches the maximum number of allowed plays, they can no longer play again; they can only view their score and continue the experience without starting a new game.
Once you've uploaded all the images and sounds and configured the game conditions, click "Save" to apply the changes.
You can now try an example of a game using the Custom Runner functionality:
2.3. Other settings.
2.3.1. Participant ranking.
In gamification campaigns where players score points, you may want to display a public ranking so players can see where they stand. This makes entries public, so all participants can see their position.
To display the ranking of players along with the points they've obtained, you must make the participant list public.
To enable the public ranking of participants, follow this tutorial: How to display a public entries list or ranking of participants.
2.3.2. Winner selection.
If your game is linked to a sweepstakes, you can select winners once the participation period ends.
Winners can be selected randomly or filtered by different conditions, such as the points obtained in the game.
The participant list shows each participant's data, along with the total points they've obtained.
To start the selection process, follow this tutorial: How to select winners and obtain your Certificate of Validity.
3. Other specifications.
Remember:
All images must be PNG.
All audio files must be MP3 and under 2 MB.
The Cool Promo app (Gold plan) and Cool Promo White Label (Diamond plan) let you configure a Runner.
You can also create your game with the 7-day free trial, which lets you test any of our plans.
If you have any questions, you can contact us at help@cool-tabs.com.
4. Related Content.
How to access the URL of your campaign to publish it.
How to create an online puzzle game.
How to create a hidden objects game.
Comments
0 comments
Please sign in to leave a comment.