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.
- Game mode
- Sound effects
- Publication and sharing
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.
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.
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”.
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.
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.
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).
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.
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.
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.
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.
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
To ensure responsiveness on smartphones and tablets, campaign integration must be done in the following way:
- Create a minisite or iframe channel.
- Customise your penalty game.
- Add a mobile channel.
- 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.