"Cocos2d-js Basic Teaching (3) definition and use of various base classes"

In the game development process we will encounter a lot of inheritance relationship processing, especially the relationship between the hierarchy process.

Some students may have done similar work, such as:

The game's display layer rating is:

The bottom scene, interface layer layers, page layer pages, frame layer tip, etc., we can unify these called interface containers.

So how do we achieve these relationships in COCOS2DX-JS now? How do we show the game interface effect that we want to express?

Let's start by combing through the implementation, as shown in:

: One, we can create a base class Baselayer, which inherits CC. Layer.extend. And in the constructor ctor the following functions: (1), translucent background layer, (2), click on the event to control whether the layer can be clicked, (3), whether the popup with pop-up animation (such as cue box tips, or the Function page page needed to pop animation), (4), expand the method (for example, Current page load Cocostudio file method, memory control management, etc.); second, we need to make a custom layer layer, which can be a popup window or a Feature List page page! This can be expanded on its own; we are here to implement our own feature items by creating an init initialization method, and can pass the parameters you need for this feature page. Functions: (1), Inherit Baselayer, so that the function of the base class can be controlled and used, (2), through the Init initialization method, pass the required parameters, and implement this custom layer needs to implement the function; Third, the custom layer Add to the desired scene or layer to complete the creation and implementation of our base class; then we begin to write our code: base class definition Baselayer.js:

/** * Created by Yangshengjiepro on 15/5/5.*/varBaselayer=cc. Layer.extend ({_bgframe:NULL, _oktouch:false, _SHOWBG:false, _showbgacion:false, ctor:function(){         This. _super (); //renders a background layer, the default is black translucent        if( This. _showbg==true)        {            //background            varBgframe = cc. Layercolor (Cc.color (0,0,0,200));  This. AddChild (bgframe,0);  This. _bgframe=Bgframe;  This. Setanchorpoint (CC.P (0.5,0.5)); //sets the stroke of all nodes inside the current layer to be the same as that layer             This. Ignoreanchorpointforposition (false);  This. Setcontentsize (winsize);  This. SetPosition (CC.P (WINSIZE.WIDTH/2,WINSIZE.HEIGHT/2)); }        //turn on the bottom non-clickable touch (the UI below the layer is not clickable)        if( This. _oktouch==true)        {            //Click TimeCc.eventManager.addListener ({event:cc. Eventlistener.touch_one_by_one, Swallowtouches:true, Ontouchbegan:function(){                    return true; }            },  This); }        //Turn on open form is a special effect        if( This. _showbgacion==true)        {            varobj= This; Obj.setscale (0.8); if(obj!=NULL){                varSL=CC. Easein.create (CC. Scaleto.create (0.15,1.1), 2); varSL2=CC. Scaleto.create (0.15,1); varseq=cc.                Sequence (SL,SL2);            Obj.runaction (seq); }}, Setbgcolor:function(color) { This. _bgframe.setcolor (color); }, OnEnter:function(){         This. _super (); }, OnExit:function(){         This. _super (); }});

View CodeCustom log Output Mlog.js

/** * Created by Yangshengjiepro on 15/5/5.*//** * Custom output log*/varOpenlogflag =true;varMlog =function () {     This. Flag = 0;}//Normal OutputMLOG.C =function(){    varBaklog = Cc._cocosplayerlog | | Cc.log | |log; if(openlogflag==true) {Baklog.call ( This, "Mlog:" +cc.formatStr.apply (cc, arguments)); }};//Error OutputMLOG.E =function(){    varBaklog = Cc._cocosplayerlog | | Cc.log | |log; if(openlogflag==true) {Baklog.call ( This, "Mlog_error:" +cc.formatStr.apply (cc, arguments)); }};

View Code

Main interface Custom Layer

Mainlayer.js

/** * Created by Yangshengjiepro on 15/4/20.*/varMainlayer =Baselayer.extend ({ctor:function(){         This. _oktouch=true;//turn on the clickable         This. _showbg=true;//Open Background         This. _showbgacion=false;//The main interface does not require a popup effect         This. _super (); varMAINBG =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"); }});varMainscene =cc. Scene.extend ({onEnter:function(){         This. _super (); varLayer =NewMainlayer ();  This. AddChild (layer); }});

View CodeOK, this chapter of knowledge points to the end, I hope you have something to gain!This lesson source download:

(Baidu Cloud Disk)

How to use the source code:

Create a new project yourself, unzip the downloaded file, copy all the files to your new project directory and all the overlays can run!

"Cocos2d-js Basic Teaching (3) definition and use of various base classes"