COCOS2D-HTML5 Development Combat

1. COCOS2D-HTML5 Basic Knowledge

1, Director (Ccdirector) in the COCOS2D-HTML5 engine, the director is the leader of the game, the director of all scenes, sets, elves and so on.
2, the camera (Cccamera) thin to each node requires a camera, such as the node when the amplification, reduction, rotation and other changes, you need to inherit the camera, let it re-render.
3, Scene (Ccscene) we can understand a movie when the clip, in the game may become a level, it is composed of scenes, characters and so on.
4, the Scenery (Cclayer) is conceptually understood, is the complex background, is not the simple background oh, is one kind of combination result, sometimes the sprite may also become the scene.
5, the character is the Spirit (Ccsprite), better understanding of the concept of the protagonist, the enemy, NPC, etc. are elves.
6, the action (ccation) can be understood as behavior, such as what the character is going to do (action).

2. Scene, layer, Sprite

// Basic Usage var scene  = cc. Scene.create (); var layer= cc. Layer.create (); var sprite= cc. Sprite.create ("Picture.png"); Scene.addchild (Layer,zorder); // ZOrder is a number, the higher the value shows the higher the layer.addchild (Sprite,zorder);

3. New Project

A. After extracting the downloaded cocos2d, copy the file of the template directory and rename it to mushroom

B. Delete the copied resource files, in the Res directory, and copy the prepared picture resources.

C. Modify the resource.js below the SRC directory to add our image resources

// Add a picture resource var s_forest1 = "Res/forest1.jpg"; // background var // Mushroom Normal State var s_mushroom2 = "Res/mushroom2.png"; // The mushroom was hit by the state var g_ressources = [    {src:s_forest1},    {src:s_mushroom},    {src:s_mushroom2}];

D. Modify the canvas label in the root directory index.html, size 480*320

4. Add a scene to depict the background

A. Add a blank js file named Gamescene.js in the SRC directory (user-defined JS must be added to the Cocos2d.js appfiles array, the system will load the array JS files sequentially)

B. Gamescene.js inside define scene, inherit from Cc.scene

// Scene var Gamescene = cc. Scene.extend ({     onEnter:function  () {        this. _super ();   Call the parent class with the same name method, which is called CC. The scene's OnEnter        // is usually written here by itself, after the operation      });

C. Modify the boot scene to Gamescene.js in Main.js

// Modify the original var MyApp = new Cocos2dapp (MyApp) var new Cocos2dapp (Gamescene);

D. Add a background to the scene

// Add Layer this. gamelayer = cc. Layer.create (); this. AddChild (this. Gamelayer); // Add Background var bg = cc. Sprite.create (s_forest1); this. Gamelayer.addchild (bg,0); // set the anchor point and position of the background Bg.setanchorpoint (CC.P (0,0)); Bg.setposition (CC.P (0,0));

About image Anchor Point positioning reference http://www.cnblogs.com/pengyingh/articles/2433081.html

The origin of the engine is in the lower left corner, the sprite default anchor point is CC.P (0.5,0.5) at the center of the picture,
The range of anchor points is generally: 0~1, set as needed
CC.P (0.5,0.5) The center point of the picture
CC.P (0,0) picture in the lower left corner
CC.P (0,1) picture in the upper left corner
CC.P (1,0) The lower-right corner of the picture
Top right corner of CC.P (PHOTOS)

The final gamescene.js code is as follows

varGamescene =cc. Scene.extend ({gamelayer:NULL, OnEnter:function () {         This. _super ();//call the parent class with the same name method, which is called CC. The OnEnter of Scene        //usually write yourself into the scene after the Operation       //Add Layer       This. Gamelayer =cc.      Layer.create ();  This. AddChild ( This. Gamelayer); //Add Background      varBG =cc.      Sprite.create (S_FOREST1);  This. Gamelayer.addchild (bg,0); Bg.setanchorpoint (CC.P (0,0)); Bg.setposition (CC.P (0,0)); }});

5. Touch Event: Ontouchbegan (front touch), ontouchmoved (Touch and move)

//usagevarLayer =cc. Layer.extend ({ctor:function(){         This. _super (); Cc. Director.getinstance (). Gettouchdispatcher (). Addtargeteddelegate ( This, 0,true);//Add the current object to the touch listener row}, Ontouchbegan:function(Touch, event) {//Monitor Touch Moments        return true; }, Ontouchmoved:function(Touch, event) {//Listen for touch move, only execute to this step when Ontouchbegan returns True    }});

6. Depicting mushrooms

Since mushrooms have their own behavior, we can define one of their own mushroomsprite inherited from Cc.sprite

In the SRC directory, create the Mushroomsprite.js, and add the path to the Cocos2d.js file in the appfiles array

// Mushroomsprite.js var Mushroomsprite = cc. Sprite.extend ({    /** *    Constructor    **/    ctor:function  () {        this. _super ();    }});

Give a picture to a sprite

var Mushroomsprite = cc. Sprite.extend ({    ctor:function() {        this. _super ();         this. Initwithfile (s_mushroom); // assign a picture element     }});

Add Mushroomsprite to the game scene in Gamescene.js

7. Let the mushroom move with the mouse

To determine if the touch point is on a mushroom, and if so, then the mushroom x-axis follows the mouse to change

A. Register the touch event to listen for Ontouchbegan, ontouchmoved, and only Ontouchbegan return True, ontouchmoved can listen. and set the x axis of the mushroom to the moving position.

ctorfunction(){         This. _super ();  This. Initwithfile (S_mushroom);//assign a picture elementCc.registertargeteddelegate (0,true, This); },    //just touch the momentOntouchbegan:function(touch,event) {Cc.log ("Ontouchbegan"); return true; },    //Touch MoveOntouchmoved:function(touch,event) {Cc.log ("Ontouchmoved"); varTouchPoint =touch.getlocation ();  This. Setpositionx (Touchpoint.x); }

B. This time click the entire scene to move, the mushroom will move, need to limit the touch point on the mushroom to move, the overall file for

varMushroomsprite =cc. Sprite.extend ({/** * constructor function **/ctor:function(){         This. _super ();  This. Initwithfile (S_mushroom);//assign a picture elementCc.registertargeteddelegate (0,true, This); }, Containstouchlocation:function(Touch) {//get touch Point position        varGetPoint =touch.getlocation (); //get picture Area size        varContentsize = This. Getcontentsize (); //Defining a drag area        varMyrect = Cc.rect (0,0, Contentsize.width,contentsize.height); Myrect.x+= This. GetPosition (). x; Myrect.y+= This. GetPosition (). Y; //Myrect.setpositionx (This.getscalex ());        //determine if the click is on an area        returnCc.rectcontainspoint (Myrect,getpoint); },    //just touch the momentOntouchbegan:function(touch,event) {Cc.log ("Ontouchbegan"); Cc.log ( This. Containstouchlocation (Touch)); if(! This. Containstouchlocation (Touch))return false; return true; },    //Touch MoveOntouchmoved:function(touch,event) {Cc.log ("Ontouchmoved"); varTouchPoint =touch.getlocation ();  This. Setpositionx (Touchpoint.x); }});