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!
Hey! I'd like to help you build a fun, replayable arcade game called Coin Catch. This tutorial will show you how to work with Rosie step by step, so you can create a game that you can build on. So, follow along and let's make a game together!
You can try the game here to get a feel for what we will make by the end: https://play.rosebud.ai/games/d3b99856-0ab7-4e26-b360-f8003003f37c
Features:
We will cover:
- Creating and destroying a player character
- Handling input and movement for player character
- Creating, updating, and removing bombs and coins
- Handling bomb and coin collisions with the player character
- Spawning bombs and coins
- Handling game start, game over, and game restart
Here's a project you can clone, so you can get started right away: https://play.rosebud.ai/games/b8849cb7-d7ad-45f1-95a1-bd7e9bef9b06
Step by step
Step 1: Create and move the cart
Questions to consider and how you could answer them:
What's the height and width?
64 by 32 pixels
Where in the screen will the cart be placed at first?
At the bottom
Which image will you use for the cart? Is it preloaded already, and if so what is its name?
'cart'
Will the cart move?
Yes
What are the movement keys?
A and D
Which directions can the cart move?
Left and right
What happens when they move? Do they speed up or always move at the the same speed?
The cart will speed up in that direction but not go out of control
What happens when the cart stops moving? Do they slow down up or stop immedietely?
The cart will slow down to a stop
Best Practices
A common problem is that your player character will be destroyed when game is over, but the game will still act as if the player exists - such as trying to move it. That will cause a game crash. So, include instructions on what needs to happen when the player character is destroyed to prevent a game crash.
Also, since the player will be interacting with other game objects , like coins and bombs, we may run into a problem where the game object merely passes through the player, when we need them to collide. That error happens when a sprite(like the player) does not follow the physics of your game world. So, mention the need to 'have physics properties for collisions', and this will prevent later errors.
Example Prompt:
Create a class called Cart that's a sprite.
It has properties for height and width, set to 64x32 The positioning will be at the bottom of the screen, within screen bounds It will have physics properties. It's a sprite with the key 'cart'.
When the move direction is left, or right, speed up the cart at a constant speed in that specific direction up to a max speed.
When the move direction is none, slow down the cart at a constant speed to a stop.
Use phaser physics so that the move logic works well with phaser collisions, eg. stops when hit screen bounds.
Add a 'destroyed' state to the Cart class. When the cart is destroyed, disable its physics body and hide it visually and prevent update logic for the cart.
For testing:
In the scene, add a method to create cart. Update the cart if it exists. When the game loads, create the cart.
Update the debug log to show the current move direction, the constants for the speeds, and whether the cart is destroyed
Step 2: Create and use coins
Questions to consider and how you could answer them:
What's the height and width?
32 by 32 pixels
Where in the screen will the coin be placed at first?
Above the screen, and it will not be visible at first.
Will there be more than one of these in the game at a time?
Yes.
When will this object be removed from the game?
When it is completely below the screen, or when it hits the cart.
How will the object move? Is the movement complicated? If so, how could it be simplified right now?
It moves down the screen, side to side. Moving both down the screen and side to side is complicated. Can just move it down the screen at first.
Will this object collide with other game objects? Which ones? What happens as a result of the collision?
Yes, it will collide with the cart. When it collides, it will be removed from the game.
What do we need to know to make sure this feature works?
The coins are created, the coins move, and the coins are removed when hit the cart or are below the screen.
Best Practices
When there will be several game objects of the same type, like coins, it can be difficult to organize and update their rules, like how to create them and when to remove them. So, creating a system that only manages the coins is a way to make it easier to use and update them.
An example prompt to use:
Create a class called Coin that's a sprite. It has properties for height and width, set to 32x32. The positioning will be directly above the top of the screen. It will not be within screen bounds at first. The coin must have a cumululative ID, and provide a way to know whether it's is completely below screen. It will have physics properties. It's a sprite with the key 'coin'.
For movement, the coin will move down the screen at a fixed speed
Then, create a coin manager.
Create coin, update coins(which will move the coin, and remove the coin when below screen), and remove coin(destory coin, remove from array).
When we create a coin, if can get cart, set overlap with cart and setup collision handler, so that wwill remove coin.
For testing:
create a coin manager, create two coins, update the coins.
remove debug lines
add a debug lines
- number of active coins
- the position for each active coin
Step 3: Create a spawner
Questions to consider and how you could answer them:
Will we need to spawn more than one kind of object?
Yes, we will spawn coins and objects
Will changing how often we spawn either object affect the difficulty?
Yes, for example changing the frequency of bombs will make it harder or easier.
How frequently do objects spawn? Is it always the same time between spawns, or is there some variety?
They spawn within a few seconds each other. the time between spawns varies.
Are there times when objects will stop spawning, or start spawning once more?
Yeah, when the game starts and ends.
Best Practices
When a game with spawning logic ends or needs to restart, spawners often will continue creating game objects. That happens when we don't anticipate the need to start and stop spawning the objects. So, we create a spawn system that can start / stop on command.
Also, specific spawning rules - such as how often an object will spawn - often needed to be adjusted or expanded for balancing. Making these changes can often be quite complicated. Designing a spawner that has flexible rules will make it easier to improve the gameplay later.
An example prompt to use:
Create a spawn manager
The spawn manager allows us to configure spawning rules, and start and stop spawning, for each kind of object that we want to spawn, not just coins. It will allow variable timing (minium delay, and maxium delay between each spawn) for each spawn timer. Eg. 1-3 seconds between each spawn of a coin. And, the spawn manager will be independent from any object manager.
For testing: Create the spawn manager, create spawning rule in the coin manager, and start spawning coins. Stop spawning after 10 seconds.
Add debug lines
Whether coins are spawning or not.
For active coin:
- include the specific time delay(eg. 2.5s) that was applied to the coinStep 4: Update coin movement
Questions to consider and how you could answer them:
What directions can the coin move - besides down?
Left and right
How does the coin move? Does it move at the same speed or does it speed up / slow down?
Moves at the same speed
What makes the direction change from left to right, and right to left?
When the coin moves a specific, short distance from where it was created, in either direction
Best Practices
Complicated movement logic can often wait till you've got a basic gameplay loop in place. It's easier to create, test and modify movement mechanics like this when you are 'in the shoes' of the player - trying to catch the falling coins.
An example prompt to use:
Update the coin movement:
- It will slide horizontally at a fixed speed within a short range like 150px. Reverses current direction - left or right - when reaches one end of the range.
For testing:
Add debug lines for coin horizontal speed and current move direction
Step 5: Create and use bombs with spawner
Questions to consider and how you could answer them:
Does this game object act a lot like any other game object? Does it have similar movement, appearance, or collision logic? Which object?
Yes, it's like a coin. It falls from the top of the screen, gets removed when hits the cart, etc.
If so, what are the few differences?
Doesn't move horizontally
Collides with the ground and gets removed
The cart is removed when the bomb hits the cart, then the game ends.
Best Practices
When creating a new game object that behaves very much like a game object already in your codebase, it's tedious to repeat the same instructions. Programmers often reuse code when this happens, and we can do the same with Rosie's help.
An example prompt to use:
Repurpose the coin and coin manager code, for a new object called bomb.
Bomb and bomb management logic will be the same as coin, except for the traits:
- Bomb will not have horizontal movement.
- Bomb will collide with the bottom of the screen and collide with cart
- The cart must be destroyed when bomb and cart collide.
- Bomb will be removed
- when any part of bomb is below the screen bottom, rather than when completely goes below screen.
- when collides with cart
- Bomb will have a new image: https://play.rosebud.ai/assets/red_circle.png?6DoL
Testing:
- Start spawning bombs (1-3s delay)
- Continue spawning coins
- Remove existing debug lines
- Add debug lines
- number of active bombs
- whether cart is destroyed
Step 6: Create and transition between games states (setup, play, over)
Questions to consider and how you could answer them:
Is the game replayable?
Yup.
What happens at the start of the game, before you do anything? Is there a setup phase or does the gameplay happen immediately?
There's a setup phase at the start. The cart gets created, and the game waits for you to press the space key to start the action.
If there's a setup, what causes the transition to gameplay?
The game switches from setup to play when you hit the space key.
What causes the gameplay to end?
The game ends two seconds after a bomb hits the cart and destroys it.
What happens when the game ends? Is there an end phase or does the gameplay restart immediately?
When the game ends, there’s an over phase where bombs and coins are removed, and their spawning stops.
If there's an end phase, what causes the transition back to the initial phase?
You transition back to setup when you press the space key while in the over phase.
Best Practices
Update the game loading step (create() in the main scene) to prevent leftover game objects once the game is restarted. Setting the game state to setup, instead of creating the cart or spawning bombs and coins, will help create smooth transitions between stages of the game.
Example prompt to use:
Create a game state manager, which handles what happens in the game when the game state changes. The end purpose will be to manage the flow between:
setup -> play, then play -> over, over -> setup.
The cues to transition are:
when the game is loaded -> setup
when the space key is pressed and game is setting up -> play
when it's two seconds after the bomb hits the cart -> over
when the space key is pressed and game is over -> setup
This is what happens for each state change:
- setup:
- Create the cart
- play:
- immediately create a single bomb and single coin
- start spawning bombs and coins
- over:
- remove bombs and coins
- stop spawning bombs and coins
Finally, we modify the game load to make sure we can easily replay our game. In create() we must not:
- create cart, or setup spawning.
- Instead, set the game state to setup.
Testing:
- Add debug lines
- game state
- whether cart is destroyed
- whether spawning bombs/coins
- active bombs and coins
Wrapping up
Congrats! You've built a replayable arcade game using Rosie. We've covered creating and controlling the player character, managing bombs and coins, handling collisions, and implementing game states. Now you've got the foundation to expand and customize your game further. Happy game-making!
.svg)
.svg)
.svg)