Hour of Code 2024
HOW TO BUILD A PLATFORMER WITH
AI Grades 2 + | Javascript
Make a game just by describing it. In this one-hour lesson, create a Mario-style platformer from scratch step by step. All you need is access to the internet.
At the end of the lesson you will have a game website you can share with your friends and family. The lesson can be completed in an hour or spread over a week to create a game with more detail.
Open this template and follow the lesson plan below:
Lesson Plan
60 Minutes
Overview
Make a game just by describing it. In this one-hour lesson, create a Mario-style platformer from scratch step by step. All you need is access to the internet.
At the end of the lesson you will have a game website you can share with your friends and family. The lesson can be completed in an hour or spread over a week to create a game with more detail.With Rosebud, you can make a game just by describing it. It sounds like magic, but in this one-hour lesson, I will give you a step-by-step guide on how to create a Mario-style platformer from scratch, in under one hour! You don't need to download anything, and you don't even need to know how to code. All you need is access to the internet.
Although it's easy to get started, Rosebud is unlike any no-code platform you've seen before. It's extremely powerful because AI lets you generate JavaScript code under the hood. This means students can use Rosebud to also learn to code in the process. Creators have been making RPGs, adventure games, and 3D games—all experiences you can create by describing what you want, step by step.
This lesson is written by Rosebud Creator @shawnBuilds.
Let's Get Started!
Classroom Slides
Section 1: Building the Level (15 min)
Step 1: Setup the Game
1. Setting up your game is as simple as opening this Rosebud game link.
2. Clicking the remix button in Rosebud.
Now, your Rosebud project editor should show a game with a black screen in the preview.
✅ Checkpoint 1:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 2: Display the background
A good way to start crafting a game from scratch is to make it look pretty! Let’s check out our background image:
Adding the image to your game
We'll need to load this image from a link so it will be ready to use in the game.
A simple, no-code way to have Rosie load these images is to show the link to the image in our message.
With the image loaded in the game, we can display it as a background which covers the entire screen.
Message Rosie:
Feel free to copy the message, paste it into Rosebud, then hit submit to display the background in your game:
Load the background image from this link: https://play.rosebud.ai/assets/background.png?BNey
Display it as a background and make sure it covers the entire screen.
When Rosie responds with new code, click the Apply button. You'll see the game has been updated with a pretty background in the preview tab.
Check your game to make sure that the background image is covering the screen.
✅ Checkpoint 2:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 3: Spawn Platforms
Now that we have our background in place, it's time to add some platforms to create our level:
Add Platforms
We’re going to load platform images and place them in your game. Here’s a look at some of the platforms you’ll be working with:
We’ll use a pre-made level layout to place platforms in the game. This layout includes details like which images to use and where to place them, all stored in a level data file.
No need to open or edit the file. Just copy and paste the snippet below into your message so Rosie can load everything in the right spots:
{
"platforms": [
{"image": "ground", "x": 0, "y": 546},
{"image": "grass:4x1", "x": 420, "y": 420}
]
}
Message Rosie:
Let's add platforms to our game! Load the level data file and the platform images. Once they're loaded, use the level data to place the platforms exactly where they need to go.
Here’s the platform setup:
{
"platforms": [
{"image": "ground", "x": 0, "y": 546},
{"image": "grass:4x1", "x": 420, "y": 420}
]
}
Files to load:
- Level data: https://play.rosebud.ai/assets/level01.json?6XjW
- Platform images:
- Ground: https://play.rosebud.ai/assets/ground.png?2eo1
- Grass (8x1): https://play.rosebud.ai/assets/grass_8x1.png?CZkN
- Grass (6x1): https://play.rosebud.ai/assets/grass_6x1.png?2yCm
- Grass (4x1): https://play.rosebud.ai/assets/grass_4x1.png?Iudu
- Grass (2x1): https://play.rosebud.ai/assets/grass_2x1.png?kmRP
- Grass (1x1): https://play.rosebud.ai/assets/grass_1x1.png?UFjw
After you apply the code, check your game to see the platforms... have missed the mark.
Fix Platforms
The platforms in our game are appearing too high and too far left on the screen. Why is this happening?
We're placing the middle of each platform at its level position—where the platforms’ top left corner should be.
To fix this, we can place the top left corner of each platform at the level position instead. This will naturally move each platform down and to the right on the screen.
Message Rosie:
The platforms in our game are appearing too high and too far left on the screen. Please fix this by placing the top left corner of each platform at its level position.
Apply the fix, then check your game to see the new platform positions.
✅ Checkpoint 3:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 4: Spawn the Player
Now that we've set up the platforms, our level looks empty!
It’s a great time to add the player character to the level and place them on top of the ground, like this:
Add the Player Character
This is what our player character will look like:
We'll use the level data to place our player in the game - this file has the layout details needed to position everything that will go on our level.
So, we can show the player position from that file to Rosie so we can place the player at the right spot. The player position looks like this:
{
"hero": {"x": 21, "y": 525},
}
Remember to copy this into your message for Rosie to make sure the level data file is used correctly.
Message Rosie:
Let’s add a player to our game. First, load the player image, then add the player as a sprite to the game when loading the level. Position the player at the bottom of the level using the level data position for the player:
{
"hero": {"x": 21, "y": 525},
}
The player should not be pulled down by gravity or collide with anything in the game right now.
Here’s the player image: https://play.rosebud.ai/assets/hero_stopped.png?ncKN
Submit the prompt above and check your game. You should see the player character on top of the ground, in the bottom left part of the level.
Fix the Player
Now, the player in our game is appearing too low and too far right on the screen. Unlike the platforms, the player is missing the mark in the opposite direction. Why?
Our level data file expects us to place the center of the player at the level position.
Since we are now placing platforms at their position from the top left corner, Rosie thinks we should place our player from the top left corner, too!
After working out how to fix the platforms, you have a good idea of what to do: place the center of the player at the level position, moving them up and to the left.
Message Rosie:
The player is supposed to be spawned at a position on top of the ground, but they are too low and too far right on the screen. Please fix the player’s position by placing the center of the player at the level position.
Check your game to make sure the player is placed above the ground.
✅ Checkpoint 4:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Section 2: Player Movement (15 min)
Step 5: Move the Player
Right now, we’ve placed the player in the level, but they’re stuck in one spot.
It would be awesome if the player could move around the level!
Use the Keyboard
We’ll start by using the arrow keys to move the player left and right.
Message Rosie:
Let’s use the keyboard to move the player. The character should move left and right with the arrow keys. The character should stop if no key is pressed and should not move off the screen. Use physics to move the player sprite.
After submitting the prompt, check your game.
Uh oh - now that our player can move, we see they pass right through the platforms. The player and platforms are not seen as physical objects in our game, so they don’t bump into each other - yet!
✅ Checkpoint 5:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Step 6: Add Gravity
So, the game has a player that can move but they pass right through the platforms.
In this section, we’ll add gravity to pull our player character down onto the platforms. We'll also make sure our player can no longer pass through those platforms.
Pull the Player Down
Once we add gravity to pull our player down onto the platforms, the player character should come into contact with the ground and stop moving.
Rosie will use collision detection to make the player stop when they touch platforms like the ground in the game.
Message Rosie:
Add gravity to our game which will pull the player down. Stop the player from falling through the platforms. Do not add jump yet.
Submit the prompt and check your game. You should see the main character… fall through the ground.
Visual Debugging
Let’s use visual debugging to see if the player is actually touching the platforms. Visual debugging reveals the invisible collision boxes around game objects (like platforms and the player) that the game uses to detect when these objects bump into each other.
Message Rosie:
Add visual debugging to our game so I can see the collision boxes of the platforms and the player.
Submit the prompt, and check your game to see the collision boxes of the player and platform:
The blue squares show the collision boxes of the platformers. They are clearly not lined up with the actual platform images! When we moved the platform images earlier, we forgot to update their collision boxes to match.
Message Rosie:
Once the game begins, the player falls through the floor. Visual debugging shows me that the collision boxes of the platforms are centered at the top left corner of the platforms. Adjust the platforms' collision boxes to line up with the platforms images.
Now you can check your game again. Our player will no longer move through or fall through the platforms!
✅ Checkpoint 6:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 7: Jumping
Now that we’ve added gravity, the player can stand on platforms without falling through them. But, they can’t even jump between the platforms… it’s a platformer, after all!
Let's make it so the player can jump, and add a sound effect so jumping feels satisfying.
Add a Jump
We’ll start by using the up arrow key to jump with the player.
Message Rosie:
Let’s add a jump for our player. Our player should jump when the up key is pressed and should not be able to jump while in the air.
After applying the code, check your game. The player should be able to jump when pressing the up key, but not while already in the air.
Tweak the Jump
Right now, the player moves slowly in the air and can easily reach all platforms. This is called a 'floaty jump'. It's not very exciting because it's too easy.
To make the game more challenging, we can:
- Make the player jump higher and faster
- Make the player fall down faster
Message Rosie:
Let’s make the player jump faster, and fall to the ground faster. Use 500 for the jump speed and 800 for the gravity to set a specific speed.
After applying the code, check your game. The player should now jump more quickly through the air. Feel free to change the speed to get the perfect feel in your game.
Play a sound effect
First, we need to show Rosie a link to the sound that's uploaded to Rosebud, like we’ve done when adding images to the game.
Then, we'll ask Rosie to play a sound when the player jumps, and set it at a low volume so it's not too loud.
Message Rosie:
Load this sound and play it when the player jumps, but at 10% volume: https://play.rosebud.ai/assets/jump.wav?Ag0I
✅ Checkpoint 7:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Section 3: Gameplay Features (15 min)
Step 8: Coins
Now that we've made a player character who can move and jump around the level, we're going to add shiny, spinning coins for the player to pick up!
We’ll learn to animate the coins, and add a sound effect that will make picking up each coin feel rewarding.
Display Coins
Before animating the coins, let’s display them as images in the level. This way, we can make sure they’re placed in the correct spots.We’ll use a coin sprite sheet to display and animate the coin.
A sprite sheet is one large image made up of smaller images for different steps in an animation. For now, we’ll just display a flat coin (the first image in the sprite sheet).
The game already has a file with the coin positions, which we’ll use to place the coins throughout the level.
Message Rosie:
Display the coins (without animation right now).
The link to the coin spritesheet is here: https://play.rosebud.ai/assets/coin_animated.png?7aAw
The size of each frame is 22 by 22 pixels.
The coin data—where to place each coin—is stored in the level data.
The center of each coin sprite should be placed at the level position.
Add Animation
We'll create a spinning coin animation using the same coin sprite sheet from earlier.
An animation works by showing different images (called frames) from the spritesheet, one after the other, to create a moving picture, like a flipbook.
For our coin to spin once, the animation will step through the spritesheet frames like this: 1, and 2, and 3, back to 2. To make our coin spin forever, we'll play the animation again each time it ends.
Message Rosie:
Animate the coins using these frames from the spritesheet, in this order: 1, 2, 3, then back to 2.
Loop the animation to make the coins spin forever.
Now, you should see our level is full of shiny spinning coins!
Let's make the character pick up coins, too.
Message Rosie:
When the player touches a coin, make the coin disappear.
Play a Sound Effect
Adding a sound effect will make picking up coins more satisfying.
We’ll need to include a link to the pickup sound effect in our prompt so we can play the sound in our game.
Message Rosie:
Let’s play a sound effect when the player picks up a coin.
The sound should play at a low volume, like 10%, because the default volume is loud.
The link to the sound is: https://play.rosebud.ai/assets/coin.wav?xbfu
Now you should be able to move the main character and collect all the coins in the level.
✅ Checkpoint 8:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 9: Walking Enemies
So far, the only challenge for the player is jumping between platforms. To make things more interesting, we’ll add three cute spiders as enemies!
Spawn Enemies
First, we’re going to place the walking, animated spiders in the game.
We’ll use this spritesheet to handle the animation:
For our spider to walk, the animation will step through the spritesheet images like this: 1, and 2, and 3 - repeat.
So, where are the spiders going to show up? We’ll use that level data file (already in the game) to place the spiders at the right spots, on top of the platforms.
For now, the spiders will move to the right, but they won’t turn around or fall off the platform. Once our spiders are moving on the platforms, it will be easier to work out how to keep them on the platforms.
Message Rosie:
Let’s spawn spiders in our game. Spiders will
- use the spider sprite sheet
- begin with a walking animation
- collide with platforms
- move to the right when they spawn
- not move past the sides of the screen
- not change direction (yet)
We’ll spawn the spiders using the positions for spiders in our level data.
Visual details:
- The spritesheet is @’https://play.rosebud.ai/assets/spider.png?8Xc9‘
- The spritesheet has a frame size of 42x32
- The walking animation will loop frames 1-3
After you’ve generated the code, reload the game to see the spiders in action. You should now see the walking spiders, but you’ll notice they fall off the platforms!
Stop the spiders from falling off platforms
To keep the spiders on the platforms, we’ll add invisible walls. These walls will block the spiders from moving off the edge, but the player won’t see them.
Here's how the invisible walls will look like when they are being shown on the screen:
We’ll place two invisible walls for each platform—one on the left side and one on the right. they’ll sit just above the edges of the platforms to block the spiders from falling off.
Once we see the walls are placed correctly and the spiders stop as they should, we’ll make the walls invisible so they don’t distract the player
Message Rosie:
Let's add invisible walls so the spider doesn't fall off the platforms. We'll use the invisible wall image for the size of the wall.
We'll create two walls for each platform in the game. One wall on the left, and another on the right side. These walls should be placed
- above the platforms
- off to the side of the platforms to block any spider from moving past the sides of any platform
Our spiders will collide with these invisible walls. We'll show the walls to make sure they work, right now.
Invisible wall image is @’https://play.rosebud.ai/assets/invisible_wall.png?ZDLi’
After you generate the code, reload your game, and you'll see the spider running into the ‘invisible’ walls:
Make the Spiders Turn Around
Now that the spiders are stopped by the invisible walls, let’s take it a step further. We’ll make the spiders turn around when they hit a wall or the edge of the platform.
Message Rosie:
When any the side of any spider touches the invisible wall (or the side of the screen):
- Flip the spider image.
- Reverse the direction the spider is moving in
Now you should see the spiders turn around when they run into a wall. This is what it will look like when walls are hidden from the player:
✅ Checkpoint 9:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 10: Death
Our platformer has three cute spiders as enemies, but the player and spiders can’t do anything to each other. Let's allow them to kill one another!
Make the enemies kill the player
When any spider touches the player, we'll immediately restart the game.
In fact, we're restarting the scene in our game, which is like the container for everything that makes up our level. Restarting the scene will bring everything back to the starting point, and give the player another chance after getting caught by a spider.
Dying in a game is important, so we’ll also play a sound effect to make it more memorable. We’ll need to include a link to the death sound effect in our prompt, so we can play the sound in our game.
Message Rosie:
When the enemy touches the player, then let’s immediately restart the game (by restarting the scene).
When the enemy touches the player, you should also play a sound effect.
The sound effect to play when they die can be found at this link:https://play.rosebud.ai/assets/stomp.wav?5rC9
Apply the new code from Rosie to update your game. Then, try touching a spider. You should see everything in the level go back to the starting point, like this:
Kill Those Enemies
The player character will stomp on the spiders to kill them, like Mario’s classic Goomba Stomp.
We’ll know the player has stomped on the spider when the bottom of the player character touches the top of the spider. If the player touches in any other way, the game will restart as it has before.
To kill the enemy, we’ll make the enemy disappear in the game.
We can make killing the enemy more rewarding by playing the sound effect from the last step, and adding a small bounce to the player character, too!
Message Rosie:
When the player touches the enemy, and the bottom of the player is touching the top of the enemy, then remove the enemy from the game, and play the stomp sound effect.
Also, add a small bounce to the player character, when they stomp the spider.
After you've applied the code from Rosie, try playing your game and jumping on a spider. You should now see that the spider dies and the player bounces, like this:
Dying animation
Let's make killing enemies even more satisfying by adding an animation for when the player stomps on the spider. Remember this sprite sheet?
We'll use these images to create another animation. When you squash the spider, it'll flash a few times (like it's shocked!) and then fall over:
Rosie currently can't visually see assets. So, we need to tell Rosie which pictures to use and in what order.
Want to try figuring out which numbers we'll use for our animation?
Hint: we have to count the images in the spritesheet starting from 0, and go from left to right.
Message Rosie:
When the spider is stomped by the player, we’ll play a dying animation.Only after the dying animation is done, should the spider disappear.Also, use these frames of the spritesheet for the dying animation: 0, 4, 0, 4, 0, 4, 3, 3, 3, 3, 3, 3
After you apply the new code from Rosie, try stomping on another spider! You should see something like this:
✅ Checkpoint 10:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 11: Scoreboard
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 stylish scoreboard!
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.
Message 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.
Message 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.
Message 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.
✅ Checkpoint 11:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Section 4: Finishing the Game (15 min)
Step 12: Player Animations
Right now, your platformer has animated enemies and coins, but the player character is awkwardly moving and jumping without any animations.
Let's make your player character run, jump, and fall with smooth moves that make the game feel alive!
Add Animations
We’re going to set up the player’s animations, but you won’t see them in action just yet.
Let’s take a look at the sprite sheet that shows the player standing still, running, jumping, and falling:
Here’s you can describe the picture to Rosie for animations:
- Frame 0 is for the player standing still.
- Frames 1-2 are for running.
- Frame 3 is for jumping.
- Frame 4 is for falling.
For now, the player will still appear to stand still, but we’re setting up the spritesheet so we can use the running, jumping, and falling animations when needed.
Message Rosie:
Load a spritesheet using the image from the link below. For now, the player will remain idle, but the spritesheet will let us switch to other animations when the player moves.
This spritesheet contains frames for the player's animations: idle, running, jumping, and falling. Use frame 0 for the idle animation (player stopped), frames 1-2 for the running animation (loop), frame 3 for jumping, and frame 4 for falling. Each frame has a width of 36 pixels and a height of 42 pixels.
https://play.rosebud.ai/assets/hero.png?czdd
Once you've applied the new code, check your game. The player should still appear to be standing still when moving, but Rosie will let you know the animations are ready to go in the next step.
Play Animations
Now that we’ve added the animations, we can make the player look like they’re jumping, running, or standing still.
To do this, we need to smoothly transition between animations as the player moves. For example, when the player moves up, we’ll show the jump animation, and when they’re moving left or right on the ground, we’ll show the running animation.
Message Rosie:
Let’s use our animations to line up how the player is actually moving with the way they look in the game. Here’s how we’ll know which animation to use:
* When the player is moving up, they are jumping, so we’ll use the jump animation.
* If the player is in the air and moving down, they are falling, so we’ll use the fall animation.
* When the player is on the ground and moving left or right, they are running, so we’ll play the run animation.
* If none of these apply, the player has stopped, so we’ll use the idle animation.
Once you’ve applied the new code, check your game. You should see the player’s animations change as they move: they should run when moving left or right, jump when moving up, and fall when moving down.
✅ Checkpoint 12:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 13: Winning the Game
So far, the player can lose the game by being hit by a spider, but there’s no way to win. Let's update the game so the player can collect a key, unlock a door, and complete the level!
Create the Door
Let’s start by adding a door to the level. This door will later be used to check if the player has the key and can win the game. For now, we’ll focus on placing the door next to the player on the ground at the start of the game.
Here’s the spritesheet we’ll use for the door:
We’ll only use the image of the closed door.
Our game already uses a level data file to know where everything in the level should be placed. We’ll use this file to place the door in the correct spot.
Message Rosie:
Let’s place a door in the level, which the player will be able to unlock later.
Use the level data file to place the door at the correct position near the player. The door should be displayed behind the player, so they appear in front of it when moving past.
Load the following assets:
- Door spritesheet: [door](https://play.rosebud.ai/assets/door.png?Vx0y)
- Frame size: 42x66 pixels
- Use the first frame (closed) for now
Once you've applied the code, check your game. The door should be placed next to the player at the start of the game and should appear behind the player.
Create the Key
Now we’re going to place the key in the level, which the player will need to pick up in order to unlock the door later on. This is what our key looks like:
We’ll use the same level data file to place the key next to the platform at the top-right of the screen.
Message Rosie:
Let’s place a key in the level, which the player will need to collect to unlock the door later.
Use the level data file to place the key near the platform at the top-right of the screen.
Load the following assets:
- Key image: [key](https://play.rosebud.ai/assets/key.png?vNpM)
- Frame size: 34x30 pixels
After you’ve applied the code, check your game. The key should appear near the top-right platform.
Win the Game
Now that the player can pick up the key, we need to work out how the player will win the game—that is, complete the level.
The goal of the game is for the player to fetch the key and use it to unlock the door. Since we only have one level, we'll restart the game once the player unlocks the door.
For the player to fetch the key, we’ll first need to check when the player touches the key. Once they’ve picked it up, the key will disappear, and we’ll track that the player now has the key.
Next, when the player touches the door, we’ll check if they have the key. If they do, we’ll unlock the door and restart the level.
We’ll also play sound effects to make these moments stand out: one sound when the player collects the key, and another when they reach the door and the level restarts.
Message Rosie:
Let’s add the logic for winning the game once the player has collected the key and reached the door.
When the player touches the key:
- The key should disappear.
- Play the key sound effect.
- Track that the player now has the key.
When the player touches the door and they have the key:
- Restart the level.
- Play the door sound effect.
- Reset the player so they no longer have the key after the level restarts.
Load the following assets:
- Key sound effect: [key sound](https://play.rosebud.ai/assets/key.wav?Urcv)
- Door sound effect: [door sound](https://play.rosebud.ai/assets/door.wav?bEfF)
Once you've applied the code, test the game to see that the key disappears when collected and the level restarts when the player touches the door with the key. The player should no longer have the key after the level restarts.
Add a Key Icon
Last, we’ll add a key icon to show whether the player has picked up the key.
Here’s the spritesheet we’ll use for the key icon:
We’ll show the icon on the left to show when the player hasn’t picked up the key, and the icon on the right when the player has collected the key.
Let’s also place the icon in the top-left corner of the screen, next to the coin icon. Remember to move the coin icon and its text to make room for the key icon.
Message Rosie:
Let’s add a key icon to show whether or not the player has collected the key.
Show the icon on the left (first frame) when the player doesn’t have the key.
Switch to the icon on the right (second frame) when the player collects the key.
Place the key icon in the top-left corner, alongside the coin icon. Move the coin icon and text to make room.
Load the following assets:
- Key icon spritesheet: [key icon](https://play.rosebud.ai/assets/key_icon.png?5l1S)
- Frame size: 34x30 pixels
Once you've applied the code, check your game to see the first version of the key icon—it should show the uncollected key.
After picking up the key, check your game again. The icon should now show the collected version of the key.
✅ Checkpoint 13:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Open the checkpoint game to check your progress.
Step 14: Switching Levels
Loading the New Level
Let’s get started by adding a new level to our game, level 0. Once this level is loaded, we can later switch to level 1, which has been used for gameplay so far. We'll use a new level data file to load level 0, which will tell our game where to put everything in the level.
Message to Rosie
Let's add a new level to the game, level 0, and begin the game from this new level. For now, we won’t switch to the next level, level 1, when the game is completed.Use the level data file from the link below to load level 0:- 'level00': [level00.json](https://play.rosebud.ai/assets/level00.json?hacl)
After applying the code from Rosie, check your game. Level 0 should appear when the game starts. Once you unlock the door with the key, level 0 should restart.
Switching to the Next Level
Now that we have level 0 and level 1 loaded in our game, we're ready to set up level transitions.
When a player completes a level, the game should transition to the next level. We’ll make sure to clean up the current level to prepare the game for the next one. This includes removing things like coins and keys.
When the final level is completed, we’ll loop the game back to level 0. Usually, a game would transition to a final game screen, but that’s outside the scope of this tutorial. Looping back to the beginning will make sure the player can keep playing after beating the game.
Message to Rosie
Let's switch to the next level when a level is completed.
Before loading the next level, clean up the current level so things like coins and keys are removed.
Since we don't have a game complete screen, if the final level is completed, we'll load the very first level, level 0.
After applying the code from Rosie, check your game. When a level is completed, it should transition to the next one. If the final level is completed, the game should loop back to level 0.
✅ Checkpoint 14:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Game
Here’s the final game we’ve built, where the player can now transition smoothly between levels and restart the game after completing the final level:
Wrapping Up
Congrats, you've just built an awesome Mario-style platformer from scratch! And you did it all without having to code. Let’s look back on just how far we‘ve come.
First, you set up the game by adding a level, background, and platforms for your hero to jump on. Then, you made your character move around the game. Running, jumping, and falling (thanks to gravity). Next, you added the fun stuff: coins to collect, enemies to dodge, and even death itself. We finished the game with clean animations and smooth level transitions.
Have fun making games with Rosie!
Explore Other EDUCATIONAL GAME TEMPLATES
3D Adventures
Ask Rosie to create a forest using geometric shapes!
PlAY NOW
RANDOMIZER
Create your own randomizer! Ask Rosie to change the sections to match your topic.
PlAY NOW
MATCHING GAME
Create your own matching game! Change the images and text on the cards to match your topic.
PlAY NOW
GROUPING GAME (WORDLE)
Create your own Wordle-like grouping game! Ask Rosie to change the groups and words to whatever you want.
PlAY NOW
