Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

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

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (13 votes, average: 4.92 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 14 comments

  1. Adam

    on May 16, 2013 at 7:36 pm

    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. Emanuele Feronato

    on May 16, 2013 at 10:22 pm

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

  3. Juwal Bose

    on May 17, 2013 at 12:47 pm

    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. Jairo Luiz

    on May 17, 2013 at 5:12 pm

    Great tutorial!!!

  5. chuyen van phong

    on May 18, 2013 at 4:37 am

    Wow..It looks like it is just using browser based tech, and nothing for a server. Am I right?

  6. chaord

    on August 22, 2013 at 5:03 pm

    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

  7. socartpix

    on August 26, 2013 at 5:56 am

    wow amazingtutorial, finally i can understand the cocos 2dx thanks to you. 8D

  8. Ahmed Saeed

    on August 26, 2013 at 9:50 am

    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.

  9. @alxcancado

    on September 28, 2013 at 7:07 am

    Hi Emanuele!

    Your Circle Chains tutorials inspired me, so I take a time and port it to Unity3D, take a look!
    http://alxcancado.tumblr.com/post/62482465038/gamedev-tutorial-basic-circle-chain-engine-using

    Well, I’m reading your blog since that firsts “Ball” tutorials, long time ago! Just want to say thanks!

    Cheers,

    Alex.

  10. Anup

    on October 31, 2013 at 6:52 am

    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.

  11. Aprendiendo Cocos2D-HTML5 (parte 1) » Heart~Bit Games

    on November 7, 2013 at 9:34 pm

    [...] un poco menos usando, Cocos2D-HTML5 (parte de la familia Cocos2D-X), y si bien he encontrado unos cuantos tutoriales en inglés, sólo he visto uno en español (y el autor lo dejó abandonado por.. ¿irse [...]

  12. Inktuara

    on February 11, 2014 at 9:37 pm

    Hi. any body here who can help me to find a good tutorial. please email me. bryandalo@gmail.com please… i have a Coco2d-HTML5 but all tutorial isnt working. im tolally newbie. Please. Thanks!

  13. harsh metha

    on February 23, 2014 at 11:34 am

    May god bless you Emanuele

  14. Shreedhara

    on April 14, 2014 at 11:45 am

    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.

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×