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.

Review of physics

You might forget all these, but if you want objects in your game to look and act a bit like real objects, you might have to recall stuffs you learned from mechanics.

Let's look at the basics. An object has a position, its position changes if it has non-zero velocity.

How can you change the player's position? Put something like this in Player.update:

this.setPosition( x, y );

If you want to apply the velocity, you can change the player position based on the velocity.

If there is an acceleration, the object's velocity also changes. The Sprite do not have velocity as its property, so we will add it. You can update the velocity based on the acceleration.

These properties (the position, the velocity, and the acceleration) all have directions. Sometimes, you see negative velocity; this means the object is moving in an opposite direction as the positive direction. We shall follow the standard co-ordinate system for Cocos2d, i.e., for the y-axis, we think of the direction as going upwards.

In Physics, everything is continuous. When writing games, we don't really need exact physics, so we can move objects in discrete steps. (In fact, method update is also called with parameter dt, the time period between this call and the last call, and you can use this to make your simulation more smooth.)

Falling dot

To simulate the player falls, we should maintain the player's current velocity, so that we can make it falls as close as the real object.