How To Make a Cross-Platform Game with Cocos2D Javascript Tutorial: Getting Started

This is not a picture – it’s a game! Click to play!

Did you know you can make a Cocos2D game that runs on the iPhone, Mac, Android, and web all sharing the same exact code?

Don’t believe me? Try clicking the screenshot over on the right – it’s actually a Cocos2D game!

You can do this with an amazing new Cocos2D technology called Cocos2D Javascript. It allows you to write your gameplay code once, and run it anywhere – with full native speed.

The only problem is this new techology is a bit under-documented at the moment. But never fear – we’ve got you covered! :]

In this tutorial, you will port the raywenderlich.com classic Ninjas Going Pew-Pew game to Cocos2D-Javascript. I like implementing this game when learning new frameworks because it’s simple, but covers the most important aspects of making a game.

This tutorial is for both people completely new to Cocos2D as well as those who are already familiar with Cocos2D-iOS and want to learn Cocos2D Javascript.

However, this tutorial assumes you have some basic familiarity with Javascript. If you are new to Javascript, I recommend the book Javascript: The Definitive Guide – this is what I used to get familiar with the language.

Keep reading to become a Cocos2D-Javascript ninja!

About Cocos2D Javascript

Before you start coding, it’s important to understand what Cocos2D Javascript is, and how it works.

The developers of three variants of Cocos2D (cocos2d-iphone, cocos2d-x, and cocos2d-html5) that have teamed up to have a coordinated release that all share the same Javascript API.

The basic idea is you write your core gameplay code in Javascript. Each variant of Cocos2D can then run this Javascript code:

• cocos2d-iphone and cocos2d-x use a library called SpiderMonkey to run the Javascript code you write. But under the hood, all of the core Cocos2D framework code itself is still written in OpenGL/Objective-C/C++, so it still runs very fast.
• cocos2d-html5 runs the Javascript natively, as you might expect.

In addition, the CocosBuilder scene designer is fully compatible with the Javascript API.

To see an example of a full game, check out my January One Game A Month entry: Confinement. This game is made with the Javascript bindings so runs on the web, iOS, Mac, and more.

Cocos2D Javascript Bindings is a brand new technology, and so still has a bit of wrinkles. But it looks to be the future of the framework, so it’s definitely something worth learning and paying attention to!

Which Comes First: The Chicken or the Framework?

So in summary, you write your Javascript code once and can run it using any of the above game frameworks.

But you’ve got to start with one framework, and I’ve found the easiest to use while you’re in the initial development stage is cocos2d-htlm5. This is because the framework itself is also written in Javascript, so when you are debugging you can step into the framework code when necessary and get better error messages.

So that’s what you’ll do in this tutorial – you’ll make the game initially with cocos2d-html5 (for the web) and then later on you’ll use the same code in the other frameworks.

Getting Started

First, download the starter project for this tutorial. Unzip the file and you should see a directory structure like the following:

The starter project contains the following folders:

• Art: The images for the simple game you’ll be making – a monster, a ninja, and his ninja star.
• Platform: Four empty directories for each platform. You’ll be filling those in later in the tutorial – I included the empty directories to give you good structure.
• Sounds: The background music and the “pew-pew” sound effect, made by yours truly.

Note the starter project does not actually contain any code. That’s your job! :]

Hello, Cocos2D-Javascript!

Are you ready to finally see what this magical cross platform Javascript code looks like? Let’s try it out, and create a simple Cocos2D scene that displays hero sprite.

When you are referencing art, images, and other assets in Cocos2D-Javascript, you need to include them in a special array called g_ressources (yes, the typo is on purpose!) so the framework can load them. So the first step is to add the hero sprite into this special array.

So create a new file named Cocos2DSimpleGame\Src\resource.js with your favorite text editor (lately I’m liking Sublime Text 2), and replace the contents with the following:

var dirArt = "Art/";
var s_player = dirArt + "player.png";

var g_ressources = [

    {type:"image", src:s_player}

];

This just adds a single image to your list of resources – the player image. Later on you’ll add the rest of the Art and Sounds to this file, but this is all you need for now.

Next, you’ll create a simple Cocos2D layer to display this image. Create a new file named Cocos2DSimpleGame\Src\MainLayer.js and replace the contents with the following:

// 1
var MainLayer = cc.LayerColor.extend({

    // 2
    ctor:function() {
        this._super();

        // 3
        cc.associateWithNative( this, cc.LayerColor );
    },

    // 4
    onEnter:function () {
        this._super();

        // 5
        var player = cc.Sprite.create(s_player);

        // 6
        player.setPosition(player.getContentSize().width / 2, winSize.height / 2);

        // 7
        this.addChild(player);
    }

});

Let’s go over this line by line:

1. This creates a new class called MainLayer that extends from Cocos2D’s LayerColor class. Note that in Cocos2D Javascript bindings, all Cocos2D classes have the cc prefix.
2. Creates a constructor for the class, that calls the superclass’s constructor.
3. In Cocos2D Javascript bindings, whenever you derive from a Cocos2D class you have to call this method to associate it with the appropriate native class.
4. When a node is added for the first time to a scene, Cocos2D calls onEnter on it. So this is a good place to put initialization code for a layer.
5. This line creates a sprite and puts it in a variable named player. Note for the name of the sprite you pass in the constant s_player that you created earlier.
6. Sets the position of the sprite to be the middle-left of the screen. winSize is a handy constant you will define later.
7. Finally, adds the player sprite to the layer.

Then, add the following methods to the bottom of the file:

// 1
MainLayer.create = function () {
    var sg = new MainLayer();
    if (sg && sg.init(cc.c4b(255, 255, 255, 255))) {
        return sg;
    }
    return null;
};

// 2
MainLayer.scene = function () {
    var scene = cc.Scene.create();
    var layer = MainLayer.create();
    scene.addChild(layer);
    return scene;
};

These are just two helper methods I like to create.

1. The first is a helper method to create a new instance of the MainLayer.
2. The second is a helper method to create a new scene and add the MainLayer as a child.

And that’s it for MainLayer.js for now. The best part about it is the code you just wrote is cross-platform and will work as-is on iOS, Android, and more!