01219245/cocos2d-html5/Sprites

This is part of 01219245.

In this tutorial, we will create a simple html5 program with Cocos2d-x.

In what follows, you should use Firefox as a browser. Chrome has stricter permission so if you want to view Cocos2d-html5 game, you'll have to install a web server software in your laptop.

Getting started

This tutorial is based on Cocos2d-html5 version 2.2.2, however, it should work for other versions as well.

Download the library Cocos2d-html5 from here.

Find a location for the library and unzip the library there. In that directory, it should look like this:

\- Cocos2d-html5-v2.2.2
   |- AUTHORS.txt
   |- CHANGELOG.txt
   |- cocos2d
   |- extensions
   |- external
   |- HelloHTML5World
   |- index.html
   |- lib
   |- licenses
   |- README.mdown
   |- samples
   |- template
   \- tools

Let's create directory mygames inside Cocos2d-html5-v2.x.x and we will put all our games there.

\- Cocos2d-html5-v2.2.2
   |- ..
   \- mygames

A Cocos2d-html5 application needs a few start-up codes. While Cocos2d-html5 provides template files for us, we shall use a slightly modified template instead. You can download it at 219245-template.zip.

To get started, download 219245-template.zip and unzip it into mygames. Rename directory 219245-template to tutorial1 and create a Git repository there.

Starting code

There are 3 main files for loading a Cocos2d-html5 game. In this section, we shall describe what should be in each file, and the changes we made from the original template.

File: index.html

This is the only HTML page for the game. It contains a canvas element where the game would draw on. Note that we can set the canvas size (which would be the game screen size) with the width and height attributes of this element.

<canvas id="gameCanvas" width="800" height="600"></canvas>

It also loads cocos2d.js script file.

File: cocos2d.js

This is the JavaScript file loaded in index.html. This module is responsible for loading other application files. Also, basic configuration of the framework is done here.

In the beginning of the code, there is an object with the framework parameters

    var c = {
        COCOS2D_DEBUG: 2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
        box2d: false,
        chipmunk: false,
        showFPS: true,
        loadExtension: false,
        frameRate: 60,
        renderMode: 1,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
        tag: 'gameCanvas', //the dom element to run cocos2d on
        engineDir: '../../cocos2d/',
        //SingleEngineFile:'',
        appFiles:[
            'src/GameLayer.js'     //add your own files in order here
        ]
    };

A few interesting parameters:

• engineDir: Since we put our program in mygames/tutorial1, the directory to the engine engineDir is set to ../../cocos2d.
• appFiles: You should list all JavaScript files here. Currently, there is just one file src/GameLayer.js
• showFPS: You can hide the frame rate display here.
• frameRate: This is the default framerate.

File: main.js

This is the actual main program of our application. It defines class cocos2dApp which inherits from class cc.Application as:

var cocos2dApp = cc.Application.extend({
    config: document[ 'ccConfig' ],

    ctor: function( scene ) {
        // ..
    },

    applicationDidFinishLaunching: function() {
        // ..
    }
});