A quick update. I downloaded the latest Cocos2d-HTML5 version, with the fixes for missing particle textures, and you can now run the same JavaScript code for canvas and/or WebGL rendering.

You can download the source for this version on github.

You can run the game here.

And you can even use the new simulator here, just press play.

Nothing much changes in this version, except for the renderMode flag you add to your configuration object (you’ll find this inside the file MoonHerder-html5.js, set to a value of 2, which means WEBGL.)

Of notice are the changes I had to make to the drawing logic in the game. This remains the one bit of logic in Cocos2D-HTML5 that still needs to be ported differently depending on your target. But if you are interested in learning how to draw primitives in your games I suggest you compare the logic inside the DrawLayer.js script from the various different versions you’ll find on my github account.

I‘ve decided to take a very simple application done in Flash and transform it in JavaScript for Canvas, using an open source framework, trying to use as many features typically associated with Flash as I could cram in a tiny bit of code, and see how the framework handled them (mainly: events, bitmap data manipulation, the display list and masks).

The application is the core logic inside an old project, FlashNose3D, which I used years ago to talk about PureMVC. Only here, I’m just using the animation bit.

The framework I picked was EaselJS, which is based on ActionScript.

Here is the test application in Flash, using circles:

And here are the classes:

Main.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

package  {
 
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
 
	public class Main extends Sprite {
 
		private var _slices:Array;
 
		function Main () {
			_slices = [];
 
			var startWidth:int = 400;
			var numSlices:int = 40;
			var fraction:int = startWidth/(numSlices - 1);
			var s:Slice;
			for (var i:int = 0; i < numSlices; i++) {
				s = new Slice ((startWidth - i * fraction) * 0.5, i);
				s.x = stage.stageWidth >> 1;
				s.y = stage.stageHeight >> 1;
				this.addChild(s);
				_slices.push(s);
			}
			addEventListener(Event.ENTER_FRAME, on_Loop);
		}
 
 
		private function on_Loop (event:Event):void {
			var len:int = _slices.length;
			var s:Slice;
			var previous:Slice;
			for (var i:int = len-1; i >= 0; i--) {
				s = _slices[i];
				if (i == len-1) {
					s.update(new Point(mouseX, mouseY));
				} else {
					previous = _slices[i + 1];
					s.update(new Point(previous.x, previous.y));
				}
			}		
		}
	}
}

Slice.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

package  {
 
	import flash.display.Sprite;
	import flash.geom.Point;
 
	public class Slice extends Sprite {
 
 
		private var _vx:Number = 0;
		private var _vy:Number = 0;
		private var _friction:Number = 0.2;
		private var _spring:Number = 2;
 
		function Slice (radius:int, index:int) {
 
			this.graphics.beginFill(index * 50);
			this.graphics.drawCircle(0, 0, radius);
			this.graphics.endFill();
		}
 
 
		public function update (target:Point) {
 
			var diffx:Number;
			var diffy:Number;
			var ax:Number;
			var ay:Number;
 
			diffx = target.x - x;
			diffy = target.y - y;
 
			ax = diffx * _spring;
			ay = diffy * _spring;
 
			_vx += ax;
			_vy += ay
 
			_vx *= _friction;
			_vy *= _friction;
 
			this.x += _vx;
			this.y += _vy;
 
		}
 
	}
 
}

Then the EaselJS version. Click anywhere on the image to start the animation (although the effect looks better if you click on: nose, or mouth, or eyes).

And the code:

Main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

//declare our globals
var NUM_SLICES = 50;
var FRICTION = 0.2;
var SPRING = 2;
 
