First words

Several days ago i stumbled on Cocos Creator. It is an IDE for game development based on cocos2d. It is a new editor which is meant to replace Cocos Studio. The most awesome thing about Cocos Creator, as for me, that it provides an ability to build your game for different platforms, like: ios, android, web etc. What is very important that it does not use WebView, it uses JSB - native bindings for javascript for each platform. And of course, last but not least, it is free.

I found it several days after there was released v1.0.0, quite a surprise!

I heared many good words about the original cocos2d framework and decided to give the Cocos Creator a shot.

To make the acquaintance process more effective i decided to build a simple game and make it a tutorial for Cocos Creator.

The Cannon

So, here we are. I call the game simply "The Cannon". According to the main plot, the Earth is in dangeour of falling meteors, and the player have to save it. Fortunately there is an old but reliable cannon. After i completed the game i decided to describe the overall process succinctly. The description is split into steps. Lets review all steps:

It may be more convenient to got through the resulting code first and then get back here for some hints and short explanations.

Prerequisites

The tutorial shows how to use many aspects of the Cocos Creator to make a simple game. But i wont describe it in babysteps, especially the UI and interactions with the Cocos Creator itself. It is explained in great details in the official documentation. So to go through the tutorial first you need to read the official documentation of the Cocos Creator to understand what it is and how it works. The official documentation if pretty good, but it is work in progress as of time of writing this tutorial.

Lets start!