cocos2d-js:定制加载界面

概述http://blog.csdn.net/jonahzheng/article/details/38348255 cocos2d进入游戏前都有一个默认的加载界面,如图，如果要自己定制这个加载界面，应该如何做呢 以下是main.js的代码 [javascript]  view plain copy print ? cc.game.onStart = function(){       //1,   http://blog.csdn.net/jonahzheng/article/details/38348255

cocos2d进入游戏前都有一个默认的加载界面,如图，如果要自己定制这个加载界面，应该如何做呢

以下是main.Js的代码

[JavaScript] view plain copy print ? cc.game.onStart=function(){ //1, //cc.vIEw.adjustVIEwPort(true); //2.根据不同的环境设置不同的分辨率 if(cc.sys.isMobile) cc.vIEw.setDesignResolutionSize(320,500,cc.ResolutionPolicy.FIXED_WIDTH); elsecc.vIEw.setDesignResolutionSize(320,480,cc.ResolutionPolicy.SHOW_ALL) //cc.vIEw.setDesignResolutionSize(800,450,cc.ResolutionPolicy.EXACT_FIT); cc.vIEw.resizeWithbrowserSize(true); //3.预加载 cc.LoaderScene.preload(g_resources,function(){ //4.加载第一场景 cc.director.runScene(newGameScene()); },this); }; cc.game.run();
其中cc.LoaderScene就是Loading界面的实现类，对应的文件就是ccloaderScene.Js，我们只需参考这个文件自定义一个LoaderScene类就可以了。

类名叫MyLoading,代码如下

varlogoData="data:image/jpeg;base64,/9.............";//图片的base64数据 MyLoading=cc.Scene.extend({ _interval:null, _length:0, _count:0, _label:null, _winSize:null,153); List-style:decimal-leading-zero outsIDe; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> _classname:"MyLoading",248)"> _processLayer:null,153); List-style:decimal-leading-zero outsIDe; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> _processLayerLength:null,153); List-style:decimal-leading-zero outsIDe; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> init:function(){ varself=this; //logo varlogoWIDth=160; varlogoHeight=200; //bg varbgLayer=self._bgLayer=cc.Layercolor.create(cc.color(32,32,255)); bgLayer.setposition(cc.visibleRect.bottomleft); self.addChild(bgLayer,0); //imagemovetoCCScenefile.Js varFontSize=24,lblHeight=-logoHeight/2+100; if(cc._loaderImage){ //loadinglogo cc.loader.loadimg(logoData,{isCrossOrigin:false},function(err,img){ logoWIDth=img.wIDth; logoHeight=img.height; self._initStage(img,cc.visibleRect.center); }); FontSize=14; lblHeight=-logoHeight/2-10; //} //loadingpercent varlabel=self._label=cc.LabelTTF.create("Loading...0%","Arial",FontSize); label.setposition(cc.pAdd(cc.visibleRect.center,cc.p(0,lblHeight))); label.setcolor(cc.color(180,180,180)); bgLayer.addChild(this._label,10); //定义进度条层 this._winSize=cc.director.getWinSize(); varcenterPos=cc.p(this._winSize.wIDth/2,this._winSize.height/2); self._processLayerLength=500; self._processLayer=cc.Layercolor.create(cc.color(255,100,128),1,30); self._processLayer.setposition(cc.pAdd(centerPos,cc.p(-this._processLayerLength/2,-logoHeight/2-50))); self._bgLayer.addChild(this._processLayer); returntrue; _initStage:function(img,centerPos){ varself=this; vartexture2d=self._texture2d=newcc.Texture2D(); texture2d.initWithElement(img); texture2d.handleLoadedTexture(); varlogo=self._logo=cc.Sprite.create(texture2d); logo.setScale(cc.contentScaleFactor()); logo.x=centerPos.x; logo.y=centerPos.y; self._bgLayer.addChild(logo,10); onEnter:function(){ cc.Node.prototype.onEnter.call(self); self.schedule(self._startLoading,0.3); onExit:function(){ cc.Node.prototype.onExit.call(this); vartmpStr="Loading...0%"; this._label.setString(tmpStr); /** *initwithresources *@param{Array}resources *@param{Function|String}cb */ initWithResources:function(resources,cb){ if(typeofresources=="string")resources=[resources]; this.resources=resources||[]; this.cb=cb; },153); List-style:decimal-leading-zero outsIDe; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> _startLoading:function(){ self.unschedule(self._startLoading); varres=self.resources; self._length=res.length; self._count=0; cc.loader.load(res,function(result,count){self._count=count;},function(){ if(self.cb) self.cb(); }); self.schedule(self._updatePercent); _updatePercent:function(){ varcount=self._count; varlength=self._length; varpercent=(count/length*100)|0; percent=Math.min(percent,100); self._label.setString("Loading..."+percent+"%"); //更新进度条的长度 this._processLayer.changeWIDth(this._processLayerLength*percent/100); if(count>=length)self.unschedule(self._updatePercent); } MyLoading.preload=function(resources,248)"> var_cc=cc; if(!_cc.myLoading){ _cc.myLoading=newMyLoading(); _cc.myLoading.init(); _cc.myLoading.initWithResources(resources,cb); cc.director.runScene(_cc.myLoading); return_cc.myLoading; }; 总结

以上是内存溢出为你收集整理的cocos2d-js:定制加载界面全部内容，希望文章能够帮你解决cocos2d-js:定制加载界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。