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.jsonfile:{ "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.jsin the samesrcfolder where you just createdgamescript.js.This is the content of
loadassets.js:var gameResources = [ "assets/target.png" ];An array called
gameResourcesstores the assets to preload. So, you should create a folder calledassetsand place thetarget.pngimage 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.preloadconstructor will preload scene resources taken from thegameResourcesarray defined inloadassets.js. All puzzle pieces match perfectly. - Finally, let's add the target to the game by rewriting the
gamescript.jsfile: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
Sceneobject. 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
Layerobjects; 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
Spriteobjects, 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
gameSceneis executed, create and add thegamelayer, and in this layer, add thetargetsprite.
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.
