Rapid Game Development Using Cocos2D-JS An End-To-End Guide to 2D Game Development using Javascript Hemanthkumar and Abdul Rahman This book is for sale at http://leanpub.com/cocos2d This version was published on 2015-11-02 This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. 2015 Nutcrackify
Also By Hemanthkumar and Abdul Rahman Advanced Javascript in 60 minutes
Contents Getting Started........................................... 1 Introduction.......................................... 1 Environment Setup...................................... 1 Creating your first app.................................... 3 Running the sample...................................... 6 Architecture Overview...................................... 8 Engine Architecture...................................... 8 JSB............................................... 9 Object Hierarchy........................................ 9 Deploy Options........................................ 10
Getting Started Introduction In the early days, games are harder to make, but in the recent years lots of 2D,3D frameworks and tools are evolved which simplify s the game development and enable developers to produce the high quality games quickly. Cocos is one among those which is widely used game engine for making 2D games, Over the years Cocos has established the solid foundation among developers. Many popular games in the market are made using Cocos.Later in 2010 Cocos2d-x which is C++ port of Cocos2D was introduced which enabled developers to make cross platform 2D games.after that Cocos2d-js which is javascript port of Cocos2d was introduced, which enables developers to produce browser based games also cross platform native games which uses JSB. Cocos2D is the proven standard for making 2D games due to its simplicity and rich sets of features. In the coming sections we going to have deep look at Cocos2d-js framework and its features. By end of this book you will have solid understanding of Cocos2D-js framework, best practices rich sets of features which enable you to develop your awesome game quickly. Let s Begin! Environment Setup Python Installation Most of the time you will be dealing with cocos console to create, run, compile and deploy you project which uses python. So First thing you need to install python. you can download it from the official python site. https://www.python.org/downloads/ Android Setup You can skip this part if you already have android environment or you don t want to compile and deploy for android. Steps Install JDK from http://www.oracle.com/technetwork/java/javase/downloads/index.html
Getting Started 2 Download android studio or SDK and NDK from https://developer.android.com/sdk/index.html Extract the SDK if you are not installing the android studio. Extract the NDK and place it in the root of SDK, make sure that SDK and NDK are in same root folder. Install Apache ant https://ant.apache.org/bindownload.cgi ios Setup By default all the Mac got ios setup preinstalled. So there are no specific steps. Window Phone Setup Download and install Visual Studio 2015, if you are independent developer VS community edition is available which is free of cost. By default VS2015 has Window Phone SDK installer which will install as part of VS installation. Cocos2d-x Setup For Cocos2d-js is environment is actually part of Cocos2d-x, so you have to download the cocos2d-x bundle. Sample For This Book All the sample code for this book is available at https://github.com/nutcrackify/rapid_game_development_using_cocos2d-js Clone this repository in your local and follow the provided instructions to run it. Steps Download the cocos2d-x bundle from https://cocos2d-x.org/download Extract the zip in your local. Open the terminal on Mac or Command Prompt on Windows and navigate to the extracted folder. Run the below command python setup.py This will setup the cocos console which uses android,ios,window phone environment settings and update the environment variables.
Getting Started 3 Creating your first app Create a separate folder of your choice in your favorite location. It is good practices to keep you all cocos2d-js projects under one root folder. Open terminal and navigate to the created folder path, execute the below command 1 cocos new sampleproject -l js where sampleproject is the name of your project and -l js specifies the language javascript. This creates the hello world sample, you can use this project as base for your game. For our understanding we going to modify this app to make our own hello world screen.before that you should understand the folder structure which cocos2d-js follows. Folder Structure When you create a new project cocos console will create a folder structure like below. Project folder structure src folder is where you have all the javascript files for your game, res folder is where you have all the image and other resources which is referenced in your game frameworks folder is where you have actual cocos2d-js engine, support files for native deployment, JSB so on. apart from this there are configuration files project.json which serves as main configuration for the runtime for your game and mainfest.webapp which has configuration related to web. Code If you open main.js you will see the below code.
Getting Started 4 1 cc.game.onstart = function(){ 2 //If referenced loading.js, please remove it 3 if(!cc.sys.isnative && document.getelementbyid("cocosloading")) 4 5 document.body.removechild(document.getelementbyid("cocosloading")); 6 7 // Pass true to enable retina display, disabled by default to improve perfor\ 8 mance 9 cc.view.enableretina(false); 10 // Adjust viewport meta 11 cc.view.adjustviewport(true); 12 // Setup the resolution policy and design resolution size 13 cc.view.setdesignresolutionsize(800, 450, cc.resolutionpolicy.show_all); 14 // The game will be resized when browser size change 15 cc.view.resizewithbrowsersize(true); 16 //load resources 17 cc.loaderscene.preload(g_resources, function () { 18 cc.director.runscene(new HelloWorldScene()); 19 }, this); 20 }; 21 cc.game.run(); At first, the cocos2d-js engine will begin by executing onstart function which has code to kick start your game there are few configuration related things going on in the above code which will be explained in later chapters. For now will focus on cc.loaderscene part. 1 cc.loaderscene.preload(g_resources, function () { 2 cc.director.runscene(new HelloWorldScene()); 3 }, this); The above code loads the hello world scene, cc.director is the signle-ton controller instance for your game. purpose of this director is to guide your game through the execution,load and unload the scene getting info about the game execution environment such as screen size and so on. In this code director use runscene function to load the HelloWorldScene, the scene is loaded inside preload beacuse. preload loads the resources specified in g_resources into cocos cache, once resource has been loaded callback function is executed which has code to load the HelloWorldScene. Let s have look at HelloWorldScene and HelloWorldLayer.Open app.js inside src, in the bottom of app.js you will see a code like this
Getting Started 5 1 var HelloWorldScene = cc.scene.extend({ 2 onenter:function () { 3 this._super(); 4 var layer = new HelloWorldLayer(); 5 this.addchild(layer); 6 } 7 }); A scene is begin to run by invoking onenter function, in that HellowWorldLayer is injected as child for scene. We going to modify HelloWorldLayer to make things simple. 1 var HelloWorldLayer = cc.layer.extend({ 2 sprite:null, 3 ctor:function () { 4 this._super(); 5 var size = cc.winsize; 6 var hellolabel = new cc.labelttf("hello World", "Arial", 38); 7 // position the label on the center of the screen 8 hellolabel.x = size.width / 2; 9 hellolabel.y = size.height / 2 + 200; 10 // add the label as a child to this layer 11 this.addchild(hellolabel, 5); 12 13 // add "HelloWorld" splash screen" 14 this.sprite = new cc.sprite(res.helloworld_png); 15 this.sprite.attr({ 16 x: size.width / 2, 17 y: size.height / 2 18 }); 19 this.addchild(this.sprite, 0); 20 return true; 21 } 22 }); This layer has two child, one is cc.labelttf which has hello world as text and a hello world png sprite. Throught this book we going to use portrait screen resolution. So in main.js you should change the below line
Getting Started 6 1 //This is landscape 2 cc.view.setdesignresolutionsize(800, 450, cc.resolutionpolicy.show_all); To 1 //Swap the width and height so that is can be portrait 2 cc.view.setdesignresolutionsize(450, 800, cc.resolutionpolicy.show_all); Width and Height has been swapped. Running the sample To make things simple, Through this book we going to run all the code in web browser, on the other hand deploying it in device as native app is your choice. To run this sample type the navigate to the project path in terminal and type below command 1 cocos run -p web This will launch the app in browser, however you can launch the app in android, ios, window phone by altering -p param as android, ios, wp_81 You will see something like below
Getting Started 7 Hello World In the next chapter we going to look at engine architecture, so let roll on.
Architecture Overview Engine Architecture Understanding the architecture of cocos2d-js will give you a solid foundation about the framework. This section will not cover the detailed architecture which is beyond the scope of this book However we will cover the necessary details that you need to be aware of in order to move forward. Cocos2djs is pure javascript based game framework which runs on browser stack, you can compile it as web app and run in on every browser, however the api s and object s hierarchy are same as of Cocos2d-x. So with the help of JSB and spidermonkey, your javascript game code can be deployed as native app which actually utilize the core rendering pipeline of OpenGL/DirectX. Let s see have a look at the architecture. Cocos2d-js Stack As you see, if your app is browser based, your javascript game code will utilize cocos2d-js library and can be run like any other web app. When you deploy this as native app using cocos console, your javascript code will be mapped to javascript bindings which actually points to native cocos2d-x. And your javascript code will be converted to C by spidermonkey. So cocos2d-x will actually drive your javascript game.
Architecture Overview 9 JSB As mentioned above, JSB contains mapping between javascript and C++ api s of cocos2d-x, so when you choose to deploy your game as native app, all your api s usage are mapped to actual C++ api s call with help of spidermonkey, Note that only documented cocos2d-js api s can be mapped to native api s call. if you try to invoke any functions internal to cocos2d-js which is not documented, it will work fine out of the box in browser, however when you deploy it as native app, you may not see the same result. so it is always recommended to follow the documented api s if you planning to compile your game to any mobile platform. Object Hierarchy Cocos2d-js is based on object oriented principles, all the entities involved are considered as class and objects. Consider the below figure. Object Hierarchy Every class except few utilities in cocos2d-js is inherited from cc.node, starting from Scene, Layer to Sprites, all are instance of Node object. When ever you deal with any visible elements in cocos2djs the top most root object is cc.node. So most of the time you are dealing with Node object. The derived objects will have its own behaviour and overrides based on their definitions and needs.
Architecture Overview 10 Deploy Options Being a pure javascript library, there is much more options to deploy your app than to rely on cocos console. Deploy as hybrid app This option is again subjected to your game performance, if your game uses heavy draw cycle then this option is not recommended. Deploy using Titanium This option will enable you to deploy your app as native app, but feasibility may vary based on what you do in your games. Cocos console This is the our recommended way to deploy your app to various platforms, you can use other cocos2d-x service such as SDKBOX, pluginx and so on.