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 there! I'm excited to help you build a game I'm sure you've played before.
I know it can be frustrating to make games with little coding experience, especially when you haven't seen how it's done. That's why this tutorial will show you how to work with Rosie step by step, so you can create a playable game. Just a heads up, this is an early version and it's not fully finished yet. But by trying it out now, you'll help make the final tutorial even better. So, follow along and we'll make a great game together!
You can try the game here to get a feel for what we will make by the end. And, to play again when you hit the pipe or ground, click the key 'R' to restart: https://play.rosebud.ai/games/ab5edd99-b392-4932-bc8a-31ef6b94a215
Setup the Project
Use the project below to get started. The images have already been been loaded, and the background and screen is setup for you.
- Click this link: https://play.rosebud.ai/games/d57876ed-46bc-49f8-a15e-3bcbb1ef96f9
- Click the 'Remix' button at the top right
- Say hi to Rosie!
Step by Step
Now, we can focus on the gameplay. The project wouldn't be Flappy Bird without a few key features, so we will create:
- A bird that can flap and fall.
- Ground and pipes for collision.
- Pairs of pipes scrolling across the screen.
- A game over condition when colliding with a pipe or the ground.
- The ability to restart the game after it ends.
Step 1: Create the Bird
Goal
The bird will fall, and you can flap the bird by clicking the mouse button.
Prompt:
Define a Bird class at a position x,y that uses phaser sprite. The sprite will be 32 by 32 px, and use the image called 'bird_placeholder' The sprite needs to be in the physics world so it can collide with other game objects, and needs to collide with the screen borders, so it cannot go off screen.
When the bird is created it must setup inputs and gravity. When the left mouse button is clicked, then the bird will flap. When the bird flaps, it will move up the screen at the flap speed.
Create the bird in the center of the screen.
Step 2: Add Ground and Pipe to Interac With
Goal
The bird can flap to a pipe, fall to the ground, and collides with both objects.
Prompt:
Define a class Ground at x,y that uses phaser sprite
The sprite will be screen width and 5% of screen height, and use the image called 'ground'
The sprite needs to be in the physics world so it can collide with other game objects
The sprite will collide with the bird sprite in the scene.
When the ground is created it will setup collisions a collision handler that does nothing.
When the game starts, you must also:
Create a pipe above and not touching the bird so can flap to it.
Create the ground at the bottom of the screen so can fall to it.
Step 3: Scroll a Pair of Pipes Across the Screen
Goal
Create a side scroller, and start using it for the pipe pairs. The pipe pair will spawn at the right, move to the left, and get removed when exiting the screen.
Prompt:
Define a class SideScroller
The purpose of the class, right now, will be to:
- 1. spawn pipe pair
- 2. remove pipe pair
- 3. scroll pipe pair
- 4. check when to spawn new pipe pair: TODO
- 5. check when to remove pipe pair
Spawning:
A pipe pair will start directly beyond the right side of the screen.
A pipe pair must have a fixed vertical gap between each pipe. The vertical position of each pipe pair must have a random offset from the center.
Scrolling:
The scroll speed will be 120. When the pipe pair is spawned it will be set to the scroll speed from right to left.
Removing:
The side scroller which check for removal every frame.
When the pipe pair goes directly beyond the left side of the screen, remove it from the game.
When we create side scroller it must:
- create a pipe pair.
Step 4: Keep spawning pipes
Goal
A new pipe pair will scroll onto the screen every time the bird passes a pipe pair at the center of the screen.
Prompt:
The side scroller must spawn another pipe pair when the most recent pipe pair reaches the cue pipe position, which is the center of the screen width.
The side scroller must check the position of the most recent pipe pair every frame.
Step 5: Handle Game Over
Goal
When the bird collides with a pipe or the ground, the game will end. When the game ends, stop scrolling and disable flapping.
Prompt:
End the game on collision between bird and ground, and on collision between bird and pipe.
The game end must stop all scrolling and prevent bird inputs.
The game must not end if it is already over.
Also, create a shortcut for testing. When E is pressed, we will end the game.
Step 6: Restart Game
Goal
Player can choose to play again from the beginning once the game is over.
Prompt:
Add ability to restart the game.
When the game restarts:
- All game elements that have been made since game started are cleared. This includes input methods, sprites, etc.
- Initial game objects are created.
- The game is no longer over.
You must create reusable methods in the scene to clear game elements, and create game elements.
You must prevent restart when the game is not over.
Also, create a shortcut for testing. When R is pressed, we will restart the game.
Wrapping Up
That's all for the Flappy Bird tutorial! Also, a little feedback will help me make this a lot better. Could you answer any of these next questions, or simply share your experience, real quick?
- What was your first impression of the tutorial? What did it feel like to follow along?
- What were the frustrating moments? How did you get eventually get past them?
Thanks for taking the time to help me out!
.svg)
.svg)
.svg)