Cocos2d-Html5 — Skill Level Up Guidance

This article is all about my learning experience of cocos2d-html5 ~

I started to learn and use cocos2d-html5 from about 6 month ago — though I only do it in my spare time ~

To be frank I have been keeping an eye on this branch of cocos2d since the very early stage because that learning browser client side technology such as html, css and js has been a dream of mine since college ~ but have’t  found a good entrance (thus got stuck with C++ and MFC for my college time)

And cocos2d-html5 light up my hope again 🙂

I’ve been using cocos2d-iphone for quite a long time and also have played with -x,-python,-javascript(the old one) branch so I’m pretty familiar with the cocos2d API which helped me to start with cocos2d-html5 quickly ~

My framework learning formula is: first have a general idea of the programming language (about 30%) and the API (about 10%) and then start coding right away — start some simple project which can help me quickly master the language and the API ~

So first I went for a CCLabelTTF effect:

And then a Timeline control:

Till now, I had a better master of JavaScript and the API (the difference between cocos2d-html5 and -iphone version)


And then a more complex calendar control:

The develop tools up till now was only notepad++ (win) / textmate (mac) + cc.log for debug and it’s like playing without any equip ~ But, I think it’s OK for the starters who start to learn a new framework and language since the auto complete won’t do any good to them ~

But since I’ve been quite familiar with the API and Javascript I decided to find some cool equips and my choice was WebStrom + MAMP + Chrome/Firefox

And, I started to looking for the next target and hoping it to be a tough one and here’s my target:
Rewrite one of my older card game (cocos2d-iphone) using cocos2d-html5 and then distribute it to Sina Weibo and Facebook.

To be frank this could be a boss of Lv.30 for me at that time since it’s not about writing some simple UI control, it’s a complete game and distribute the game to social platform could be difficult and this is out of the range of cocos2d and it requires knowledge of html, css, php, etc.

Well, but I took the challenge and was finally able to beat the boss, it’s not easy and thanks to all the NPC’s — Google, Yahoo Jp, StackOverflow, some great blogs and posts etc 🙂

And an item I won from the battle:

And this battle helped me to get to Lv.30 🙂

Now the game was done and what’s next target ? It’s true that cocos2d is a game engine but who says that we can only make game with it ?

At least cocos2d-html5 is different since what I see is “-html5” and this leads to a road to the world ~

So I decided my next target: a new service system using cocos2d-html5 as client and python as server ~

Well, the client side with cocos2d-html5 + cocosbuilder was a piece of cake and the touch point was how to implmenet the server side and how to communicate between cococs2d-html5 and python. But with the help of the NPCs I nailed it down 🙂

And to Lv.40 ~

The next one ? Well, an HTML5 resume will be a good choice 🙂

Well, no pressure, Lv.48 reached 🙂

A game, a service, a resume and what else ?

After doing these projects I had a deep feel that the biggest pro of using cocos2d-htm5 is simplicity and quickness. JavaScript is way easier to use and master compared to c++/OC and you don’t need to wait for building and compiling to run your cocos2d-html5 games all you need is ctrl+s your code and debug is also quite simple since the modern browser debug tools are all quite good 🙂

So what if I can benefit from all these pros in my cocos2d-x project, won’t that be cool ? And here comes JSBinding ~

Well, play by the book — read the document about JSB and Spider Monkey and try it with the former cocos2d-html5 project and that’s it :

And another item I won:

It was not easy but Lv.50 reached 🙂

And what’s more important is with the help of JSBinding, the world of C++ and JS is connected ~

And this means a lot since there are tons of cool plugins in js world and it’s not only possible to use then in cocos2d-html5 but also in cocos2d-x project 🙂

So I did some experiment — a handwriting recognizer in cocos2d-html5:

And a CLI layer for cocos2d-html5 and -x which you can use to check game log, control game logic and more at runtime:

And LV.60 reached 🙂

Well that’s quite a lot of projects so what about a site for cocos2d-html5 made with cocos2d-html5 🙂

And LV.62 reached 🙂

And since I’ve been quite familiar with these stuffs what about a quick puzzle game using cocos2d-html5 –3 days for coding (spare time only) + half day for distrubuting to SinaWeibo and FB and more half day for JSBinding to ios device 🙂

Well, piece of cake and LV.65 reached 🙂

And the ideas never die — a SVG path parser for cocos2d-html5 (inspired by raphael.js) and here comes the tiger:

Well, piece of cake and LV.70 reached :).
Looking back at the road all the way till now I must say it’s an exciting experience 🙂

I really want to say thank you to cocos2d-html5 since you give me the change to get in the world I’ve been dreamed about and this broaden my views and bring me to a brand new world 🙂

Now I’m at Lv.70, to be continued 🙂
1. Most of the projects memtioned in the post are uploaded to the github:

2. And more information for CocosLab:

3. Tips for starters of cocos2d-html5
. cocos2d-html5 is not difficult
. I started with no JS and client side knowledge and now in Lv.70 — you can do the same and even better than I
. Read the document, read some tutorials and start you project, start your trip
. cocos2d-html5 almost has no special requirements for IDE and OS so don’t confine youself to your equip at the beginning
. Don’t aim high but accomplish little, fight every battle since they’ll help you level up
. It’s common that you’ll meet lots of problems at the beginning, don’t panic, ask help for the NPCs, they are good 🙂
. After some small projects get prepared for a big one
. You can make a simple game but have to be full featured — not a demo
. Then try distrubute it to some socail game platform
. Try using JSB to run you game in ios
. Happy LEVEL UP 🙂