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.
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.
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.
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.
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).
In this book, you will be introduced to yet more game examples like Concentration game, An Endless Runner, Sokoban, Shopping, Totem, Match3.
Real Test of Coco2d-JS for game development
With all the newly gained knowledge, I had a crazy idea last week.
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:
- minus, minus
- minus, plus
- plus, minus
- 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:
- sum up all the numbers on the left hand side and
- subtract the sum with the number on the right hand side and
- divide the result by two. The final output is the number to be subtracted.
- 5 + 6 + 4 = 15
- 15 – 7 = 8
- 8 / 2 = 4
So you know you have to subtract 4 out of the sum. The correct answer to the question is plus, minus.
I liked the game idea at first thought and it got my attention because it is simple and has the hook factor.
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).
The game need a name. I got inspiration from a popular and influential book.
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.
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).
You can try the game below.
Your browser does not support iframes.