You're reading from Learning Cocos2d-JS Game Development Learn to create robust and engaging cross-platform HTML5 games using Cocos2d-JS

Product type Paperback

Published in Jan 2015

Publisher

ISBN-13 9781784390075

Length 188 pages

Edition 1st Edition

Languages

JavaScript

Tools

Cocos2d

Concepts

2D Game Development

Author (1):

Emanuele Feronato

View More author details

Table of Contents (11) Chapters

Preface

1. Hello World – A Cross-platform Game FREE CHAPTER

2. Adding Interactivity – The Making of a Concentration Game

3. Moving Sprites Around the Screen – An Endless Runner

4. Learn about Swipes through the making of Sokoban

5. Become a Musical Maestro

6. Controlling the Game with Virtual Pads

7. Adding Physics to Your Games Using the Box2D Engine

8. Adding Physics to Your Games Using the Chipmunk2D Engine

9. Creating Your Own Blockbuster Game – A Complete Match 3 Game

Index

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