Flappy Bird is now over six years old! Doesn’t time fly? (Sorry, I couldn’t resist!) 
When Flappy Bird first arrived on the scene, I recreated it in PlayCanvas (see original post).
PLAY NOW
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:
- Create a new Layer which we’re going to call ‘Sprites’
- Set the new Layer to have a Manual sorting.
- Add the transparent sub-layer for our new Layer to the Render Order of the scene (all sprites are treated as being transparent).
- Tell our camera to just render the new ‘Sprites’ Layer.
- Put our sprite entities into the ‘Sprites’ Layer.
- 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! 
Fortunately, the whole project is public:
https://playcanvas.com/project/375389/overview/flappy-bird
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.
