Perfectly Recreating Flappy Bird in HTML5

Flappy Bird is now over six years old! Doesn’t time fly? (Sorry, I couldn’t resist!) :laughing:

When Flappy Bird first arrived on the scene, I recreated it in PlayCanvas (see original post).



Since then, it’s been played nearly 3 million times. So I thought I’d blog about how a game like this is made.

Flappy Bird is built on a simple spritesheet:


When I built it originally, PlayCanvas didn’t have any integrated tools to make 2D game creation easy. The only thing available was the plane primitive. So I built the entire game with textured planes. Each plane had to have an identical aspect ratio to the sprite in the spritesheet. And then I had to create a material for each sprite and use texture offset and tiling properties to grab the correct part of the spritesheet texture. It was painstaking work!

However, last year, we released the shiny Sprite Editor. Suddenly, making 2D sprite-based games got a whole lot easier! So I rebuilt that original Flappy Bird clone using the very latest tools. This post explains some of the steps I took.

Creating the Sprites

Before you start, bring up your project settings in the Inspector and edit your Asset Tasks settings like so:


This ensures that, when you drop the Flappy Bird spritesheet into the Editor, it maintains it’s non-power of two dimensions and is converted to a texture atlas.

You can get the spritesheet for Flappy Bird here. Download it and drag it into the Assets panel. Your new texture atlas should look like this (note the texture atlas icon in the top left):


You can then double click on the texture atlas to open it in the Sprite Editor:

You need to drag out a rectangle around every frame you need and create a sprite asset from each one. Kinda like this:

Notice how I use the TRIM SELECTED FRAMES button to get a tight box around each sprite.

Creating Animated Sprites

The Flappy Bird game has a number of sprites that animate using multiple ‘frames’. The Sprite Editor also allows you to create this. Here’s how:

Extract all sprites you need from the spritesheet and you get this:

And your sprites are available in the Editor’s Asset panel to be deployed into your game scene:

Creating Sprite Entities

It’s super-easy to create a sprite entity in your scene from a sprite asset. Just drag ‘n’ drop!

Controlling Draw Order of Sprites

Let’s add the ground. You’ll notice that you get a different draw order depending on the position of the camera.

For sprite-based games, it’s often useful to be able to explicitly control the draw order of sprites. To do this, we need to do a few things:

  1. Create a new Layer which we’re going to call ‘Sprites’
  2. Set the new Layer to have a Manual sorting.
  3. Add the transparent sub-layer for our new Layer to the Render Order of the scene (all sprites are treated as being transparent).
  4. Tell our camera to just render the new ‘Sprites’ Layer.
  5. Put our sprite entities into the ‘Sprites’ Layer.
  6. Set the draw order of the Background to 0 and the Ground to 1 to explicitly made the latter draw after the former.

Everything written above should be enough to enable you to graphically reproduce Flappy Bird perfectly. To implement the actual game logic, you’ll need to write some JavaScript! :smile:

Fortunately, the whole project is public:

Go ahead and fork it, edit it - do whatever you like with it! I maybe got a bit obsessed with recreating the original game exactly rather than focus on making the code easy to follow. But hopefully, it’s still a good learning resource.


can you make a version for ios 14 and the Iphone 12 mini. On the iphone XR running IOS 14 it is very slow… I need flappy

1 Like

Unfortunately, it’s not accurately recreated. The animation of the bird tilting its head upward after the user taps the screen isn’t properly emulated at all. The bird’s physics, and therefore the entire gameplay, is also much different and that consequentially makes the game far easier.

Well, sure, it’s not going to be identical. I recreated solely from this video:

But it looks pretty close to me. And the way the head tilts upwards looks very similar to the video.

1 Like

Hahaha this is ridiculously close if you ask me, but if whatever it is really bothers you that much, as Will said, feel free to fork it and modify the physics however you want, that’s what it’s posted up for. This sounds like pretty harsh criticism for a clone with this much love put into it.


Can someone explain to me in what order should I look at the scripts?

Hi @fingerzz and welcome,

Script components execute in the order they are added to the hierarchy. So a good starting place is to start from top to bottom, that is from the Root entity in the hierarchy and study how scripts execute.

Thanks for replying me and greeting me to community. Reason im asking is that im creating educational guide for people who has minimal HTML, CSS and JS knowledge as my thesis.

I think a good starting point to explore the scripts is to look at game.js:

That manages the overall game. Another interesting one is bird.js that manages Flappy himself:

1 Like

A post was split to a new topic: How to replace the Flappy Bird bird image to a butterfly

the bird is falling very fast compared to the original

the project is almost perfect, but this detail that I noticed started to bother me, it’s almost a perfect replica of the original game