How to Create a Game Like Flappy Bird in Scratch - dummies

How to Create a Game Like Flappy Bird in Scratch

By Derek Breen

Have you played Flappy Bird? You are going to make a game that works quite a bit like Flappy Bird but is NOT Flappy Bird. Why NOT? Because if you make a game that looks and works like Flappy Bird and you CALL it Flappy Bird, then the guy who CREATED Flappy Bird would be displeased. Plus, it is actually AGAINST THE LAW!

So, instead, you will make a game called Flapping Bat.

Create online project

  1. Go to Scratch’s website and click the Create button.

    image0.jpg

  2. Change the name from Untitled to Flapping Bat.

    image1.jpg

    While logged in, Scratch will automatically save your project while you work.

Create offline project

  1. Open the Scratch 2 Offline Editor on your computer.

    image2.jpg

  2. Select File→Save As and type Flapping Bat.

    image3.jpg

Delete the cat

Every time you create a new Scratch project, it will include one sprite, the Scratch mascot: Scratch Cat.

image4.jpg

You can delete the cat (or any other sprite) by holding the Shift key on your keyboard while clicking it directly. A small menu will appear with the option to delete whatever you Shift-clicked. You will be doing a lot of Shift-clicking to save you time while working on Scratch projects.

So go ahead . . . Delete that smiling Scratch cat!

image5.jpg

If you are used to right-clicking with a mouse or trackpad, you may use that technique as an alternative to Shift-clicking.

Choose Player sprite

A sprite is any graphic element in a Scratch project other than the Stage, which represents the background. For this game, you will create three sprites: Player, Ground, and Pipe.

  1. Look for the New Sprite area beneath the Stage and click the first icon. Choose Sprite from Library.

    image6.jpg

  2. Select the sprite named Bat2 and then click OK.

    image7.jpg

  3. Shift-click the Bat2 sprite and choose Info.

    image8.jpg

  4. Change the name from Bat2 to Player because, in your game, the player will control the bat sprite.

    image9.jpg

  5. Click the Back button (white triangle on blue circle) to close the Info window.

    image10.jpg

Paint Ground sprite

  1. In the New Sprite area, click the second icon: Paint New Sprite.

    image11.jpg

  2. Shift-click the new sprite, choose Info, and change the name to Ground.

  3. Click the Costumes tab.

  4. Click the Rectangle tool on the Paint Editor canvas beneath the Costumes tab.

    image12.jpg

  5. Click the Solid rectangle option.

  6. Click a green color swatch.

  7. Click near the bottom-left corner of the Paint Editor canvas and then drag up and to the right side until you have a rectangle all the way across the bottom.

    image13.jpg

If the ground sprite appears off-center on the Stage, click and drag it into place.

image14.jpg

Paint Pipe sprite

The goal of your game is to flap the bat’s wings and fly through holes between two pipes. You will use a cool programming trick so that you only need one Pipe sprite.

  1. Click the Paint New Sprite icon.

  2. Shift-click the sprite, choose Info, and change the name to Pipe.

  3. Click the Costumes tab.

  4. Click the Rectangle tool on the Paint Editor canvas beneath the Costumes tab.

  5. Click the Solid rectangle option.

  6. Click a gray color swatch.

  7. Click and drag across the middle of the Paint Editor canvas to draw a vertical pipe.

    image15.jpg

To make a hole for the bat to fly through, click the Select tool, click and drag across the middle of the pipe, and press the Delete or Backspace key on your keyboard. (Don’t worry if your bat is too big; you will fix that soon.)

image16.jpg

Good work! Now you have all three sprites you need to make your game. What comes next? That white background is a bit plain. Here’s a quick way to make a realistic sky.

image17.jpg

Paint sky gradient on the Stage

The term gradient may be new to you. Scratch includes three types of gradients, which allow you to fade between two colors. Part of what makes a sky look realistic is when it appears brighter toward the horizon and darker at the top of your game screen.

  1. Click the Stage button.

  2. Click the Backdrops tab.

    image18.jpg

  3. Select the Fill with Color tool.

    image19.jpg

  4. Click the Horizontal Gradient button.

  5. Select the white color swatch.

    image20.jpg

  6. Click the Swap Colors button.

  7. Select a light blue color swatch.

  8. Click anywhere to fill the Paint Editor canvas with the color gradient.

    image21.jpg

Doesn’t the sky look more realistic now? Gradients can be used for all sorts of effects (like making something look metallic). (Did somebody say, “Vector Robots”?)