利用青瓷布局自定义加载的场景,而不是自己改写qici-loading

加载界面如果全部通过自己手动布局不仅不美观,还很难控制。借用原生的场景切换加载效果,来实现我们游戏的加载效果。

 没有做加载修改的原来的加载顺序:

 
黑乎乎界面->(游戏定制的加载)你的第一个场景->(游戏定制加载)你的第二个场景->(游戏定制加载)你的第三个场景
 
一般思路
自己定义装载界面->(游戏定制的加载)你的第一个场景->(游戏定制加载)你的第二个场景->(游戏定制加载)你的第三个场景
 
我的思路:
屏蔽默认黑乎乎->(定制游戏加载画面)你的第一个场景留空->(定制游戏加载画面)你的第二个场景
 
一般小游戏就是加载玩,直接在里面玩耍,过程中其实不应该有游戏切换的情况
那么我就把所有游戏都放在第二个场景里面。第一个场景由于是空的,绝大部分资源也被黑乎乎界面加载了,
所以理论上第一个场景的加载界面是不会出现的。然后我们又通过屏蔽掉gameSVG关闭掉原来的显示
所以效果就是,白屏,和客户以为在打开,这个感觉重叠了,然后第一个场景是空的,
为我们加载基础脚本带来了方便。然后第一个场景绑定一个场景转跳,跳到第二个场景
这时候激活游戏的预加载机制,显示我们的loading画面。因为库已经加载进来了,
我们的加载就可以做适配界面等等基于库的操作。加载资源体验比较好。
最后加载完了可以在第二场景完成所有游戏的交互。大功告成
 
目前还是要动手修改loading函数里面加个屏蔽svg,为啥屏蔽,因为不屏蔽会有bug,为了省事,不看就好。呵呵
 
用来绑定UIRoot跳转的脚本。绑定在第一个空场景中
/**
 * by Again 2016-3-13 0.51.23
 * 加载这个节点后第一次刷新后转跳到指定节点
 */
var NextScene = qc.defineBehaviour('qc.demo.NextScene', qc.Behaviour, function() {
    // 初始化代码
    this.loaded = false;
}, {
    // 需要序列化的场景资源名称
    scene: qc.Serializer.STRING
});
NextScene.prototype.awake = function() {
    this.loaded = false;
};

// 加载下一场景唤醒
NextScene.prototype.update = function() {
    var self = this;
    if (self.loaded === false) {
        self.loaded = true;

        // 切换到指定场景
        if (self.scene) {
            self.game.scene.load(self.scene, false, function() {
                // 方式1:预加载中,我们可以做一些资源的加载操作
            }, function() {
                self.game.log.trace('loading new sence ok ({0})', self.scene);
            });
        }
    }
}
UIRoot绑定
用来显示加载状态的脚本,重载下方几个on事件更新你界面元素的状态。
/**
 * 场景加载的进度提示获取
 */
var LoadingUI = qc.defineBehaviour('qc.demo.LoadingUI', qc.Behaviour,
    function() {
        var self = this;
        this.clue = null;

        //默认显示
        this.onShow = function() {
            self.gameObject.visible = true;
            self.gameObject.alpha = 1;
        };
        //默认消失
        this.onHide = function() {
            self.gameObject.visible = false;
            self.gameObject.alpha = 0;
        };
        //默认加载中
        this.onLoading = function(loaded, total) {
            self.game.log.trace("loading :{0}/{1}",loaded,total);
        };
    }, {
    }
);

// 初始化处理
LoadingUI.prototype.awake = function() {
    // 关注场景开始切换和切换结束的事件
    var self = this;
    //设置响应事件
    this.addListener(self.game.scene.onStartLoad, function() {
        // 场景加载开始,显示本界面
        if (typeof(self.onShow) === "function") {
            self.onShow();
        };
    });
    this.addListener(self.game.scene.onEndLoad, function() {
        // 场景加载完毕,隐藏本界面
        if (typeof(self.onHide) === "function") {
            self.onHide();
        };
    });
}

// 帧调度,保证本界面永远在其他界面之上
LoadingUI.prototype.update = function() {
    var self = this,
        loaded = self.game.assets.loaded,
        total = self.game.assets.total;
    // 场景加中
    if (typeof(self.onLoading) === "function") {
        self.onLoading(loaded, total);
    };
};


/////////////////////////////////////////////////////////////////////
// 对外接口
LoadingUI.prototype.setOnShow = function(callback) {
    this.onShow = callback;
};

LoadingUI.prototype.setOnHide = function(callback) {
    this.onHide = callback;
};

LoadingUI.prototype.setOnLoading = function(callback) {
    this.onLoading = callback;
};
 
 
原文地址:https://www.cnblogs.com/Again/p/5271087.html