01219245/cocos2d/Sprites2

This is part of 01219245.

In this tutorial, we will recreate a clone of a wonderful Flappy Bird. Let's call it Flappy Dot (as our player would look like a dot). We will start with basic game mechanics, then we will try to add special effects to the game.

Task breakdown

Before we start, make sure you know how this game works. You may want to try it for a bit. I guess many of your friends have it on their phones. This is how our game would look like:

As usual, let's start by thinking about the possible list of increments we would add to an empty project to get this game.

When you get your list, please see the steps that we plan to take here.

• Show the player on the screen.
• The player can jump and fall. (Implement player physics)
• Show a single pillar.
• Move the pillar across the screen.
• Check for player-pillar collision.
• Let the pillar reappear.
• Show more than one pillars.

The player and its movement

You can start from our template 219245-template.zip.

Creating the sprite

In this step, we shall create a sprite for the player, and show it in the middle of the screen.

Use a graphic editor to create an image for our player. The image should be of size 40 pixels x 40 pixels. Save the image as images/dot.png and try to make it look cute.

We shall create class Player as src/Player.js.

var Player = cc.Sprite.extend({
    ctor: function() {
        this._super();
        this.initWithFile( 'images/dot.png' );
    }
});

We shall create the player in GameLayer.init. To do so add these lines:

        this.player = new Player();
        this.player.setPosition( new cc.Point( screenWidth / 2, screenHeight / 2 ) );
        this.addChild( this.player );
        this.player.scheduleUpdate();

Note that we use constants screenWidth and screenHight (which are 800 and 600, respectively). Don't forget to add this constant in main.js.

Try to refresh the game. You should see your sprite in the middle of the screen.

Commit your work.