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!
Let’s create a fun Mario-style platformer game with our coding assistant, Rosie!
By the end of the guide, you’ll leap across platforms, stomp out pesky little spiders, and fetch the key to unlock the next level in your own game.
You don’t need any coding skills to build this game on Rosebud. Instead, you can complete each step in just minutes with my messages to Rosie. There's even a demo game at every step, so you can check your progress on Rosebud right away!
Here's a quick look at what we'll do to build the game step by step.
Project Roadmap
Building the Level
- Set up the game
- Display the background
- Spawn platforms
- Add a player character
Player Movement
- Move the player
- Add gravity
- Jumping
Gameplay Features
- Add coins
- Add walking enemies
- Death
- Set up the scoreboard
Finishing the Game
- Add player animations
- Winning conditions
- Switch levels
Let’s start by setting up your game in Rosebud. You'll be playing your first level in no time!
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.
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.
Checkpoint
Check your game to make sure that the background image is covering the screen.
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
Check your game to make sure that:
1. You can see platforms displayed over the background.
2. Platforms are placed at the same positions on the screen as shown in the image above.
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
Check your game to make sure that:
- The player character is above the ground
- The player is not affected by gravity
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
Here’s the game we’ve built, where the player can now move across the level:
Check your game to make sure that:
- The player moves left and right using the arrow keys.
- The player stops when no key is being pressed.
- The player cannot move off the screen.
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
Here’s the final game we built: Rosebud Game
Check your game to make sure that:
- Gravity pulls the player character down.
- The player does not fall through the ground.
- The player does not go through walls.
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
Check your game to sure that:
- The character can jump!
- The character jump is adjusted for difficulty
- A sound effect is played when jumping.
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
Check your game to make sure that:
- Coins are displayed in the level with an animation.
- The main character can pick up coins, and they disappear when touched.
- A sound effect plays when picking up a coin.
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
https://play.rosebud.ai/games/aef30b5d-5ed8-4e4f-8a2b-463bb64688df
Check your game to make sure it has:
- There are three cute spiders walking around happily without falling down or going through platforms.
- Spiders turn when they reach an obstacle or the end of the platform, so they are always moving
- The player character cannot actually interact with the spider's movement in any way.
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
Check to make sure that your game has:
- The game will immediately restart when the spider touches the player except when
- The player stomps on a spider to kill it.
- Killing a spider plays a dying animation, sound effect, and makes the player bounce
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!
Check how to add a scoreboard to your game with this tutorial.
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
Check your game to make sure that:
- The player shows the idle animation when standing still.
- The run animation plays when the player moves left or right.
- The jump animation plays when the player moves up.
- The fall animation plays when the player is in the air and moving down.
- The player faces the correct direction when moving left or right.
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.
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
Check your game to make sure that:
- The key and door are placed in the level.
- When the player touches the key, they now have the key, a sound effect plays, and the key disappears.
- When the player touches the door and has the key, the game restarts, and a sound effect plays.
- After the game restarts, the player no longer has the key.
- The key icon shows whether the player has the key or not.
Step 14: Switching Levels
Right now, we only have one level in our platformer, and when you complete it, the game just restarts. That’s no fun!
Let’s fix that by adding another level and setting up transitions from one level to the next.
Check how to create different levels on this tutorial.
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!
.svg)
.svg)
.svg)