What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Learning Cocos2d-JS Game Development

Chapter 1. Hello World – A Cross-platform Game

The legend says that the first working script you should do when learning a new language is the classic Hello World printed somewhere on the screen.

This chapter will guide you through the creation of a cross-platform Hello World example, covering these concepts:

The theory behind the creation of cross platform games
Cocos2d-JS installation and setup
A Cocos2d-JS project blueprint
Scenes, Layers, and Sprites
Preloading images
Adding images
Removing images

By the end of the chapter, you will be able to create a template project to create any kind of Cocos2d-JS cross-platform game that is capable of running on various devices at different resolutions.

What Cocos2d-JS is and how it works

Cocos2d-JS is a free open source 2D game framework. It can help you to develop cross-platform browser games and native applications. This framework allows you to write games in JavaScript. So, if you have already developed JavaScript applications, you don't have to learn a new language from scratch. Throughout this book, you will learn how to create almost any kind of cross-platform game using a familiar and intuitive language.

Requirements to run Cocos2d-JS

Before you start, let's see what software you need to install on your computer in order to start developing with Cocos2d-JS:

Firstly, you need a text editor. The official IDE for Cocos2d-JS coding is Cocos Code IDE, which you can download for free at http://www.cocos2d-x.org/products/codeide. It features auto completion, code hinting, and some more interesting characteristics to speed up your coding. If you are used to your favorite code editor, that's fine. There are plenty of them, but I personally use PSPad (you can find this at http://www.pspad.com/) on my Windows machine and TextWrangler (you can find this at http://www.barebones.com/products/textwrangler/) on the Mac. They are both free and easy to use, so you can download and have them installed in a matter of minutes.
To test your Cocos2d-JS projects, you will need to install a web server on your computer to override security limits when running your project locally. I am using WAMP (http://www.wampserver.com/) on my Windows machine, and MAMP (http://www.mamp.info/) on the Mac.
Tip
Again, both are free to use as you won't need the PRO version, which is also available for Mac computers. Explaining all the theory behind this is beyond the scope of this book, but you can find all the required information as well as the installation documentation on the official sites.
If you prefer, you can test your projects directly online by uploading them on an FTP space you own and call them directly from the web. In this case, you don't need to have a web server installed on your computer, but I highly recommend using WAMP or MAMP instead.
I personally use Google Chrome as the default browser to test my projects. As these projects are meant to be cross-platform games, it should run in the same way on every browser, so feel free to use the browser you prefer.

The latest information about Cocos2d-JS can be found on the official page http://www.cocos2d-x.org/wiki/Cocos2d-JS, while the latest version can be downloaded at http://www.cocos2d-x.org/download.

Note

Cocos2d-JS is updated quite frequently, but at the time of writing, the latest stable release is v3.1. Although new releases always bring some changes, all examples included in this book should work fine with any release marked as 3.x as there aren't huge changes in the roadmap.

You will notice the download file is a ZIP file that is greater than 250 MB. Don't worry. Most of the content of the package is made by docs, graphic assets, and examples, while the only required folder, at the moment, is the one called cocos2d-html5.

Hello Cross-World

The time has come, the boring theory has ended, and we can now start coding our first project. Let's begin!

Firstly, create a page called index.html in the root of the game folder and write this HTML code:
```
<!DOCTYPE html>
  <head>
    <title>
      My Awesome game
    </title>
    <script src="cocos2d-html5/CCBoot.js" type="text/javascript">
</script>
    <script src="main.js" type="text/javascript">
</script>
  </head>
  <body style="padding:0;margin:0;background-color:#000000;">
  </body>
</html>
```
There's nothing interesting in it as it is just plain HTML. Let's take a closer look at these lines to see what is going on:
```
<script src=" cocos2d-html5/CCBoot.js "></script>
```
Here, I am including the Cocos2d-JS boot file to make the framework start:
```
<script src="main.js"></script>
```
From the preceding line, this is where we call the script with the actual game we are going to build. Next, we have the following code:
```
<canvas id="gameCanvas"></canvas>
```
This is the canvas we will use to display the game. Notice here that the canvas does not have a width and height, as they will be defined by the game itself.
Next is the creation of main.js: the only file we will call from our main index.html page. This is more of a configuration file rather than the game itself, so you won't code anything that is game-related at the moment. However, the file you are going to build will be the blueprint you will be using in all your Cocos2d-JS games.
The content of main.js is as follows:
```
cc.game.onStart = function(){
    cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
    cc.director.runScene(new gameScene());
};
cc.game.run();
```
Don't worry about the code at the moment; it looks a lot more complicated than it really is. At the moment, the only line we have to worry about is the one that defines the resolution policy.
Tip
One of the most challenging tasks in cross-platform development is to provide a good gaming experience, no matter what browser or what device the game is running on. However, the problem here is that each device has its own resolution, screen size, and ratio.
Cocos2d-JS allows us to handle different resolutions in a similar way web designers do when building responsive design. At the moment, we just want to adapt the game canvas to fit the browser window while targeting the most popular resolution, which is 320x480 (portrait mode). That's what this line does:
```
 cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
```
Using these settings, you should be pretty sure that your game will run on every device, although you will be working in a low resolution.
Also, have a look at this line:
```
cc.director.runScene(new gameScene());
```
Basically, a Cocos2d-JS game is made by a scene where the game itself runs. There can be more scenes in the same game. Imagine a scene with the title screen, a scene with the game over screen, and a scene with the game itself. At the moment, you only have one scene called gameScene. Remember this name because you are going to use it later.
Following this, the next required blueprint file you are going to build is project.json, which has some interesting settings. Let's take a look at the file first:
```
{
  "debugMode" : 0,
  "showFPS" : false,
  "frameRate" : 60,
  "id" : "gameCanvas",
  "renderMode" : 0,
  "engineDir":"cocos2d-html5/",

  "modules" : ["cocos2d"],

  "jsList" : [
    "src/gamescript.js"
  ]
}
```
What do these lines mean? Let's see them one by one:
- debugMode: This is the object key that determines the level of debug warnings. It has a range from 0 to 6. Leave it at 0 at the moment since the project is very simple and we won't make any errors.
- showFPS: This object can be true or false; it shows or hides the FPS meter on the screen.
- frameRate: This object sets the frame rate of your game. Set it to 60 to have a smooth game.
- id: This is the DOM element that is required to run the game. Do you remember you gave your canvas the gameCanvas id? Here you are.
- engineDir: This is the folder where Cocos2d-JS is installed.
- modules: This object engines the modules to load. At the moment, we only need the basic Cocos2d library.
- jsList: This is an array with the files used in the game. This means we are going to create our game in src/gamescript.js.
Finally, we arrive at the game script itself. This is the one that will contain the actual game, gamescript.js, which at the moment is just a plain declaration of the game scene:
```
var gameScene = cc.Scene.extend({
  onEnter:function () {
    this._super();
    console.log("my awesome game starts here");
  }
});
```
Here, you want to save everything and call index.html page from your localhost (refer to your WAMP or MAMP docs) in your browser. If you now open the developer console, you should see:
my awesome game starts here

Congratulations! This means you have successfully managed to create a Cocos2d-JS template file to build your future games.

Let's build our first mini game at once!

Preloading and adding images

In this example, I am using a 64x64 PNG image representing a target, as shown in the following figure:

You are obviously free to use whatever image you prefer.

When you load a web page, in most cases, the page is loaded and shown before all images are loaded. This might sound okay on a web page because readers won't mind if they have to wait a couple of seconds before an image is showed, but this definitively can't happen in a game. This means our images need to be preloaded, and Cocos2d-JS can easily handle this. The steps on how to preload images in your game are as follows:

This is the first time you add this line to the project.json file:
```
{
  "debugMode" : 0,
  "showFPS" : false,
  "frameRate" : 60,
  "id" : "gameCanvas",
  "renderMode" : 0,
  "engineDir":"cocos2d-html5/",

  "modules" : ["cocos2d"],

  "jsList" : [
    "src/loadassets.js",
    "src/gamescript.js"
  ]
}
```
This means you are going to create another file called loadassets.js in the same src folder where you just created gamescript.js.
This is the content of loadassets.js:
```
var gameResources = [
     "assets/target.png"
];
```
An array called gameResources stores the assets to preload. So, you should create a folder called assets and place the target.png image inside this folder.
Note
To keep the project organization clear, I am going to place all game assets in a folder called assets.
Now that Cocos2d-JS is aware which images need to be preloaded, we only need to tell the game that it has to preload them before the scene starts, so we need to add a couple of lines to main.js:
```
cc.game.onStart = function(){
  cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
  cc.LoaderScene.preload(gameResources, function () {
    cc.director.runScene(new gameScene());
  }, this);
};
cc.game.run();
```
The cc.LoaderScene.preload constructor will preload scene resources taken from the gameResources array defined in loadassets.js. All puzzle pieces match perfectly.

Finally, let's add the target to the game by rewriting the gamescript.js file:

var gameScene = cc.Scene.extend({
  onEnter:function () {
  this._super();
    var gameLayer = new game();
    gameLayer.init();
    this.addChild(gameLayer);
  }
});
var game = cc.Layer.extend({
  init:function () {
    this._super();
    var target = cc.Sprite.create("assets/target.png");
    this.addChild(target,0);
  }
});

If you developed Flash games using AS3 (ActionScript 3), you will find Cocos2d-JS assets hierarchy familiar to display objects. If you are new to this, allow me to explain what happens:

Like all frameworks that deal with graphic resources, Cocos2d-JS has hierarchy rules. On the top of such a hierarchy, we find the Scene object. Each scene contains some game logic; think about a main menu scene, a game scene, and a game over scene.
Each scene contains one or more Layer objects; layers define which content should be at the top of other content. In a real-world example, a level background is in the bottom-most layer, player and enemies will be created in a layer above the background, and game information such as score and remaining lives are placed on the topmost layer.
Finally, all layers can have one or more Sprite objects, which are the graphic assets themselves such as the player, the enemies, or in this case, the target.
To summarize, the code means that once gameScene is executed, create and add the game layer, and in this layer, add the target sprite.

It's time to test the project by calling the index.html file, and the following screenshot is what you should get:

Although it's just a basic project, there are several things to take note of:

Images are preloaded and a default loading screen is shown. This means the preloader works.
Although our project is set to work at 320x480, the game stretches to fill the browser completely, thanks to the resolution policy set before.
Images have their registration point in the center of the image, whereas most frameworks have their image registration point in the upper-left corner.
The origin (0,0) of the scene takes place in the lower-left corner, while most frameworks have their origin in the upper-left corner.

To top it all, you were able to create your first project. To change the target position and place it in the middle of the screen, just use the setPosition method that changes gamescript.js this way:

var gameScene = cc.Scene.extend({
  onEnter:function () {
  this._super();
    var gameLayer = new game();
    gameLayer.init();
    this.addChild(gameLayer);
  }
});

var game = cc.Layer.extend({
  init:function () {
    this._super();
    var target = cc.Sprite.create("assets/target.png");
    this.addChild(target,0);
    target.setPosition(160,240);
  }
});

Test the project and you will see the target image in the middle of the screen.

Description

If you are a Java developer who wants to learn about Java EE, this is the book for you. It's also ideal for developers who already have experience with the Java EE platform but would like to learn more about the new Java EE 7 features by analyzing fully functional sample applications using the new application server WildFly.

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

Can$41.99

Can$61.99

Can$41.99

Total Can$ 145.97

Filter reviews by

All

Amazon verified reviews

Hugo Dec 14, 2015

As a Learning Cocos2d-JS book, this is a spectacular book, the author give a lot of examples about engine features, you can start to make your gamesusing physics(Box2D and Chipmunk), endless runner, particle, virtual pads, swipe gestures, grid levels, etc.The JS port of the Cocos2d-X engine is good, and the author is a great writer (his blog is really awesome), but, some people talks about this cross platform powers of Cocos2d-JS, that is possible to use on web and on devices, I thought that the author could give more information about, I have few questions about native development and more about to publish on web... and I'm not a complete beginner on Cocos2d-x C++ version, but the Cocos2d-x community is so active that all my questions about Android side was solved, but for web I am just starting, all examples run in every platform, you just need to know how to do it, isn't just HTML5, after you know how to use this engine for each platform in command line, isn't so complicated and it is on README file on root folder, you will see how powerful this book is and after that you will simply love it, as the title says "Learning Cocos2d-JS", this book is a powerful tool to you learn to make games, Cocos2d-JS is really fast for test, for my games the stability and performance was almost like native.

Amazon Verified review

iPaul Mar 23, 2015

This is a good intro to game development if you are a JavaScript programmer, if you are a JavaScript beginner you should probably learn some JS (there are a lot of free intros online). The author will hold your hand into building a complete cross platform game while teaching you the in and outs of Cocos2d-JS (the JavaScript version of Cocos2d-x).

Pradyumna Mar 25, 2015

I have worked with Cocos2D on iOS and have planned to develop cross platform games using some framework. That is when I got to know about Cocos2d-JS and this book gives you a clear cut explanation and a good flow on how to carry on with developing games and there are types of games that will be explained in the book. Thanks to Emanuele (Y)..

Andrew McNutt Jan 27, 2015

This was a fantastic book. There are a couple errors on the Kindle edition(the version I bought) but the code examples are all there. The different chapters each provide very useful information. I look forward to other books from this author.A little more on the book itself. This is great if you are completely new to Cocos2d-js(as I was). After reading the book I feel it gave me a solid base as to where to dive deeper on certain topics for a game I am working on. If you are new to Cocos2d-js it is well worth the money.

CH Tan Mar 23, 2015

It is a good book for the beginner to learn game programming theory with the examples. (I'm new to game programming)For me it still require the beginner to learn some basic knowledge of Javascript before get into this.The explanation after the code line by line, able to help the reader understand it clearly.That was less book teach about the Cocos2d-JS right now on the market. Will looking for more books about Cocos2d-JS programming books from Emanuele Feronato. Hope will release the Advanced Game Development soon.

Learning Cocos2d-JS Game Development: Learn to create robust and engaging cross-platform HTML5 games using Cocos2d-JS

What do you get with Print?

Learning Cocos2d-JS Game Development

Chapter 1. Hello World – A Cross-platform Game

Why should I make cross-platform games?

What Cocos2d-JS is and how it works

Requirements to run Cocos2d-JS

Tip

Note

The structure of your Cocos2d-JS project

Hello Cross-World

Tip

Preloading and adding images

Note

Removing images and changing the background color

Summary

Page 1 of 8

Description

Product Details

What do you get with Print?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the author

FAQs

Learning Cocos2d-JS Game Development: Learn to create robust and engaging cross-platform HTML5 games using Cocos2d-JS

What do you get with Print?

Tip

Tip

Note

Description

Product Details

What do you get with Print?

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the author

FAQs