(function(){
 
	this.animate;
	this.slices;
	this.stage;
	this.image;
 
 
 	this.init = function() {
 
		this.animate = false;
		this.slices = [];
 
		this.image = new Image();
		//handler to preload our image
		this.image.onload = handleImageLoad;
		this.image.src = "doctor3.jpg";
	}
 
	this.handleImageLoad = function () {
 
		var canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
 
 
		var ratio = image.width/(NUM_SLICES + 1);
		var s;
		for (var i = 0; i < NUM_SLICES; i++) {
 
			if (i == 0) {
				s = new Slice ( image, -1 );
			} else {
				s = new Slice ( image, (image.width - i * ratio) * 0.5 );				
 
			}
			s.x = canvas.width * 0.5;
			s.y = canvas.height * 0.5;
 
			stage.addChild(s);
 
 
			slices.push(s);
		}
 
 
		//add stage event: Mouse Click
		stage.onClick = function (event) {
 
			if (animate) return;
 
			var p = slices[0].globalToLocal(event.stageX, event.stageY);
			var len = slices.length;
 
			for (var i = 0; i < len; i++) {
				slices[i].setNose(p.x, p.y);			
			}
 
			animate = true;
		}
		//render stage
		stage.update();
 
		//register main loop event
		createjs.Ticker.setFPS(30);
		createjs.Ticker.addListener(window);
	}
 
 
	//the main loop
	this.tick = function () {
 
		if (animate) {
 
			var len = slices.length;
			var s;
			var previous;
 
			for (var i = len-1; i >= 0; i--) {
				s = slices[i];
				if (i == len-1) {
					s.update(stage.mouseX, stage.mouseY);
				} else {
					previous = slices[i + 1];
					s.update(previous.x, previous.y);
				}
			}
 
		}
		//render stage
		stage.update();
	}
 
 
})();
 
window.onload = init;

Slice.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

(function(window) {
 
 
	this.circleMask;
    this.vx;
    this.vy;
 
    function Slice(image, radius) {
 
        this.initialize();
 
        var canvas = document.getElementById("testCanvas");
        this.image = image;
 
        this.regX = image.width * 0.5;
        this.regY = image.height * 0.5;
 
        vx = 0;
        vy = 0;
 
        if (radius > 0) {
 
        	this.circleMask = new createjs.Shape();
	        this.circleMask.graphics.beginFill("0xFFF");
			this.circleMask.graphics.drawCircle(0,0,radius);
			this.circleMask.graphics.endFill(); 	
        }    
    }
 
    Slice.prototype = new createjs.Bitmap();
 
    Slice.prototype.circleMask;
    Slice.prototype.vx;
    Slice.prototype.vy;
 
    Slice.prototype.Bitmap_initialize = Slice.prototype.initialize;
 
    Slice.prototype.initialize = function() {
        this.Bitmap_initialize();
    }
 
 
    Slice.prototype.setNose = function (noseX, noseY) {
 
        this.regX = noseX;
        this.regY = noseY;
 
        if (this.circleMask) {
            this.mask = this.circleMask;
        }
    }
 
    Slice.prototype.update = function (targetX, targetY) {
 
        var diffx, diffy, ax, ay;
 
        diffx = targetX - this.x;
        diffy = targetY - this.y;
 
        ax = diffx * SPRING;
        ay = diffy * SPRING;
 
        vx += ax;
        vy += ay
 
        vx *= FRICTION;
        vy *= FRICTION;
 
        this.x += vx;
        this.y += vy;
 
        if (this.circleMask) {
            this.circleMask.x = this.x;
            this.circleMask.y = this.y;
        }
 
    }
 
    Slice.prototype.normalize = function (p) {
    	var length = Math.sqrt(p.x*p.x+p.y*p.y);
    	return 	new createjs.Point((p.x/length), (p.y/length));
	}
 
    window.Slice = Slice;
}(window));

Of course, the JS version uses an actual image, so the classes are a bit more extensive.

But you can see, among other things:

- how to write classes with EaselJS
- how you can extend a display object in EaselJS. In the code I extended the Bitmap class.
- how to draw vector shapes. I used a circle for the mask.
- how to mask a bitmap with a vector shape.
- how to add the main loop
- how to add mouse events on stage. The same logic would work for any display object.
- how to change the registration point of a display object with its properties regX and regY.

