Cocos2d-js 新版本，如何实现自定义Loading界面

Cocos2d-x JavaScript
#1

如题。官方文档找了下，没找到对应内容，麻烦知道的朋友，告知。谢谢。

#2

我直接搜索cocos2d-html.js里面的“加载中”然后修改文字。。。

#3

3.0版本的，找到CCLoaderScene.js，直接拷贝一份，改成自己想要的即可
如下：

var MyLoaderScene = cc.Scene.extend({
    _interval : null,
    _length : 0,
    _count : 0,
    _label : null,
    _className:"MyLoaderScene",
    init : function(){
        var self = this;

        //logo
        var logoWidth = 160;
        var logoHeight = 200;

        // bg
        var 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.js
        var fontSize = 24, lblHeight =  -logoHeight / 2 + 100;
//        if(cc.local_loaderImage){
//            //loading logo
//            cc.loader.loadImg(cc.local_loaderImage, {isCrossOrigin : false }, function(err, img){
//                logoWidth = img.width;
//                logoHeight = img.height;
//                self._initStage(img, cc.visibleRect.center);
//            });
//            fontSize = 14;
//            lblHeight = -logoHeight / 2 - 10;
//        }
        //loading percent
        var 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);
        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 = ;
        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 + "%");
        if(count >= length) self.unschedule(self._updatePercent);
    }
});
MyLoaderScene.preload = function(resources, cb){
    var _myLoaderScene = null;
    if(!_myLoaderScene) {
        _myLoaderScene = new MyLoaderScene();
        _myLoaderScene.init();
    }
    _myLoaderScene.initWithResources(resources, cb);

    cc.director.runScene(_myLoaderScene);
    return _myLoaderScene;
};
```


然后调用的时候，用自己写的替换掉之前的
如用

MyLoaderScene.preload(g_resources, function () {
     // todo something
}


```



替换

cc.LoaderScene.preload(g_resources, function () {
      // todo something
}


```
#4

好的～，谢谢

#5

_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 + “%”);
if(count >= length) self.unschedule(self._updatePercent);
}

这里的count和length 总是一样的 每次直走一边 从0到100没有过度呢

#6

帮忙看看 我这出现的问题 谢啦

#7

很抱歉，有一段时间没上来了。您的问题解决了么

#8

没有解决 但是资源加载正常 只不过加载的百分比一直都是0直接到100% 没有过度 到100后等一会 才进去