如何自定义 Cocos2d-html5 Loading 界面

这里有个LoaderScene，然后后面有g_resources参数，这个g_resources就是resource.js文件里面那个数组名，就可以肯定加载的界面就在这里出现了。

既然这是一个方法，就一定有一个类，果然如此，在cocos2d根目录下有个CCLoader.js文件
提取了一下核心代码如下

[javascript] view plaincopy
cc.LoaderScene = cc.Scene.extend(/** @lends cc.LoaderScene# */{
_logo: null,
_logoTexture: null,
_texture2d: null,
_bgLayer: null,
_label: null,
_winSize:null,

/**
* Constructor
*/
ctor: function () {
this._super();
this._winSize = cc.Director.getInstance().getWinSize();
},
init:function(){
cc.Scene.prototype.init.call(this);

//logo
var logoHeight = 200;
var centerPos = cc.p(this._winSize.width / 2, this._winSize.height / 2);

this._logoTexture = new Image();
var _this = this;
this._logoTexture.addEventListener("load", function () {
_this._initStage(centerPos);
});
this._logoTexture.src = "data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sA......(太多了，我直接删了)";
this._logoTexture.width = 160;
this._logoTexture.height = 200;

// bg
this._bgLayer = cc.LayerColor.create(cc.c4(32, 32, 32, 255));
this._bgLayer.setPosition(cc.p(0, 0));
this.addChild(this._bgLayer, 0);

//loading percent
this._label = cc.LabelTTF.create("Loading... 0%", "Arial", 14);
this._label.setColor(cc.c3(180, 180, 180));
this._label.setOpacity(0);
this._label.setPosition(cc.pAdd(centerPos, cc.p(0, -logoHeight / 2 - 10)));
this._bgLayer.addChild(this._label, 10);
},

自定义Cocos2d-html 5 Loading界面代码:

// 这里定义了 Logo 图片的 Base64 编码，至于为什么，后面将会说明，这里的编码内容挺多，固做简写
logoData = "data:image/png;base64,...";

Loading = cc.Scene.extend(
_logo: null,
_logoTexture: null,
_texture2d: null,
_bgLayer: null,
_label: null,
_winSize:null,
_processLayer: null, // 相比 LoaderScene 的实现，添加了两个属性，标示进度条层和进度条长度
_processLayerLength: null,

// 构造函数
ctor: function () {
this._super();
this._winSize = cc.Director.getInstance().getWinSize();
},
init:function(){
cc.Scene.prototype.init.call(this);

// logo 图片和 label 的添加 .. 这里省略，于 LoaderScene 同样

// 设置进度条层，它就是一个红色颜色层，通过长度来标示加载的进度
this._processLayerLength = 500;
this._processLayer = cc.LayerColor.create(cc.c4b(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);
},
// 以下方法的实现并没有跟 LoaderScene 有什么不同
// _initStage: ...
// onEnter ...
// onExit ...
// initWithResources ...
// _startLoading ...
// _logoFadeIn
// 每帧更新
_updatePercent: function () {
var percent = cc.Loader.getInstance().getPercentage();
var tmpStr = "Loading... " + percent + "%";
this._label.setString(tmpStr);

// 设置当前进度条层的长度
this._processLayer.changeWidth(this._processLayerLength * percent / 100);

if (percent >= 100)
this.unschedule(this._updatePercent);
}
});
// 这里于 LoaderScene 的实现同样
Loading.preload = function (resources, selector, target) {
if (!this._instance) {
// 创建一个 Loading
this._instance = new Loading();
this._instance.init();
}
// ...
return this._instance;
};