cocos2d-js进度条

当我们进入一个游戏的时候首先要考虑到他的加载界面问题。

首先我们进入cc.LoaderScene中查看代码

如果用默认的方式的话并不是一个进度条、而是一个Label

源码：

 //loading percentvar label = self._label = new cc.LabelTTF("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);return true;

更新百分比的地方是：

<pre name="code" class="java">_startLoading: function () {        var self = this;        self.unschedule(self._startLoading);        var res = self.resources;        cc.loader.load(res,            function (result, count, loadedCount) {                var percent = (loadedCount / count * 100) | 0;                percent = Math.min(percent, 100);                self._label.setString("Loading... " + percent + "%");            }, function () {                if (self.cb)                    self.cb.call(self.target);            });    }

所以当我们要把Label改成一个进度条的 时候就应该把创建Label改成创建进度条

创建进度条有两种情况： 一种是Layer

代码：

this._processLayer = cc.LayerColor.create(cc.color(255, 100, 100, 128), 1, 30);this._processLayer.setPosition(cc.pAdd(centerPos, cc.p(- this._processLayerLength / 2, -logoHeight / 2 - 50)));// this._processLayer.ignoreAnchorPointForPosition(false);// this._processLayer.setAnchorPoint(cc.p(0, 0));this._bgLayer.addChild(this._processLayer);
然后在_startLoading中修改更新方法：

_startLoading: function () {        var self = this;        self.unschedule(self._startLoading);        var res = self.resources;        cc.loader.load(res,            function (result, count, loadedCount) {                var percent = (loadedCount / count * 100) | 0;                percent = Math.min(percent, 100);               // self._label.setString("Loading... " + percent + "%");               //修改成                this._processLayer && this._processLayer.changeWidth(percent);            }, function () {                if (self.cb)                    self.cb.call(self.target);            });    }}

另外一种是用ccui.LoadingBar()创建一个进度条来实现：

var loadingBar  = new ccui.LoadingBar();loadingBar.setName("LoadingBar");loadingBar.loadTexture(res.loadingbar);loadingBar.setPercent(0);loadingBar.setPosition(cc.pAdd(cc.visibleRect.center, cc.p(0, lblHeight)));bgLayer.addChild(loadingBar, 10);this._loadingbar = loadingBar;

在_startLoading中修改代码：

this._loadingBar && this._loadingBar.setPercent(this._count);