Tutorial: Cocos Creator: learning Flappy Bird (Part 3)

Cocos Creator: learning “FlappyBird”

Part (3): building a world for the bird

Note: This is a multi-part tutorial: Part 1 | Part 2

Note: Parts 4-11 coming soon.

Introduction and getting help

You are welcome to post to the Cocos Creator category on the Cocos forums to talk about any issues you encounter during the development process. This tutorial does not teach how to code.

Please prepare your development environment before starting this tutorial. If you are having trouble with our tutorial, please take a look at the following documentation:

Preparing the development environment:

Let’s get started

This tutorial focuses on using Cocos Creator to build a Flappy Bird clone. Remember Flappy Bird?


So far, from Part 1 and Part 2, we have our Bird and we can make it appear to fly. This is great, but currently, it just flys against a dark background. Let’s make the world our Bird lives more enjoyable for it.

First, click the Canvas node and change the Canvas’s Design Resolution property to 288 and 512 in the Property inspector. This changes the resolution of our game to 288 x 512? Why this size? Simple, the background image is this same size. We can see the results:

Note: It is crucial to understand the importance of Canvas node is. Please make sure to read the Canvas Node documentation

Second, select the Canvas node, right-click -> Create Node -> Create Render Node-> Sprite, and rename it to Bg.

Next, drag the \assest\Texture\img_bg image into the Sprite Frame option on the right. Example:

You can now see a background image in the Scene Editor but notice the Bird is gone. It’s not actually missing! It is just covered up with the new background image. This is because of a concept called z-order. Basically, node objects are rendered in the order they are added to the node-tree. Since the background was added second, it is rendered after the bird, therefore covering it up.

Note: Understanding Node tree is important. Please make sure to read the Node Tree documentation

Last, let’s fix the order of out nodes so that the bird displays in front of the background image. Very simple, select the Bg node and drag it up above the Bird node. Example:


After dragging, you can see the Bird.

Save your progress

Find the Save button in the scene editor. Click Save once.

So where are we?

At this step, our tutorial is taking shape.


Stay tuned for Part 4 of this tutorial!

Special Thank you!

To HuJun for creating this tutorial.