How to make a Runner game in Qualifio?

In this article, we'll walk you through the steps to create a Runner game in Qualifio.

A Runner game is a side-scrolling game where participants control a character moving forward, avoid the wrong objects, collect the right ones, and try to reach the highest possible score. Depending on your configuration, the game can be based on lives or on time.

If you're ready to build your own Runner game, let's dive in.

Campaign creation and setup

Get your campaign ready

To create a Runner game:

1. Open Qualifio and click the Creat a new campaign button
2. Select Games > Runner
3. If the participant needs to register, pick the identified mode. If no registration is required, select anonymous
4. Select Create campaign

After you create your campaign, you can start setting up the game.

Choose a runner game to customise

In the Game step, there are several ready-to-use games you can use as a starting point.

Once you decide which game you want to start with, select Customise this game.

Note: Custom games allow you to create and save your own game templates. To save the design and gameplay mechanics as a custom game, open the editor, edit your game however you like, and then click Save as new game.

Game controls and customisation

Now you are in the game editor, which consists of various tabs. Let's go over the different sections and what they're used for.

Layout

The Layout tab contains the generic visual settings of your runner game.

Moving background

The moving background is the main scrolling layer of the game. Instead of displaying the full image at once, the game only shows part of it and scrolls it continuously from right to left. This creates the illusion that the character is moving forward.

For the effect to look seamless, the left and right edges of the background should match. This way, when the image repeats, participants won't see a visible cut between the end and the beginning.

Moving speed

The moving speed controls how quickly the background scrolls. It is configured in milliseconds.

This setting mainly affects the feeling of the game:

• a faster background gives a more intense and energetic impression
• a slower background creates a calmer atmosphere

Static background

This setting, hidden behind the advanced settings, is an optional background placed behind the moving background. Unlike the moving background, it does not scroll. It can be useful for elements such as a sky, horizon or distant scenery.

Speed increase coefficient for the background in gradual difficulty

Also hidden in the advanced settings. If you use the gradual difficulty mode (explained later in the Runner tab), you can also make the background move faster as the game progresses. This does not directly change the gameplay logic, but it reinforces the feeling that the game is becoming faster and more challenging.

Game mode

The Game mode tab defines how the game starts and ends. There are two available modes:

• Life-based mode: you decide how many lives each participant starts with. This mode works well if you want participants to survive as long as possible while avoiding bad objects.
• Time-based mode: participants play until the timer runs out. This mode works well if you want participants to collect as many points as possible before time is up.

Runner

The Runner tab is where you configure the playable character and the main gameplay behavior.

Main character image

The runner is configured using a sprite image. This means the image can be:

• a single static frame
• or several animation frames combined into one image

If you use multiple frames, they must be aligned on the same image and placed next to each other so the system can split them correctly.

The, in Number of frames in the image, enter how many frames are included in that file.

Width ratio and height ratio

The width ratio and height ratio control the size of the runner on screen. These values define how large the character appears relative to the game area.

As a general rule:

• if the object is taller than it is wide, resizing is mainly driven by its width,
• if the object is wider than it is tall, resizing is mainly driven by its height

This lets you fine-tune how prominent the character looks during gameplay.

Allow the player to jump

If you enable Allow the player to jump, an additional section opens where you can configure the jump animation.

Just like the main character image, the jump animation is uploaded as a sprite sheet:

• upload the image,
• specify the number of frames
• let the system split it into an animation

Allow the player to dash

If you enable Allow the player to dash, the player can interrupt the jump and return to the ground more quickly. 

This can make gameplay more reactive and gives participants more control in fast sequences.

Allow the player to slide

If you enable Allow the player to slide, the runner can move down close to the ground to avoid objects. This opens another configuration section where you can upload the slide sprite image and define its number of frames.

Objects

Objects are the elements the runner encounters during the game. These can be:

• bonuses, if they add points
• maluses, if they remove points

Object image and animation

Each object can be static or animated. For example you could use:

• a static fish,
• a rotating coin
• a blinking obstacle

Upload the image and indicate the number of frames in the image so the game can split it correctly.

Probability of appearance

The probability of appearance decides how often that object appears compared with the other configured objects. The available values are:

• Low
• Medium
• High

Place on ground

If this setting is enabled, the object will only appear on the ground level, which is where the runner normally moves. If it is disabled, the object will appear above ground at different heights on the screen.

This is useful to separate:

• ground object, such as coins, rocks or road obstacles
• airborne objects, such as birds, bats, fish in a floating theme, or any item meant to be avoided overhead

Difficulty level

In the advanced settings, you can configure the overall difficulty of the game. There are 4 difficulty levels:

• Easy: objects appear less often and the pace is more relaxed
• Medium: a balanced level of challenge
• Expert: object appear much more often, which makes the game feel more intense and demanding
• Gradual: the game starts easy and progressively increases until it reaches the expert level

Gradual mode is useful if you want the game to become harder over time without overwhelming participants from the start.

Survival score

You can also enable a survival score. This option gives points automatically as long as the participant stays alive. You can configure:

• how many points are awarded
• every how many milliseconds they are granted

This is especially useful if your game is focused on survival, for example when the participant has very few lives and should be rewarded for lasting longer.

Panels

Panels are common interactive screens displayed during the game.

• The tutorial panel shows how the game is played and opens up automatically once the game is loaded.
• The pause panel shows a text with a “Resume” button and opens up automatically when the participants click outside the game.
• The game-over panel shows the participant’s score and automatically opens up once the game ends.

Sound effects

You can also add sound effects to your game to enhance the experience:

• Background music to set the atmosphere and help users connect emotionally with the game.
• Sound effects at crucial moments or during specific actions:
  • when participants click on the start button,
  • when the character hits an obstacle,
  • when the character collects a bonus object,
  • when the game is over or ending.

Testing the game 🎮

As you create your game, make sure to test it regularly in the preview.

Play through several runs and check that:

• the runner size feels right on screen,
• jumps and slides are readable and responsive,
• ground and air objects appear where expected,
• the object probabilities create the intended balance,
• the background speed matches the theme of the game,
• the difficulty level feels right

If needed, adjust your settings and refresh the preview until the experience matches what you want to achieve.

Saving the game

Once your configuration is ready, you can save it in two ways:

• Save & close updates the existing game
• Save as new game creates a new custom game that can be reused later

This is especially useful if you want to create your own reusable runner templates.

Publishing the game

Once the game is ready, complete the rest of your campaign and publish it.

Runner games are designed to work across devices. To ensure the best responsive experience on smartphones and tablets, campaign integration must be done in the following way:

1. Create a minisite or iframe channel.
2. Customise your Runner.
3. Add a mobile channel.
4. Make use of the minisite/iframe channel smart URL to share. To learn more, please check What is a smart URL and how to use it?