cocos2d-js進度條

當我們進入一個遊戲的時候首先要考慮到他的加載界面問題。

首先我們進入cc.LoaderScene中檢視代碼

如果用預設的方式的話并不是一個進度條、而是一個Label

源碼：

//loading percent
var 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);