Cocos2d-Js BASICS (3) the definition and use of various basic classes], cocos2d-js Definition

Cocos2d-Js BASICS (3) the definition and use of various basic classes], cocos2d-js Definition

During game development, we will encounter many inheritance relationships, especially relationship processing between layers.

Some people may have done similar processing, such:

The display layer of the game is classified:

The bottom Layer Scene, interface Layer, Page Layer Page, and pop-up box Layer Tip can be called interface containers in a unified manner.

So how do we implement these relationships in cocos2dx-Js now? How can we demonstrate the game interface effects we want?

Let's sort out the implementation method, as shown in:

: 1. We can create a base class BaseLayer that inherits cc. Layer. extend. In addition, the constructor implements the following functions: (1) translucent background layer; (2) Click events to control whether the layer can be clicked; (3 ), whether or not an animation is displayed (such as a prompt box Tips or a pop-up animation required by the function Page); (4), an extended method (for example, the method for loading cocostudio files on the current page, memory control management, etc.); 2. We need to create a custom Layer, which can be a pop-up window in the prompt box, it can also be a function list Page! This can be expanded on our own. Here we create an init initialization method to implement our function items and pass the parameters required on your function page. Function: (1) inherit from BaseLayer to control and use the functions of the base class; (2) Pass the required parameters through the init initialization method, and implement the functions required for this custom Layer. 3. Add the custom Layer to the required Scene or Layer to complete the creation and implementation of our base class; then we start to write our code: The base class defines BaseLayer. js:/*** Created by yangshengjiepro on 15/5/5. */var BaseLayer = cc. layer. extend ({_ bgFrame: null, _ oktouch: false, _ showbg: false, _ showbgAcion: false, ctor: function () {this. _ super (); // render a background layer. The default value is black translucent if (this. _ showbg = true) {// background var bgF Rame = cc. layerColor (cc. color (0, 0, 0,200); this. addChild (bgFrame, 0); this. _ bgFrame = bgFrame; this. setAnchorPoint (cc. p (0.5, 0.5); // set all nodes in the current layer to have the same points as this. ignoreAnchorPointForPosition (false); this. setContentSize (winSize); this. setPosition (cc. p (winSize. width/2, winSize. height/2);} // enable the underlying layer. Do not click to touch (The UIS below the layer cannot be clicked) if (this. _ oktouch = true) {// Click Time cc. eventManager. addListener ({event: cc. eventListener. TOU CH_ONE_BY_ONE, swallowTouches: true, onTouchBegan: function () {return true ;}, this) ;}// enable the special effect if (this. _ showbgAcion = true) {var obj = this; obj. setScale (0.8); if (obj! = Null) {var sl = cc. easeIn. create (cc. scaleTo. create (0.15, 1.1), 2); var sl2 = cc. scaleTo. create (0.15, 1); var seq = cc. sequence (sl, sl2); obj. runAction (seq) ;}}, setBgColor: function (color) {this. _ bgFrame. setColor (color) ;}, onEnter: function () {this. _ super () ;}, onExit: function () {this. _ super ();}});View Code custom log output Mlog. js
/*** Created by yangshengjiepro on 15/5/5. * // *** custom output log */var OPENLOGFLAG = true; var Mlog = function () {this. flag = 0;} // normally output Mlog. c = function () {var bakLog = cc. _ cocosplayerLog | cc. log | log; if (OPENLOGFLAG = true) {bakLog. call (this, "Mlog:" + cc. formatStr. apply (cc, arguments) ;}; // error message output. e = function () {var bakLog = cc. _ cocosplayerLog | cc. log | log; if (OPENLOGFLAG = true) {bakLog. call (this, "Mlog_ERROR:" + cc. formatStr. apply (cc, arguments ));}};View Code

Custom layer on the main interface

MainLayer. js

/*** Created by yangshengjiepro on 15/4/20. */var MainLayer = BaseLayer. extend ({ctor: function () {this. _ oktouch = true; // enable this. _ showbg = true; // enable the background this. _ showbgAcion = false; // The effect does not need to be displayed on the main interface. this. _ super (); var mainbg = cc. sprite (res. mainBG); mainbg. attr ({x: this. getContentSize (). width/2, y: this. getContentSize (). height/2, scale: 1, ratation: 0}); mainbg. setAnchorPoint (cc. p (0.5, 0.5); this. addChild (mainbg); Mlog. c ("this layer is" + "OK") ;}}); var MainScene = cc. scene. extend ({onEnter: function () {this. _ super (); var layer = new MainLayer (); this. addChild (layer );}});View CodeOK. The knowledge points in this chapter are over. I hope you will get some help! Download the source code of this lesson:

(Baidu cloud disk)

Source code usage:

Create a new project by yourself, decompress the downloaded files, and copy all the files to the directory of your new project to overwrite all the files that can be run!