From zero to a complete game with Cocos2d HTML5 – Step 1

Emanuele Feronato Game design, HTML5, Javascript

Time to learn something about Cocos2d HTML5, the HTML5 version of the famous Cocos2d-x project.

In this tutorial series I am going to cover the creation of Circle Chain game, which I already developed in AS2, AS3 and Stencyl for iOS.

I assume you have no idea even how to install Cocos2D HTML5 so I am starting from scratch. Before we even start installing Cocos2D HTML5, if you want to test your work offline you need to turn your computer into a webserver because most browsers deny access to certain functions such as XMLHttpRequest that fails for “file:// ” protocol, while Cocos2d HTML5 engine depends on this to read many files.

I found WampServer for Windows the best solution for my needs, if you have a Mac you can try MAMP. Follow instructions in the sites about installing the webserver and where to deploy folders which need to be reached through localhost.

If you don’t want to install such softwares on your computer, you can test your work uploading it to a web space you own.

Then download Cocos2d-HTML5 and place the content of the archive into the folder your webserver will reach as localhost.

Now it’s time to write our first snippet of code. Create another folder into the localhost directory (C:/wamp/www if you are using WampServer), and inside such folder create a file called index.html, with this content:

It’s just the basic page including a canvas element in it. Just have a look at line 5 where I load cocos2d.js and line 8 where I assign gameCanvas id to the canvas.

cocos2d.js file will contain a template file about the configuration of the project:

In most cases you will be able to use this same file just changing line 12, where you specify the path to the main game file and maybe line 9 if you called the canvas id with a different name.

Another file you will need in the same path is main.js:

Just like before, in most cases you will be able to completely reuse it, with the exception of the last line where you’ll want to change the argument of cocos2dApp function.

Finally circlechain.js is simpler than you can imagine if you come from Actionscript, there are sprites and events and layers, have a look:

You can think about schedule method as an enter frame listener, and a layer as a display object container.

And here is the result of the first step, with our ten green circles moving around the screen:

You can also download the source code. Next time, I’ll show you how to add interactivity.

Want to learn more? Learn by example!

Get the full commented source code of an actual commercial cross platform HTML5 game!!

Comments 15

  1. Adam

    Hey Emanuel, great tutorial! Is a web server actually required? It looks like it is just using browser based tech, and nothing for a server. Am I right?

  2. Post
    Author
    Emanuele Feronato

    It’s not strictly required but you probably won’t be able to test it offline without a webserver

  3. Juwal Bose

    Awesome starter for cocos2d HTML5. I see a visible drop in FPS in the example from 59 to 29 in regular intervals. Almost feels like a garbage collector at work, but then that should not be the case right. I am using Chrome latest on Mac. thanks

  4. chaord

    Nice tutorial. ) I have a more general question. I want to use cocos2d-html5 with CocosBuilder. I want to build a simple game, tapping and getting sounds, drag ‘n’ drop etc. I have found it very difficult to find a decent tutorial from the very beginning, setting up CocosBuilder etc. Does anyone have an idea?? Cheers

  5. Ahmed Saeed

    Hi Emanuel, Thanks for the great tutorial. just want to say that in the new version of cocos2d (2.1.5) there will be a small change in he main.js file as the usage of preloading has been changed as they added async preloading so the code should be:

    var cocos2dApp = cc.Application.extend({
    config:document[‘ccConfig’],
    ctor:function (scene) {
    this._super();
    this.startScene = scene;
    cc.COCOS2D_DEBUG = this.config[‘COCOS2D_DEBUG’];
    cc.initDebugSetting();
    cc.setup(this.config[‘tag’]);
    cc.AppController.shareAppController().didFinishLaunchingWithOptions();
    },
    applicationDidFinishLaunching:function () {
    // initialize director
    var director = cc.Director.getInstance();

    // turn on display FPS
    director.setDisplayStats(this.config[‘showFPS’]);

    // set FPS. the default value is 1.0/60 if you don’t call this
    director.setAnimationInterval(1.0 / this.config[‘frameRate’]);

    //load resources
    cc.Loader.preload([], function () {
    cc.Director.getInstance().runWithScene(new this.startScene());
    }, this);

    return true;
    }
    });
    var myApp = new cocos2dApp(circlechain);

    Thanks again for this great tutorial.

  6. Anup

    Hi Emanuele..

    Thanks for the wondeful guide. I have in e question – How do I get a deployable file from the project structure. Ex: I get manifest.webapp file which i can use to deploy in phones supporting html5 apps.
    Rather how do i generate a manifest.webapp or similar file in thsi project structure is a big problem i am facing.

    Please suggest.Any help is appreciated.

  7. Pingback: Aprendiendo Cocos2D-HTML5 (parte 1) » Heart~Bit Games

  8. Shreedhara

    well I developed the game in Cocos2dJs recently, Published a Book on Cocos2dJs

    ‘Cocos2d-Js Mobile Game Development on Steroids’.

    My game TINYRUN is available right now on Google Play.

    Also the source code for the game is available along with the book.

Leave a Reply

Your email address will not be published. Required fields are marked *