[cocos2d-html5篇]進度載入畫面(LoaderScene)的使用

文章撰寫日期︰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);