Yep, I wrote a book. It’s called Cocos2d-x by Example Beginner’s Guide, and as the name implies, it covers the development of games with the C++ based framework Cocos2d-x. You’ve probably seen a few tutorials on this blog related to Cocos2d-x and C++, but now, there’s a whole book of them!

The book covers the development of 6 games, two of them with Box2D. Here are some screenshots:

Air Hockey

Sky Defense

Rocket Through

Victorian Rush Hour

MiniPool (Box2D)

Eskimo (Box2D)

All the games are universal apps, and I talk a lot about developing games for multiple screen sizes.

The code can be easily followed by anyone with any experience with a C based language, including ActionScript, JavaScript, PHP, as well as the usual bunch: Java, C# and of course Objective-C.

Cocos2d-x can be used to build games for iOS, Android, Windows Phone, Blackberry… among others, with the same code. And it’s incredibly easy to use.

Here is the Packt page about the book, and some links to the book at an online store near you!

Amazon
Amazon.co.uk
Barnes & Noble

I hope this will be counted as a helpful source of information on Cocos2d-x development, along side the likes of the Paralaxer project.

I certainly put a lot of effort into developing game examples that were fun to play! I hope you’ll enjoy reading the book as much I enjoyed writing it.

Remember the Frogger series of tutorials where the same code was translated to different Frameworks? Well, there is a new version to be added to the list, this time courtesy of Luca Ferrara, and it’s a Lua version.

This is especially cool for Flash developers because Luca used a framework he’s developing (Shilke2d) that aims to port Starling to Moai, a Lua game development framework that can run on both iOS and Android.

If you never worked with Lua before, you probably heard that the syntax is similar to ActionScript/JavaScript and this port should help you test that theory for yourself, and this is probably the best way you’ll ever find to learn it.

So here is what you’ll need.

- Download the Moai SDK.
- Download the free ZeroBrane Studio Lua IDE.
- Download Shilke2d.
- And finally Download Luca’s port of Frogger.

Next comes the setup. These steps are for Mac users, but should be easily converted to Windows users.

- Inside the Shilke2D package you will find a folder called Shilke2D which is the library files. Copy and paste this folder inside the Frogger project you just downloaded.
- Next go to Applications or wherever you installed ZeroBranedStudio and click to show package contents. Navigate to ZeroBraneStudio/cfg/user-sample.lua and open this file in a Text Editor.
- Edit the path to moai excutable. Mine reads:
path.moai = ‘/Users/rengelbert/frameworks/moai-sdk-1.4p0/bin/osx/moai’
- Edit the language used. Mine reads:
language = “en”
- Here, you can also set the path to other common frameworks like Love and Corona.
- Rename the file to user.lua.
- Open ZeroBraneStudio and open the Frogger project and its main.lua file.
- Then go to the menu Project|Lua Interpreter and select Moai.
- You should now be able to run the game, on Project|Run.

Have fun!

The syntax differences between Cocos2d-x (C++) and Cocos2d HTML5 (JavaScript) are surprisingly small. In fact you could do away with most of them by using Find and Replace: just look for the CC prefix and replace it with cc. (that is “cc” and a dot).

You could also look for specific data types and replace them with var. But this would not work for function parameters, though these could be easily fixed. Next you could also Find the string :: and -> and Replace with . (dot).

Let me show you some examples so you understand what I’m talking about.

Creating a Sprite and positioning it

1
2
3
4
5
6
7

//C++
_bgLight = CCSprite::create("bg_light.jpg");
_bgLight->setPosition(ccp(_screenSize.width * 0.5f, _screenSize.height * 0.5f));
 
//JS
this._bgLight = cc.Sprite.create(bgLight);
this._bgLight.setPosition(cc.p(SCREEN_SIZE.width * 0.5, SCREEN_SIZE.height * 0.5));

In the JavaScript version I made use of globals for the screen size and the path to the jpg file (which is set in Resources.js for preloading.)

Creating a SpriteBatchNode

1
2
3
4
5
6
7

