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

Talking about Circle Chain game, Game development, HTML5 and 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:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Circle Chain Cocos2d HTML5 version</title>
		<script src="cocos2d.js"></script>
	</head>
	<body style="padding:0px;margin:0px;background-color:white">
		<canvas id="gameCanvas" width="500" height="500"></canvas>
	</body>
</html>

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:

(function () {
	var d = document;
	var c = {
		menuType:"canvas",
        	COCOS2D_DEBUG:2, // full debug mode
		box2d:false, // no physics in this game
		chipmunk: false, // no chipmunk engine
		showFPS:true, // let's show the FPS meter
		frameRate:60, // 60 frames per second
		tag:"gameCanvas", // id of the canvas element
		engineDir:"../cocos2d/", // path to your cocos2d installation
		appFiles:["circlechain.js"] // path to the main game file
	};
	window.addEventListener('DOMContentLoaded', function () {
		var s = d.createElement("script");
		s.src = c.engineDir + "platform/jsloader.js";
		d.body.appendChild(s);
		s.c = c;
		s.id = "cocos2d-html5";
		document.ccConfig = c;
	});
})();

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:

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.Loader.getInstance().onloading = function () {
			cc.LoaderScene.shareLoaderScene().draw();
		};
		cc.Loader.getInstance().onload = function () {
			cc.AppController.shareAppController().didFinishLaunchingWithOptions();
		};
		cc.Loader.getInstance().preload([
		]);
	},
	applicationDidFinishLaunching:function () {
		var director = cc.Director.getInstance();
		director.setDisplayStats(this.config["showFPS"]);
		director.setAnimationInterval(1.0 / this.config["frameRate"]);
		director.runWithScene(new this.startScene());
		return true;
	}
});     
var myApp = new cocos2dApp(circlechain);

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:

var circlechain = cc.Scene.extend({
	onEnter:function(){
		this._super();
		var layer = new circleChainGame();
		layer.init();
		this.addChild(layer);
	}
})

var circleChainGame = cc.Layer.extend({
	init:function(){
		this._super();
		var circleSpeed = 2;
		var s = cc.Director.getInstance().getWinSize();
		var gameLayer = cc.LayerColor.create(new cc.Color4B(0, 0, 0, 255), 500, 500)
		for(i=0;i<10;i++){
			var greenCircle = cc.Sprite.create("greencircle.png");
			var randomDir = Math.random()*2*Math.PI;
			greenCircle.xSpeed=circleSpeed*Math.cos(randomDir);
			greenCircle.ySpeed=circleSpeed*Math.sin(randomDir);
			gameLayer.addChild(greenCircle);
			greenCircle.setPosition(new cc.Point(Math.random()*500,Math.random()*500));
			greenCircle.schedule(function(){
     			this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
     			if(this.getPosition().x>500){
					this.setPosition(new cc.Point(this.getPosition().x-500,this.getPosition().y));
				}
				if(this.getPosition().x<0){
					this.setPosition(new cc.Point(this.getPosition().x+500,this.getPosition().y));
				}
				if(this.getPosition().y>500){
					this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y-500));
				}
				if(this.getPosition().y<0){
					this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y+500));
				}
			})
		}
     	this.addChild(gameLayer);
		return true;
	}
});

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.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.