This tutorial was put together by our community member shawnBuilds for Rosebud AI, the AI-powered game creation platform. Check out shawn’s games here, and join our Discord to find more tutorials and connect with other creators!
Right now, our platformer lets the player collect coins, but there’s no way to track how many they’ve grabbed. Let’s show the player their progress with a scoreboard!
Here’s the game we’ll create by the end.
By following this quick guide, you’ll learn how to use a custom, retro font as you build a stylish scoreboard that counts each coin the player picks up.
Quick Start
To follow along, let’s create a version of the project where you can add a scoreboard to track coins collected.
- Open this Rosebud game to get started.
- Click the Remix button in Rosebud to create your own version of the project.
Display the Coin Icon
To get started we can display the coin icon at the top-left corner of the screen so the player can always see it during gameplay.
Now, let’s write this message for Rosie:
Add a coin icon to the top-left corner of the screen using the image from the link below. This icon will be used later as part of a coin counter system, but for now, we are only displaying the icon. No counter text is needed yet. Display the image in its original size, and place it 10 pixels away from the edges in the top-left corner. https://play.rosebud.ai/assets/coin_icon.png?sBCM
After you've applied the code, check your game. You should now see the coin icon appear in the top-left corner of the screen.
Display the Coin Count
Next, we’re going to display the coin count using a custom retro-style font. The font is a sprite sheet, where each number (0-9) and a few symbols (like X and space) are small images. Here’s what the sprite sheet looks like:
For now, we’ll display the text “X0” at the top-left of the screen, next to the coin icon.
Now, let’s write a message for Rosie:
Load a bitmap font using the image from the link below. The font will include characters 0-9, X, and space. Each character will have a width of 20 and a height of 26. Use this font as a retro font in the game, and display the text 'X0' next to the coin icon at the top-left corner. Make sure the text is aligned horizontally with the coin icon and there is about 10 pixels of space between the coin and the text. https://play.rosebud.ai/assets/numbers.png?I5l0
After you've applied the code, check your game. You should now see the text "X0" displayed at the top-left corner of the screen, right next to the coin icon.
Count the Coins Collected
Now that the coin icon and text are on the screen, let’s make the number change whenever a coin is collected.
Let’s write a message for Rosie:
Track the number of coins collected by the player. Each time the player picks up a coin, increase the count by 1 and update the text next to the coin icon to reflect the new total.
After you’ve applied the code, play your game and collect some coins. You should see the number next to the coin icon increase with each coin you grab.
Checklist
- The coin icon is displayed at the top-left corner of the screen.
- The coin count text is displayed next to the coin icon using a retro-style font.
- The coin count increases by 1 every time the player collects a coin.
Final Game
Here is the final game we've built!
Wrapping Up
Awesome work adding a scoreboard to your platformer game!
You displayed a custom coin icon and text, and made the coin count change as the player collects coins. Knowing how to use a custom font will give you a great, new way to make your games stand out.
Keep an eye out for more platformer tutorials, and have fun making games!
.svg)
.svg)
.svg)