//C++
_gameBatchNode = CCSpriteBatchNode::create("sprite_sheet.png", 800);
this->addChild(_gameBatchNode, kMiddleground);
 
//JS
this._gameBatchNode = cc.SpriteBatchNode.create(spriteSheetImg, 800);
this.addChild(this._gameBatchNode,MH.Z.kBackground);

Particles, Sound

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//C++
_boostHitParticles = CCParticleSystem::create("boost_hit.plist");
_boostHitParticles->stopSystem();
this->addChild(_boostHitParticles);
_boostHitParticles->setPosition(star->getPosition());
_boostHitParticles->resetSystem();
 
SimpleAudioEngine::sharedEngine()->playEffect("star_hit.wav");
SimpleAudioEngine::sharedEngine()->stopBackgroundMusic();
SimpleAudioEngine::sharedEngine()->playBackgroundMusic("bg.mp3", true);
 
//JS
this._boostHitParticles = cc.ParticleSystem.create(boost_hit);
this._boostHitParticles.stopSystem();
this.addChild(this._boostHitParticles);
this._boostHitParticles.setPosition(star.getPosition());
this._boostHitParticles.resetSystem();
 
cc.AudioEngine.getInstance().playEffect(last_star_snd);
cc.AudioEngine.getInstance().stopMusic();
cc.AudioEngine.getInstance().playMusic(bgMusic, true);

In a more recent version of Cocos2d HTML5 the word Background was removed from all AudioEngine commands related to background music. I believe the same will be done to Cocos2d-x if not already.

Scene creation and transition

1
2
3
4
5
6
7
8
9
10
11
12
13

//C++
CCScene *scene = CCScene::create();
scene->addChild(GameLayer::create());
 
CCScene* newScene = CCTransitionFlipY::create(0.5f, MenuLayer::scene(), kOrientationDownOver);
CCDirector::sharedDirector()->replaceScene(newScene);
 
//JS
var scene = cc.Scene.create();
scene.addChild(GameLayer.create());
 
var newScene = cc.TransitionProgressRadialCCW.create(0.5, MenuLayer.scene());
cc.Director.getInstance().replaceScene(newScene);

Not every scene transition effect is supported in Cocos2d HTML5. You can see the ones not supported commented out in the scene transitions test class.

Class declaration

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//C++
class Star : public cocos2d::CCSprite
 
Star::Star() {
	this->initWithSpriteFrameName("star_1.png")
}
 
 
//JS
var Star = cc.Sprite.extend ({
 
	ctor:function () {
        this._super();
        cc.associateWithNative( this, cc.Sprite );
        this.initWithSpriteFrameName("star_1.png")
    }
    //...
});

I changed the logic a bit here compared to what is actually used in the game, so as not to have too many things in the way of the syntax.
But in the HTML5 version is important to use this odd JS constructor and call associateWithNative. This is necessary when taking the code to Cocos2d-x and using the native bindings.

Setting up a Cocos2d HTML5 project is a remarkably easy process and here I’ll show you how to do it both for the web and the native versions. But first you will need to download the Cocos2d HTML5 framework, and a matching Cocos2d-x framework. I used version 2.1.1. It’s much easier to develop both web and native versions if the frameworks match. And even easier with this 2.1.1 version.

The Web Version

In the html page, and therefore web version of the game, all you need to do is create a canvas tag and run one of them weird self-running anonymous functions, which is usually saved inside an external javascript file. In this game that file is called MoonHerder-html5.js.

1
2
3
4

<div>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
<script src="MoonHerder-html5.js"></script>

And here is the MoonHerder-html5.js script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

 
var MH = MH || {};
 
