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

时间:2023-11-25 15:06:44

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

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

黑乎乎界面->(游戏定制的加载)你的第一个场景->(游戏定制加载)你的第二个场景->(游戏定制加载)你的第三个场景
一般思路
自己定义装载界面->(游戏定制的加载)你的第一个场景->(游戏定制加载)你的第二个场景->(游戏定制加载)你的第三个场景
我的思路:
屏蔽默认黑乎乎->(定制游戏加载画面)你的第一个场景留空->(定制游戏加载画面)你的第二个场景
一般小游戏就是加载玩,直接在里面玩耍,过程中其实不应该有游戏切换的情况
那么我就把所有游戏都放在第二个场景里面。第一个场景由于是空的,绝大部分资源也被黑乎乎界面加载了,
所以理论上第一个场景的加载界面是不会出现的。然后我们又通过屏蔽掉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;
};