I have long been searching for a free framework or library to develop cross-platform mobile apps since May 2015. So far, I don’t get a satisfactory result. Most of the libraries, frameworks, tools or platforms (or whatever) out there are NOT FREE. Almost all of them require a hefty monthly subscription.

What I need is something free to play with. I stumbled upon Cocos2d-x when I was reading a magazine (Forbes China of year 2013 or 2012 bought by my sister) about a month ago. It is being using by a 30-something young guy, who is a self-made multi-millionaire and a game developer, to develop mobile games. He later even acquired the engine and maintained the open-source nature of the project.

This article caught my attention. According to that guy, Cocos2d-x engine is being used by roughly 70% of Asian mobile game developers. With such a huge adoption rate of the engine, I thought to myself that I could not go wrong by being part of its community, right? After all, it is open-source and free to use.

The really good thing with Cocos2d-x, other than being a cross-platform game engine (for Android, iOS, Web), is that it can also be used to develop mobile apps (you don’t have to limit yourself to game development). Not to mention that the number of resources you can get when you are stuck with certain technical issues with Cocos2d considering that it is one of the widely used game engine and its community is huge. It also supports multiple languages (C++, Javascript and Lua).

Investment on Cocos2d-x

Following that discovery, I started exploring the Cocos2d-x framework and invested times reading about it. I read 4 books and they are extremely easy to following and I am impressed.

Cocos2d-x Game Development Essentials

This book is the introduction to Cocos2d-x and in it you learn about the basic and crucial concepts used in the engine and how to setup your environment for development. After reading it, you will have all the necessary pieces (like adding menu, adding sound, using accelerometer, using physic engine, etc) to develop a full interactive mobile game. One thing to note is that this book uses C++ and Xcode (with Mac) or Eclipse along with the examples given. After all, this is a short book.

Building Android Games with Cocos2d-x

This book goes through on pretty much the same concepts from the previous book but with additional topics like JNI (Java Native Interface) and Admob. It is using C++ and Eclipse for demo on Windows. As indicated by the book title, it is written specifically for Android game developers. By the end of this book, you will have another game developed (avoid-obstacle-or-bomb kind of game). This is also a short book.

Cocos2d-x by Example: Beginner’s Guide – Second Edition

This book covers many different type of games with example code available to download. It is also targeted for C++ language and on Xcode on Mac. It briefly shows you what to install in order to run the games. If you are the kind of person who learn by examples, then this book is for you. Some of the game examples provided are Air Hockey, Sky Defense, Rocket Through, Victorian Rush Hour, Eskimo, MiniPool, Stone Age (this last one is using Lua scripting language).

Learning Cocos2d-JS Game Development

This is the book that meets my need because it is using Javascript language with Cocos2d-JS that allows me to do rapid game development on the web. All the previously mentioned books are using C++ as a development language (or Lua). I tried to compile several games in C++ and it takes painfully long time (30 minutes to 1 hour for first time compilation). That makes me looking for better alternative.

In this book, you will be introduced to yet more game examples like Concentration game, An Endless Runner, Sokoban, Shopping, Totem, Match3.

The good things of Cocos2d-JS, other than what I mentioned above like quick development-test-fix cycle, are its light weight framework and it can run on any platforms with web browser. The major drawback of using Javascript, however, is that it will have performance impact running computational heavy game or application compared to its native C++ counterpart. So, as long as your app or game is not computational heavy, Cocos2d-JS is a good choice.

Real Test of Coco2d-JS for game development

With all the newly gained knowledge, I had a crazy idea last week.

During the last 8 days, I had been experimenting with the new concept of rapid mobile game development with Javascript. I was expecting the project to be done in one day, but as many things in life go, the project got prolonged and finished only until 7 days later.

Game Logic

It all began with a simple game idea inspired by a game show.

The game idea is really simple, the participants need to answer correctly a simple math question by completing the plus or minus sign in the question under 10 seconds else they will get punished.

An example of the question: 5 ? 6 ? 4 = 7.

There are 4 permutations of possible answers:

1. minus, minus
2. minus, plus
3. plus, minus
4. plus, plus

All these permutations will give different results. To go through all the permutations is very costly in term of time.

I watched the show many years ago and I even played along with the show. Over time, I developed a strategy to come up with the correct answer every time by avoiding to go through all the permutations. But it still requires substantial mental energy to do the math.

The strategy is to find out which numbers to subtract and therefore reducing the number of permutations.

The formula of my strategy is as follow:

1. sum up all the numbers on the left hand side and
2. subtract the sum with the number on the right hand side and
3. divide the result by two. The final output is the number to be subtracted.

Example:

1. 5 + 6 + 4 = 15
2. 15 – 7 = 8
3. 8 / 2 = 4

So you know you have to subtract 4 out of the sum. The correct answer to the question is plus, minus.

Hook factor

I liked the game idea at first thought and it got my attention because it is simple and has the hook factor.

Hooked: How to Build Habit-Forming Products

As proposed by the hook model, there are four stages to get people hooked. The first is the trigger (internal and external). When the user is bored, he/she need to play game.

The second stage is action. The game is easy to play and requires only two types of input from user which is the plus and minus.

The third stage is the variable reward which I can integrate easily into the game.

The fourth stage is the investment from the user where he/she spends a lot of time into the game to get detailed statistics of each game play.

The cycle is repeated.

Another main reason I liked the game idea so much was that it is purely a mathematical game. I could easily generate as much questions as possible programmatically. This would reduce my workload to design and hand-code every game level manually as what we normally see on other mobile games like Angry Birds.

Playing the game has an educational purpose too for kids to learn maths. That’s why I created 2 different sets of games, one with only positive numbers while the other with only negative numbers since small kids don’t have the concept of negative numbers yet (see the screenshot of the game at the bottom of this post or go directly to Google Play).

Game’s name

The game need a name. I got inspiration from a popular and influential book.

Thinking, Fast and Slow

According to Daniel Kahneman, there are two systems running in human mind which he called them System 1 and System 2 respectively. The first system is used for fast and instinctive thinking but is subjected to biases and errors in thinking. The second system is used for serious and slow rational thinking. It requires more effort and sometime even painful for the person to use the second system.

It is never an intuitive task for human to perform mathematical operations. And the game that I am going to develop involve basic maths, therefore I decided to call it System 2.

Rapid Game Development

Ok, with the game logic clearly defined, it was time to start the development work.

By following the Cocos2d-JS workflow, the main game logic was done on the first day, and deployed to the temporary web here for testing (step 3 from the workflow for cross-platform games above) and I started playing the game and making minor fixes and improvement progressively.

The following is the summary of what was going on:

• one day coding (coding main game logic and refactoring)
• one day coding (making the game statistics)
• one day image (searching and editting game images and icons) + sound
• one day testing (finding bugs and fixing bugs, doing minor improvement)
• one day debugging on Android (debugging issues from porting Cocos2d-JS to Android, this was a surprise for me where the code run on web but not on Android)
• one day Admob integration
• one day publishing (writing article for blog and play store)
• one day for buffer (anything in between)

Of course, the above is only a rough summary, many things could run in parallel like editing images while building the project for Android.

I had pretty little information and resources on how to debug on Android and Admob integration with Cocos2d-JS, that’s why it took me so long. Also, each compilation takes time. The books that I read does not cover those topics.

I also want to thank some of my friends that helped to test and provide feedback to the games.

The end result

Here are the screenshots of the game in action.

As you can see, the game only supports landscape mode. This is because by reducing one degree of freedom, I could save a lot of development time.

You can download the game from Google Play. I only support Play Store right now since the entrance price is lower with $ 25 for lifetime subscription while for Apple Store, it requires $ 99 annual subscription to publish apps.

Conclusion

Using Javascript to develop game is really convenient and fast. You have faster feedback loop for fixing bugs and for making incremental improvements.

For that purpose, Cocos2d-JS is a good choice. It is really a wonderful game engine for any new person who would like to develop games (independent of whether the games are targeted for web or for mobile).

Demo

You can try the game below.

Thanks.