(function () {
    var d = document;
    var c = {
        menuType:'canvas', //whether to use canvas mode menu or dom menu
        COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
        showFPS:true,
        frameRate:60,
        tag:'gameCanvas', //the dom element to run cocos2d on
        engineDir:'libs/cocos2d/',
        appFiles:[
            'src/GameConfig.js',
            'src/Resource.js',
            'src/GameManager.js',
            'src/GameLayer.js',
            'src/HelpLayer.js',
            'src/MenuLayer.js',
            'src/DrawLayer.js',
            'src/Line.js',
            'src/Moon.js',
            'src/Sun.js',
            'src/Star.js'
        ]
    };
    window.addEventListener('DOMContentLoaded', function () {
        //first load engine file if specified
        var s = d.createElement('script');
        s.src = c.engineDir + 'platform/jsloader.js';
        d.body.appendChild(s);
        document.ccConfig = c;
        s.id = 'cocos2d-html5';
    });
})();

I developed the structure of the game somewhat based on the way the demo game MoonWarriors was built. So I created this global MH object to store game related data just as MoonWarriors does. But I confess I wasn’t very happy with it, as it serves no real purpose that justify having a separate object. Choosing a way to organize globals is a personal choice here. Developers have different styles and structures for this and the samples included in the framework show some good examples. But it’s fun to work with one big scope again, not having done that since ActionScript 1. Of course, you should be careful how much data you store globally, and let the stack bear the brunt of your application.

So the anonymous self running function creates this configuration object, called c, listing among other things all the script files used in the game. And then in the “on content load” event the jsloader script gets added to the page, and this will load the framework scripts as well as the app script files listed in c. You have the option of using a single file for the framework, minified or not, to load all the framework in one go. And of course, you could create your own single, minified file for your app scripts.

This will eventually call on the main.js script which you must implement. It creates a class that extends cc.Application and wraps it around your app with all required director configurations, such as you would have in AppDelegate in iOS.

Here is the code in main.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var cocos2dApp = cc.Application.extend({
    config:document.ccConfig,
    ctor:function (scene) {
        this._super();
        this.startScene = scene;
        //cc.COCOS2D_DEBUG = this.config.COCOS2D_DEBUG;
        cc.setup(this.config.tag);
        cc.Loader.getInstance().onloading = function () {
            cc.LoaderScene.getInstance().draw();
        };
        cc.Loader.getInstance().onload = function () {
            cc.AppController.shareAppController().didFinishLaunchingWithOptions();
        };
        cc.Loader.getInstance().preload(g_ressources);
    },
    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);
 
        // run
        director.runWithScene(new this.startScene());
 
        return true;
    }
});

With these we create our extended class, cocos2dApp, passing it our first scene. This class will create our loading screen using cc.LoaderScene (you will need to extend this class if you want your own loading screen), and passing it a global variable, which in this example is called g_resources and is created inside the Resource.js script. This is an array of key-value pair objects populated with all the required external media and data files. You need to supply a resource type tag and the path to the file like this:

1
2
3
4
5
6
7

//in Resources.js
var g_resources = [
    {type:"image", src:"res/bg_dark.jpg"},
    {type:"plist", src:"res/sprite_sheet.plist"},
    {type:"sound", src:"res/sounds/bg.mp3"},
    {type:"fnt", src:"res/font.fnt"}
];

If for some reason you decide to use earlier versions of the framework than the 2.1.1 version used here, bear in mind that some of the type tags may be different. And who knows, it might change again in future versions.

Now back to main.js, we start things rolling with this one line at the end of that script file:

1

var myApp = new cocos2dApp(MenuLayer.scene);

The Native Version

In the native version we replace MoonHerder-html5.js with MoonHerder-jsb.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

require("jsb.js");
 
var MH = MH || {};
 
var appFiles = [
	'src/Resource.js',
    'src/Star.js',
    'src/GameConfig.js',
	'src/GameManager.js',
	'src/GameLayer.js',
	'src/HelpLayer.js',
	'src/MenuLayer.js',
	'src/DrawLayer.js',
	'src/Line.js',
	'src/Moon.js',
	'src/Sun.js'
];
 
 
for( var i=0; i < appFiles.length; i++) {
    require( appFiles[i] );
}
 
var director = cc.Director.getInstance();
director.setDisplayStats(true);
 
