How to make a football penalty shootout game in Qualifio

Tabata Vossen -

In this tutorial, we will create a football penalty shootout game in Qualifio. To help, we have put together step-by-step instructions, along with all the assets you’ll need to build your own penalty game. Let’s get started!

About the game

The penalty is an addictive goal-scoring game. As the kicker, the participant must beat the goalkeeper and score penalty goals to earn bonus points.

Try the game →

Unlock full access: The penalty is available with the Advanced Formats add-on, which also gives you access to the catcher, the swap & match and all of our upcoming game formats. To learn more, contact Qualifio Sales Team.

Contents

  1. Layout
  2. Game mode
  3. Penalty
    1. Goal area
    2. Penalty area
    3. Messages
  4. Panels
  5. Sound effects
  6. Publication and sharing
The quickest way to get started creating your own designs ⚡️
Our Figma kit for the penalty game includes assets such as icons, backgrounds, avatars and other images from our ready-to-use games. Click the Get a copy button. Afterwards you can select the file you want and export it from Figma.

Start a new campaign in your account and make sure you pick Games > Penalty.

Schermafbeelding_2022-10-21_om_15.29.49.png

If the participant needs to register, pick the “identified” mode. If no registration is required, select “anonymous”.

Great! Now you’ve created your campaign, you have to take care of the setup of your game.

Choose a penalty game to customise

From the Game step, you can browse our selection of ready-to-use game designs. You can easily customise those to make them fit your needs!

Once you decide which game you want to start with, select Customise this game. Depending on the game you want to create, pick the “penalty” or the “free kick” design. The dimensions are slightly different, but both templates are fully customisable.

Schermafbeelding_2022-10-21_om_16.49.59.png

Note: Custom games allow you to create and save your own game templates. To save the design and gameplay mechanics as a custom game, you only need to open the editor, edit your game however you like, and then click “Save as new game”. Custom games can also be found in the Documents section under the “Advanced games”.

Layout

Now it’s time to customise the game to fit your branding. To design a penalty game, your first step will be to add a background field image as well as the sound on/off buttons.

Top tip: To preview the most recent changes to your game, you can use the live preview feature and select Refresh.

Schermafbeelding_2022-10-24_om_09.10.01.png

Background image

That image is used as a background on all game pages.

Top tip: Your background image does not have to include the white lines and markings on the football field. These are already part of the game.

Sound on/off buttons

Participants can turn audio on and off at will. The "sound off" button will mute all audio in your game, while the "sound on" button will reactivate all audio in your game.

Game mode

From the list of options, choose a game mode:

  • In the time-based mode, there is a time limit to the penalty shootout session. The main objective is thus to score as many goals as possible within the given time limit (e.g. 60 seconds). The participant earns one point with each successful kick.
  • In the number-based mode, you limit the number of shots the participant can take before the game stops. The main objective is thus to score as many goals as possible with a given number of balls (e.g. 5 balls).

Penalty

Goal area

You can create and upload your own goal and goalkeeper images.

To make the game more realistic, the goalkeeper has their own movements and moves according to the ball's direction. They can thus make saves (get the ball) and block the goals from being made.

Top tip: Goalie reaction speed. The penalty game can be fairly easy, but not when your opponent flicks back just as fast! Feel free to adjust the values for minimum and maximum reaction speed to make the game more difficult :)

Bonus: Free kick mode. With the option to add an obstacle, you can also do free kicks. Participants must score as many goals as possible while avoiding the “wall” formed by defending team players.

Penalty area

You can create and upload your own ball image.

By controlling a shot cursor, participants are able to aim the ball (i.e. choose where they want it to go) to fool the goalkeeper and try and pass their opponent. They can also control the power of the shoot.

Messages

You can customise the messages that will show after each successful kick and after each unsuccessful one. You can create multiple messages – they will play in random order.

GpvaITABJ9-27-_gesleept_.png

Panels

Panels are interactive in-game screens and one of the principal elements of the game. They inform players and give them directions on the next move to make.

  • The tutorial panel shows how the game is played and opens up automatically once the game is loaded.
  • The pause panel shows a menu 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 opens up automatically once the game has ended.

Sound effects

You can also add sound effects to your game:

  • Background music or crowd noise to let participants enjoy the tense moments as if they were playing in a football stadium.
  • Sound effects at crucial moments or during specific actions:
    • when participants click on the start button,
    • penalty goal (e.g. crowd cheering),
    • penalty miss/goalkeeper save (e.g. crowd booing),
    • penalty or “ready-for-play” signal (e.g. referee whistle),
    • game over or ending.

Be sure to click the “Save as new game” (creates a new custom game based on the one you’ve opened) or “Save & close” (replaces the original game) button on the bottom toolbar.

Publication and sharing

Penalty games are responsive and work on smartphones, tablets and computers. In a mobile device, the game has a "landscape mode" and fills the entire screen.

To ensure responsiveness on smartphones and tablets, campaign integration must be done in the following way:

  1. Create a minisite or iframe channel.
  2. Customise your penalty game.
  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?

And that’s it! Well done following through this far.

Was this article helpful?

Can’t find the answer you need?

Send us a question and connect with an expert to get personal assistance.

Contact support

Vous ne trouvez pas les réponses que vous cherchez ?

Nous sommes là pour vous aider. Envoyez-nous une demande en direct !

Contacter le support
helpcenter experts