Working With Cocos2D-x: A Beginner’s Guide

As far as open-source, cross-platform game engines are concerned, Cocos2D-x would rank right near the top. We have here explained some terms and features of this tool, for new and existing users.

 

Cocos2d-x would easily figure among the most popular 2D game development engines. Newbies can, however, find it rather complicated – and a significant amount of time needs to be invested by a developer on learning its nitty-gritty, before (s)he can start creating games with this open-source tool. With greater familiarity with the framework, you are likely to find the engine to be really user-friendly too. In the following discussion, we will take you through some important features and user-tips related to Cocos2d-x:

 

1. Cross-platform support – The Cocos2d-x framework can be used to build games and apps on both the iOS and Android platform. This automatically makes it a more widely usable tool than the Objective-C based Cocos2d, which supports only the iOS platform. Depending on the platform you are working, you will have to download and install the latest version of Xcode (iOS) or Eclipse (Android). It is possible to use Cocos2d-x for desktop as well as mobile game development.
2. Scenes and Nodes and Sprites – In particular, many new game developers find the concept of ‘Nodes’ and ‘Sprites’ confusing. Both of them refer to the objects visible on the game screen – but ‘Sprites’ are the ones which actually move about. All the other objects are simple ‘Nodes’. All nodes are stored in a ‘Scene Graph’, which is alternatively called the ‘Tree’. The in-order-work algorithm is deployed by Cocos2d-x to manage the sprites, nodes and animations in the ‘Scene Graph’. The ‘Scene’, of course, refers to the screen where the game menus, levels, and all other visual elements are displayed.
3. Minimum system requirements (Runtime) – For iOS game development, Cocos2D-x requires the support of iOS 5.0 (or higher). Similarly, if you are making an Android game, you will be able to use this game engine only if your device is powered by Version 2.3 (or later) of the OS. For Windows and OS X games, the minimum runtime requirements of Cocos2D-x are Windows Phone 8 and OS X 10.6 respectively. For optimal game engine performance, it is advisable to upgrade systems to the latest versions of the respective OS-es (OS X Yosemite, iOS 8, Android 5.0 Lollipop, etc.).
4. Simultaneously working on iOS and Android – The concept of ‘Classes’ in Cocos2D-x makes this easy for mobile game and application developers. The C++ files created and stored in the Classes directory under Xcode and Eclipse/Native Android Toolkit are the same – and all that users have to do is instruct the iOS and Android projects to refer/point to the same folder destination. Create a group called ‘Classes’ in the ‘Project Navigator’, and add the files that you need to keep together. Uncheck the box beside ‘Copy items into destination group’s folder’, and then just click on ‘Add’.
5. Editor support – Cocos2d-x boasts of a vast range of supported editors. According to many professional mobile game/app development experts, this is one of the prime reasons behind the engine’s sustained popularity since 2010. Apart from CocoStudio (the official editor of Cocos2D-x), the tool is also compatible with ‘Dragon Bones’ and ‘Spine’ (both are animation editors), Sprite Helper, Glyph Designer and Tiled Map Editor. Developers can also work with texture atlases by using the Zwoptex or Texture Packer tools.
6. Designing on Cocos2d-x – Game developers can take their pick from four alternative design options available in the engine – ‘Exact Fit, ‘Fixed Height’, ‘No Border’ and ‘Show All’. If you wish your game screens/scenes to be properly viewable on mobile devices with various-sized screens, the ‘Fixed Height’ option is the most suitable, since it does not involve unnecessary cropping or compressing of the images. Go through the CCEGLViewProtocol.h file carefully, to find out about the design policies of Cocos2d-x, and how they are affected by the screen aspect ratios of devices.
7. Minimum System Requirements (Build) – For making a 2D iOS game with Cocos2D-x, you will need to install Xcode 5.1 (or any later version; 6.2 is the latest stable release). For developing on the Android platform, you have to set up NDK r9d first. On other platforms, the minimum build requirements for Cocos2D-x are Visual Studio 2012 (for Windows) and CMake 2.6 (or later). The engine can even be used to make games and apps on the Ubuntu platform, provided that you are using Version 12.10 (or higher) of the OS.
8. Main classes in the engine – We have already highlighted how Classes can be used to store iOS and Android projects together on Cocos2D-x. However, to start working with the engine – game developers need to get acquainted with four other, basic classes first. These are CCDirector (for calling user-interaction, passing and rendering calls, and depiction of the various game scenes), CCScene (the CCDirector class shows this base node), CCFileUtils (for using ‘search paths’, and general handling and management of files in the codes), and CCEGLView (this renders the game visuals on the system screens). Among these, the first has to be used constantly, while CCEGLView is generally required only once – at the time of setting up Cocos2D-x for the first time.
9. What are Actions? – If you are making a mobile gaming app, you need to be an expert at creating custom ‘Actions’ – i.e., movements of the characters in your game. Right from playing around with any Node object in the time-space continuum, to using Callbacks after the movement of Sprite objects – everything has to be managed with the help of developer-defined ‘Actions’. Some of the most frequently used Actions in Cocos2D-x are ‘Rotate’, ‘MoveBy’, and ‘Scale’.
10. Supported widgets – Games created with Cocos2D-x generally have smooth and engaging UIs, and this has got a lot to do with the multiple types of widgets that the editor supports. PageView, ListView and ScrollView are the three containers built-in for Cocos2D-x, while there are separate widgets for adding TextField, Button, and CheckBox in the game scenes. You can also include sliders/loading bars. Cocos2D-x games can have Horizontal View, Vertical View, or both.
11. Difference between Sequence and Spawn – Another probable source of confusion for app and game developers starting out with Cocos2D-x. In the engine, a ‘Sequence’ refers to a set of ‘Actions’ that are called/executed sequentially (creating reverse Sequences is also possible). On the other hand, a ‘Spawn’ refers to simultaneous execution of ALL the specified Actions. A Sequence is created with the auto mySprite = Node: :create() command line, while a Spawn is defined by auto myNode = Node: create().
12. Layers, Anchor Points and App Delegates – Okay, let’s take a look at some other common terminology used by the users of the Cocos2D-x tool. The focal point around which every Sprite object moves is known as the ‘Anchor Point’ (default value → 0.5, 0.5). ‘Layers’ refer to a certain type of non-visible nodes, which are arranged in accordance with the z-order system of the engine (most simple 2D games require only single layers). ‘App Delegates’ are something about which only iOS app developers need to know. They are, in essence, classes that are used to call pre-defined methods. The delegates are present as virtual classes in C++, and are created as per protocols in Objective-C.
13. Using Sprite Sheets for animation – Cocos2D-x lets graphic designers and game animators to use Sprite Sheets. In simple terms, this means that users can create a large texture (i.e., an image), in which all the animation frames are contained. The precise position of every frame is mentioned in the Data files that accompany the Sprite Sheets. When the sheets are exported, they remain in sync with the files in the ‘Resources’ folder.
14. Enhanced Physics support – Presence of the Chipmunk 2D physics system (integrated in the engine) is yet another high point of the Cocos2D-x game development engine. For customizing character bodies, contact points, joints and the like, there are object-oriented wrappers. The tool supports parallax scrolling, and comes with the useful ‘Render To Texture’ feature as well.

The only blip in the other otherwise excellent programming language compatibility of Cocos2D-x is the lack of support for JavaScript on the WP8 mobile platform (C++ and Lua are supported). Innovative 3D skeletal animation support has been included in the latest version of Cocos2D-x – v. 3.2 for iOS 8. Several immensely popular games have been created with the Cocos2D-x tool, and once you are familiar with its operations, you can start making your very own customized game too.