文章撰寫日期︰2013/11/26 15:00
cocos2d-html5使用版本︰2.1.5
一、前言
玩家在第1次載入cocos2d-html5資源檔時，
不免要花上1分鐘以上的時間(視玩家當時頻寬而定)載入Cocos2d引擎的基本主資源檔。
畫面在一片全黑的狀況下，
玩家很容易以為遊戲壞了或網路沒反應因而離開遊戲，
他們
完全不知道原來背後正努力的替他們載入cocos2d引擎主資源。
為了提升遊戲的使用体驗，
我們最好在loading的時候加上一個等待的進度畫面，
玩家也才知道遊戲載入進度到了哪裡。
二、文章開始
Cocos2d-html官方提供了一個Scene名為LoaderScene，
能讓開發者快速的實作岀簡易的進度顯示畫面。
使用的方式不難，
只要將main.js裡的
cc.Loader.preload(ccb_resources, function () {
cc.Director.getInstance().runWithScene(new this.startScene());
}, this);
改成
cc.LoaderScene.preload(ccb_resources, function () {
cc.Director.getInstance().replaceScene(new this.startScene());
}, this);
就可以囉！
注意原本runWithScene()變成了replaceScene()。
 |
| 這就是LoaderScene |
附上整個main.js檔最後的內容︰
// Needed for HTML5
var cocos2dApp = cc.Application.extend({
config:document['ccConfig'],
ctor:function (scene) {
this._super();
this.startScene = scene;
cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
cc.initDebugSetting();
cc.setup(this.config['tag']);
cc.AppController.shareAppController().didFinishLaunchingWithOptions();
},
applicationDidFinishLaunching:function () {
// initialize director
var director = cc.Director.getInstance();
// enable High Resource Mode(2x, such as iphone4) and maintains low resource on other devices.
// director->enableRetinaDisplay(true);
// turn on display FPS
director.setDisplayStats(this.config['showFPS']);
// set FPS. the default value is 1.0/60 if you don't call this
director.setAnimationInterval(1.0 / this.config['frameRate']);
//load resources
cc.LoaderScene.preload(ccb_resources, function () {
cc.Director.getInstance().replaceScene(new this.startScene());
}, this);
return true;
}
});
var myApp = new cocos2dApp(CCBMainScene);
