01219245/cocos2d-js/Sprites2

This is part of 01219245, 2nd semester 2557.

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 develop basic game mechanics in this tutorial. We will try to add special effects to the game in the next tutorial.

Make sure you have completed Tutorial 100 on basic sprites.

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 pair.
• Move the pillar pair across the screen.
• Let the pillar pair reappear.
• Check for player-pillar collision.
• Make the game with one pillar pair.
• Show more than one pillar pairs.

The player and its movement

You should start by creating a new Cocos-JS project.

cocos new -l js --no-native ชื่อโปรเจ็ค

This will create an example HelloWorld project. You should clean up the example by following instructions outlined in Tutorial 100.

Then, create a git repository at the project directory.

Create your git repository.

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 res/images/dot.png and try to make it look cute.

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

File: src/Player.js

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

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

File: src/GameLayer.js

        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.

File: main.js

var screenWidth = 800;       // add these two constants
var screenHeight = 600;      //

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(screenWidth, screenHeight, cc.ResolutionPolicy.SHOW_ALL);    // use them here
    // ...
};
cc.game.run();

Last step is to update configuration and resource files.

We need to add src/Player.js to the jsList in project.json.

File: project.json

    "jsList" : [
        "src/resource.js",
        "src/GameLayer.js",
        "src/Player.js"
    ]

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

Commit your work.