// set FPS. the default value is 1.0/60 if you don't call this
director.setAnimationInterval(1.0 / 60);
 
var mainScene = MenuLayer.scene();
 
// run
director.runWithScene(mainScene);

With the native version, and in iOS, the MoonHerder-jsb.js script is called inside AppDelegate in the appDidFinishLaunching method with this line:

1

ScriptingCore::getInstance()->runScript("MoonHerder-jsb.js");

So in the native version main.js is not used, as cc.Application serves as a replacement for AppDelegate in the web version.

And that’s all it is really. I recommend you take a look at the samples folder in the Cocos2d-x framework files (versions 2.1.1) and then inside its JavaScript folder for more examples.

You may download the source code from gitHub.

In the next post, I’ll go over the syntax and show how the game starts running.

So finally, we arrive at the last port of the game. As a recap, this was a Flash game, which I then expanded and ported to Objective-C with Cocos2D, then C++ with Cocos2d-x. And now I ported it to HTML5 with Cocos2d HTML5, made it run in a browser and republish it inside Cocos2d-x with the framework’s JavaScript bindings.

You can play the HTML5 version of the game here.

So I’ll write a series of posts now covering the HTML5 port and the few differences I encountered trying to develop one version for both browser and native bindings. Mostly, these have to do with the draw api, so no biggie.

The HTML5 code is on github.

So, more posts on this soon.

There is a tiny bit of an issue when drawing curved lines in OpenGL, because of the way the line “caps” are drawn. Of course the issue is only an issue if you want thick lines and don’t want to texture them properly (with triangle fanned vertices.) But there is a quick solution to that.

The image below should give you an idea of what the problem is.

Caps are drawn either vertically or horizontally. So lines drawn in an angle will have an odd looking cap. Unless you texture them, which I chose not to do in Moon Herder.
But the problem quickly becomes an ugly one if you want to draw curved lines, which are processed in OpenGL as a combination of straight lines following one of the bezier formulas.

When I was building Moon Herder I decided to apply a very simple hack. To draw tiny circles where the lines joined. And I discovered that if I find the correct radius for the circle (and this will depend primarily on the line’s thickness) that the hack seems to do away with 99% of the problem.

In Objective-C the draw methods core logic is written in C:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

-(void) drawQuadBezier:(CGPoint) origin  control:(CGPoint) control  destination:(CGPoint) destination  segments:(int) segments {
 
	float t = 0.0f;
	float x_;
	float y_;
 
    CGPoint previous = origin;
    for (int i = 0; i < segments + 1; i++) {
 
        x_ = powf(1 - t, 2) * origin.x + 2.0f * (1 - t) * t * control.x + t * t * destination.x;
        y_ = powf(1 - t, 2) * origin.y + 2.0f * (1 - t) * t * control.y + t * t * destination.y;
 
        if (i > 1)
        ccDrawCircle(previous, 2.2, M_PI, 6, false);
 
        ccDrawLine(previous, ccp (x_, y_) );
        previous = ccp(x_, y_);
 
        t += (float) 1 / segments;
    }
 
}

So in C++ the differences are tiny. CGPoint becomes CCPoint and that’s it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

void DrawLayer::drawQuadBezier(CCPoint origin, CCPoint control, CCPoint destination,  int segments) {
 
 
    float t = 0.0f;
    float x_;
    float y_;
 
    CCPoint previous = origin;
    for (int i = 0; i < segments + 1; i++) {
 
        x_ = powf(1 - t, 2) * origin.x + 2.0f * (1 - t) * t * control.x + t * t * destination.x;
        y_ = powf(1 - t, 2) * origin.y + 2.0f * (1 - t) * t * control.y + t * t * destination.y;
 
        if (i > 1)
        ccDrawCircle(previous, 2.2, M_PI, 6, false);
 
        ccDrawLine(previous, ccp (x_, y_) );
        previous = ccp(x_, y_);
 
        t += (float) 1 / segments;
    }
}

Note that to draw filled circles in Cocos2d and Cocos2d-x you may have to edit the drawCircle method in CCDrawingPrimitives, editing the line:

