Introducing Cocos2d-js adding it to the languages used to develop a Farm Heroes Saga prototype

Today I want to show you what you can do with Cocos2d-JS, and as a first, brief tutorial, I will show you how to create the same stuff I made for the 3rd part of the Farm Heroes Saga tutorial.

Cocos2d-JS is an open-source 2d game framework, released under MIT License. It includes Cocos2d-html5 and Cocos2d-x JavaScript Bindings, making Cocos2d cross platforms between browsers and native application.

On top of the framework provided by Cocos2d-JS, games can be written in Javascript, using API that is COMPLETELY COMPATIBLE between Cocos2d-html5 and Cocos2d-x JavaScript Bindings.

Cocos2d-html5 project can be easily run on browsers which supports HTML5. It also supports running game code as native application in Cocos2d-x JavaScript Bindings without or with little modification.

This is the content of index.html:

There’s nothing interesting in it, just look at the canvas which does not have width and height, they will be set from Cocos2d. Also, a JavaScript file called cocos2d.js is called, and here is its content:

This is mostly a simplified version of the “Hello World” example you can find in Cocos2d, I just want you to have a look at these few lines:

Line 4: this is the value of the id attribute of the canvas you can see at line 7 in index.html file

Line 5: the path to Cocos2d itself.

Lines 6-9: an array of files to load in order to make the game work.

Another file required by Cocos2d is main.js, which is also just a template file, let me show you:

I would point you attention to these lines:

Line 10: resizing the game when the browser is resized

Line 11: defining game resolution and scaling mode

Line 20: the game itself, called myGame

Now, everything is inside the two files declared at lines 6-9 inside cocos2d.js. resource.js is just an array containing all the resources (images) to be preloaded:

and obviously game.js is the core of the game, which logic has already been explained in the post creation of a match 3 game like Farm Heroes Saga using any language – step 2.

That said, I would only let you have a look at lines 54-56 which create and place game elements on stage. Also, remember Cocos2d has the (0,0) origin in the lower left corner rather than the upper left corner we are used to, and the registration point of the graphic assets in in their center rather than in the upper left corner we are used to.

And this is the result, a 320×480 game upscaled to 360×540 to let you see how it works:

And this is how we ported the work made until now on Farm Heroes Saga to Cocos2d-JS. Download the source code with all required libraries.

  • veryyyyyyyyy goooooooood.

  • A-FGames

    Hey, I just started using cocos2d-js for html5 development but I do have a question that I can’t find an answer for. What do you have to deploy on the server for the game to work? I mean I know that deploying almost the whole project will work but my concern is that like that the clients to whom I sell the game will have all the javascript files, and in most cases I don’t want to sell my source code.

    Is there any solution that would allow me to sell a html5 game without sending the source code js files to the client?


  • A-FGames, there is no real solution to this, javascript games will necessarily run in the client side. What you can do is make things harder, using JSCrambler for example.

  • David

    Hey am new to this framework but am not new to Javascript I need to know is there a special way to code Javascript with this frame work or you just code the same way you would create a HTML5 Game? Please I need an answer ASAP for i been searching the whole web for a tutorial book for I think I have to code using there API’s and special format.

  • fikri

    How can I get the source game farm heroes saga ? I have no source at all