00 | Cocos2D-JS | Game Start

[Gurigraphics]

Welcome to Cocos2D-JS Quick Tutorials!

Start

1. Download the project files -> link
2. Export the zip folder.

project.json

In this file we import the *.js files

{
    "debugMode"     : 1,
    "frameRate"     : 60,
    "id"            : "gameCanvas",
    "renderMode"    : 2,
    "jsList"        : [   
        "src/Game.vars.js",
        "src/Game.resources.js",
        "src/Game.layers.js",
        "src/Game.scenes.js"
    ]
} 

renderMode: 0 = auto renderMode: 1 = canvas renderMode: 2 = webGL

Game.resources.js

In this file we define the game resources.

Game.res = { 
    HelloWorld_png : "HelloWorld.png" 
};
	
Game.g_resources = []; 
    
for ( var i in Game.res ) {
    Game.g_resources.push( Game.res[i] ); 
}

Game.vars.js

In this file we declare the game variables

    Game = {}; 
    Game.scenes = []; 
    Game.scenes[1] = {}; 
    Game.layers = []; 
    Game.layers[1] = {}

Game.scenes.js

In this file we define the game scenes

    Game.scenes[1].extend = cc.Scene.extend({ 
    	onEnter:function () { 
    		this._super(); 
    		var layer = new Game.layers[1].extend(); 
    		layer.init(); 
    		this.addChild( layer ); 
    	} 
    });

Game.layers.js

In this file we define the game layers

    Game.layers[1].extend = cc.Layer.extend({ 
    	init: function () { 
    		this._super(); 
    		var game = this; 
    		Game.layers[1].start( game ); 
    	} 
    }); 
    Game.layers[1].start = function( game ){ 
    	var size = cc.director.getWinSize(); 
    	var label = cc.LabelTTF.create("Hello World", "Arial", 40);
    	label.setPosition(size.width / 2, size.height / 2);
    	game.addChild(label, 1); 
    };

Game.js

This file run the game and start the game scene

cc.game.onStart = function(){
    cc.LoaderScene.preload( Game.g_resources, function () {
        cc.director.runScene(new Game.scenes[1].extend());
    }, this);  
};  
  
window.onload = function(){  
	cc.game.run("gameCanvas");   
}

This project will display Hello World