With the Cool Promo and Cool Promo White Label apps, included in the Cool Promo and Cool Promo White Label plans, respectively, you can create a campaign with The Runner mechanics.
This way, you can configure an interactive game, in which the participants will have to move forward while dodging obstacles and catching bonuses to score points. The longer they stay in the game and the more bonuses they get, the more points they earn.
This format allows you to configure the game with the default design that we provide or modify it to customize it with your own character, scene, music, effects…
Below, you can see an example of an online campaign with The Runner format.
2. Step by Step.
2.1. Create your campaign.
Go to Cool Tabs, create a new campaign and select the Cool Promo or Cool Promo White Label application.
Select Cool Promo or Cool Promo White Label depending on the plan you have contracted.
You must fill in the first sections of your campaign.
- Register: how the user will be able to participate. With their Facebook, Twitter, LinkedIn, Pinterest, Microsoft/Hotmail, Yahoo account, or anonymously (email).
- Basic data: where you want users to go when they click on the URL of your campaign, languages…
- Design: main image, background image, font, colors…
Start and end dates: dates on which the campaign will be visible.
- Participations: date on which users will be able to participate and the number of times they will be able to do so.
If you have any questions or doubts during the process, don't hesitate to contact us at email@example.com
We'll also leave you with these tutorials, in which we explain what you can include in each section in greater detail:
2.2. Configure The Runner format.
After completing the previous sections, go to the "Gamifications" section, enable the "The Runner" option and click on "Configure".
Once inside the settings, specify the maximum number of games that the user can play. Every time they play again, the cards will be randomly shuffled. When the game ends, they will be shown a popup with the points they've obtained, the text "You have X more tries" and the "Play Again" button. Once they reach the limit of allowed games, they will not be given the option to play again, but only to continue.
2.2.1. Default design.
By default, you will find the Space Runner design is enabled, which we have configured at Cool Tabs.
- Animated character (astronaut): the animation is made up of 11 frames.
- Background image: it is the background of the entire game and is not animated.
- Background image 2: This is an intermediate background that is automatically animated to create the effect of movement.
- Floor image: it is a fixed image, where the character steps when running.
- Death image: it is not animated. When the user fails to dodge it, the game ends.
- Prize image: it is not animated. Every time the user catches a bonus, they get 100 points.
- Start playing image: this is the button that starts the game.
- Background music: if you don't want the game to have background music, mark the "Empty" option.
- Music when picking up the prize: if you don't want the sound to play, mark the "Empty" option.
- Music when dying: if you don't want the end-of-game sound to play, mark the "Empty" option.
Finally, fill in the "Maximum Number of Games" field, with the number of times users can play.
Check that all the default configuration options are checked and click on "Save".
2.2.2. Custom design.
It is possible to completely configure The Runner feature and thus create your own game, with a custom design.
We'll explain the specifications that the different elements (images and sounds) of your game must meet.
Images: Please note that all images must be in PNG format.
- Character: the protagonist of the game can be static or animated.
- Static: you can upload your own 120 x 120px image. Aspect ratio 1:1.
- Animated: you can upload your own 1320 x 120px image, although it must meet a number of specifications (see Animations below). Aspect ratio 11:1.
- Background image: it is the game's background and isn't animated, it is fixed. It should be 1280 x 720px. Aspect ratio 6:9.
- Background image 2: this is an intermediate background, between the background and the ground, which is automatically animated to create the effect of movement. It should be 1280 x 720px. Aspect ratio 6:9.
- Ground image: it is a fixed image, where the character steps when running. It should be 1280 x 96 px. Aspect ratio 4:3.
- Death image: it is not animated. When the user fails to dodge it, the game ends. It should be 80 x 80px. Aspect ratio 1:1.
- Prize image: it is not animated. Every time the user catches a bonus, they get 100 points. It should be 80 x 80 px. Aspect ratio 1:1.
- Start playing image: this is the button that starts the game. Its maximum measurements are 200 x 200px with transparency. Aspect ratio 1:1.
Animations: In the game, there are 2 main types of animations:
- By constant movement: the animation is done by repeating a tiled sprite on the X axis. You must keep in mind that, as they are repeated indefinitely, these sprites (images) must have continuity on their X axis, coinciding at the ends, to maintain visual continuity. Both background image 2 and the ground image are animated in this way. In the case of background image 2 (1820 x 720px) the scroll speed is less than the ground speed, giving depth to the scene. The ground image (1280 x 96px) is lower in height, since it serves as a support for the character.
- By frames: the animation of the main character is somewhat more complex and requires an animation by frames. These frames are generated from a template (image) with a fixed size of 1320 x 120px, with the size of each one being 120 x 120px. The first 8 frames correspond to the animation of the running character, 9 corresponds to the jump, and frames 10 and 11 correspond to the animation when it collides with the object that causes the game to end.
To use the animation of the character by frames, it is necessary to select the option "The image is a sprite to animate".
Audios: only files in MP3 format are allowed, up to a maximum of 2MB in size.
- Background music: You can include your next background music for the game. If you don't want the game to have background music, mark the "Empty" option.
- Music when a bonus is caught: if you don't want the sound to play, mark the "Empty" option.
- Music when dying: if you don't want the end of game sound to play, mark the "Empty" option.
Once you've uploaded your images and sounds, click on "Save".
2.3. Entry form.
In the Form section of the campaign settings, activate all the fields you want to ask users to complete to participate in your campaign.
2.4. Final screen.
You can configure:
- Same screen for all participants.
- Different screens according to the points obtained in the game.
2.4.1. Show default content to the participants.
You have the option to show the same message to all participants. Configure your default message in the 'Final screen' section of the campaign editor.
In the 'Final Screen' section, configure the screen that will be shown, by default, to all participants who don't answer correctly.
If you only want to include an image in the final screen, in the 'Content' tab of the 'Final Screen' section, check the box 'Show an image in the final screen' and upload your image.
If you want to show a text, enable the option 'Show a text on the final screen'. When you check the checkbox, an editor will open in which you can include text, images, GIFs, or HTML. The editor also supports images, so, if you wish, you can have two images, here and in the specific field for uploading an image.
2.4.2. Content according to gamifications.
If you want to display a different screen depending on the points obtained in the game, enable the option '' Then, click on 'Individual final screen management.
You will have to add as many screens as pages of results you want your game to have. Fill in the information for each screen.
- Give it an internal name so that you can identify each results page.
- Set a maximum and a minimum number of points a participant must score to view that screen.
- Include a creative and/or message in the 'Design' section.
- You can complete and customize the fields related to viralization on social networks so that users can share their participation.
If you are going to show one final screen or another, depending on the points obtained by the participant, do not forget to activate the option 'Quiz with points for right answers' in the 'Quiz' section. Otherwise, the screens you set will not be displayed.
You have the possibility to enable a ranking of participants, in the 'Participations' section of the campaign editor. You only have to activate the option 'Enable public participations'.
2.6. Selection of winners.
All the information that users have sent will appear in the list of participants with the total points they have obtained.
Once the period to participate in your campaign has ended, you can select the winners. You can choose them randomly, filtering them by various conditions (for example, by the points obtained in the game).
3. Other Specifications.
4. Content Related.