1

glDrawArrays(GL_LINE_STRIP, 0, (GLsizei) segments+additionalSegment);

To read:

1

glDrawArrays(GL_TRIANGLE_FAN, 0, (GLsizei) segments+additionalSegment);

In LibGDX we use the ShapeRenderer class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

private void drawQuadBezier ( float x1, float y1, float cx, float cy, float x2, float y2, int segments) {
	float t = 0.0f;
	float x_;
	float y_;
 
	float previousX = x1;
 
	float previousY = y1;
 
 
	for (int i = 0; i < segments + 1; i++) {
 
		x_ = (float) Math.pow(1 - t, 2) * x1 + 2.0f * (1 - t) * t * cx + t * t * x2;
		y_ = (float) Math.pow(1 - t, 2) * y1 + 2.0f * (1 - t) * t * cy + t * t * y2;
 
		shapeRenderer.begin(ShapeType.Line);
		shapeRenderer.line(previousX, previousY, x_, y_);
		shapeRenderer.end();
 
		if (i > 1) {
			shapeRenderer.begin(ShapeType.FilledCircle);
			shapeRenderer.filledCircle(previousX, previousY, 2.2f);
			shapeRenderer.end();
		}
 
		previousX = x_;
		previousY = y_;
 
		t += (float) 1 / segments;
	}
}

The object shapeRenderer is created when I set up the camera. Note that in more recent versions of LibGDX the calls to state changes in ShapeRenderer may have changed. Also, there is the addition of a shapeRenderer.curve method, but for some reason it only covers the cubic bezier.

And the result? Here it is in LibGDX:

Without the logic and with the logic.

Hey! What’s up. Me again. I just finished converting the game Moon Herder to Cocos2d-x, and I changed the syntax to make it more Cocos2d-ish. The reason being that I want to take this same code to JavaScript and see what happens. But more on that later.

So I also converted the old Cocos2d code to be more Cocos2d-ish as well. Now both versions are 2.0+, still no ARC, and I was finally able to compare the two in terms of building an universal app. The conclusion I arrived at is this: Cocos2d-x beats Cocos2d hands down. In terms of managing your graphics and scaling game logic, Cocos2d-x is better than Cocos2d. There. I said it.

Now I realize I have to follow this with a gigantic post on managing graphics for universal apps, and multi-platform apps since we are also dealing with C++. And that will come too, soon, I hope. So for now, sure, go ahead and don’t take my word for it.

But there are differences in how each framework handles that side of things. Especially regarding the 4 inch screen iPhone.

I also removed preloading, as I finally got to optimizing the graphics and the game dropped 1000% in size.

So here they are:

The Cocos2d code

The Cocos2d-x code

So how did I create the 2D logic for the Fussball demo? The answer is quite simple really. The foot of the player can connect with the ball only if the foot is at the right distance from the table, right? Because the player rotates, it can only hit the ball if the foot is pointing down. In the code I implemented this logic like this:

When the player presses and drags the mouse on a bar, I rotate a 2D point based on the mouse position. In the movie above this point is represented by the orange ball. It rotates around a pivot point. The blue ball represents the Y displacement of the point and the green ball the X displacement.

The weird rectangle with the arrow represents the player sprite in “3D”. The arrow is the head. So you can see that collision can only happen depending on the Y displacement, in other words the blue ball must be a certain positive distance from the pivot point, this means the foot is close enough to the table to hit the ball.

Of course there are ways to build the same logic without using actual rotation. But with this, I get the extra bonus of knowing how much rotation should be applied to the 3D sprite.

And that’s it really. I told you it was simple. This 2D logic translates to this weird looking thing:

You will notice I added a slight gravity to the ball, depending on wich side of the table the ball is. I removed this logic in the 3D version. The code for this 2D demo is otherwise the same found in the final source code with some minor adjustments to speed and controls sensitivity.

Again, the code can be found in my GitHub account:

- The Away3D version

- The Isgl3D version