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.htmlin 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 mainindex.htmlpage. 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.jsis 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 to60to have a smooth game.id: This is the DOM element that is required to run the game. Do you remember you gave your canvas thegameCanvasid? 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 insrc/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.htmlpage from yourlocalhost(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!
