东子的博客

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

以下是main.js的代码

cc.game.onStart = function(){//1,//cc.view.adjustViewPort(true);//2.根据不同的环境设置不同的分辨率if(cc.sys.isMobile)cc.view.setDesignResolutionSize(320, 500, cc.ResolutionPolicy.FIXED_WIDTH);else cc.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(new GameScene());}, this);};cc.game.run();其中cc.LoaderScene就是Loading界面的实现类,对应的文件就是CCLoaderScene.js,,我们只需参考这个文件自定义一个LoaderScene类就可以了。

类名叫MyLoading,代码如下

var logoData = "data:image/jpeg;base64,/9…………."; //图片的base64数据MyLoading = cc.Scene.extend({_interval : null,_length : 0,_count : 0,_label : null,_winSize : null,_className:"MyLoading",_processLayer: null, _processLayerLength: null,init : function(){var self = this;//logovar logoWidth = 160;var logoHeight = 200;// bgvar bgLayer = self._bgLayer = cc.LayerColor.create(cc.color(32, 32, 32, 255));bgLayer.setPosition(cc.visibleRect.bottomLeft);self.addChild(bgLayer, 0);//image move to CCSceneFile.jsvar fontSize = 24, lblHeight = -logoHeight / 2 + 100;if(cc._loaderImage){//loading logocc.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;//}//loading percentvar label = 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();var centerPos = cc.p(this._winSize.width / 2, this._winSize.height / 2);self._processLayerLength = 500;self._processLayer = cc.LayerColor.create(cc.color(255, 100, 100, 128), 1, 30);self._processLayer.setPosition(cc.pAdd(centerPos, cc.p(- this._processLayerLength / 2, -logoHeight / 2 – 50)));self._bgLayer.addChild(this._processLayer);return true;},_initStage: function (img, centerPos) {var self = this;var texture2d = self._texture2d = new cc.Texture2D();texture2d.initWithElement(img);texture2d.handleLoadedTexture();var logo = 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 () {var self = this;cc.Node.prototype.onEnter.call(self);self.schedule(self._startLoading, 0.3);},onExit: function () {cc.Node.prototype.onExit.call(this);var tmpStr = "Loading… 0%";this._label.setString(tmpStr);},/** * init with resources * @param {Array} resources * @param {Function|String} cb */initWithResources: function (resources, cb) {if(typeof resources == "string") resources = [resources];this.resources = resources || [];this.cb = cb;},_startLoading: function () {var self = this;self.unschedule(self._startLoading);var res = 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 () {var self = this;var count = self._count;var length = self._length;var percent = (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, cb){var _cc = cc;if(!_cc.myLoading) {_cc.myLoading = new MyLoading();_cc.myLoading.init();}_cc.myLoading.initWithResources(resources, cb);cc.director.runScene(_cc.myLoading);return _cc.myLoading;};

只有流过血的手指才能弹出世间的绝唱。

东子的博客

相关文章:

你感兴趣的文章:

标签云: