一. 修改引擎的Loading界面之使用进度条显示
1. 双击打开引擎包中的lib/qc-loading-debug.js，如下图所示：
2. 只需要修改qici.init函数即可改变loading界面。
2.1 修改qici.init函数中的loadScript函数，该函数主要完成脚本加载功能，修改后的代码如下：
1 // 加载脚本文件，其中qici.scripts.length为总的脚本长度
2 function loadScript() {
3
4 var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
5
6 //所有的脚本已加载
7 if (qici.loadIndex === qici.scripts.length ) {
8
9 qici.loadGame();
10
11 return;
12 }
13
14 //加载资源
15 else if (qici.loadIndex > qici.scripts.length && qici.loadIndex < totalCount)
16
17 return;
18 else if (qici.loadIndex >= totalCount)
19 {
20
21 qici.allAssetLoaded = true;
22 return;
23 }
24
25 var src = qici.scripts[qici.loadIndex];
26
27 //创建script标签
28 var js = document.createElement('script');
29
30
31 js.onerror = function() {
32 console.log('Failed to load:', src);
33 qici.loadIndex++;
34 updateStep();
35 loadScript();
36 };
37
38 //脚本成功加载后的回调
39 js.onload = function () {
40 qici.loadIndex++;
41 updateStep();
42 loadScript();
43 };
44
45 //设置属性并添加
46 js.setAttribute('type', 'text/javascript');
47 if (typeof src === 'string') {
48 js.setAttribute('src', src);
49 }
50 else {
51 js.setAttribute('src', src[0]);
52 js.setAttribute('plugin_id', src[1]);
53 }
54 document.getElementsByTagName('head')[0].appendChild(js);
55 } View Code
2.2 修改qici.init函数中的updateStep函数，该函数的功能是当脚本成功加载后将更新进度条的百分比，修改后的代码如下：
1 //脚本成功加载后调用函数
2 function updateStep(){
3
4 var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
5 var percent = Math.floor(qici.loadIndex / totalCount * 100);
6
7 if(percent >= 100){
8
9 //加载成功后调用的函数
10 fading();
11 }
12
13 //进度条的宽度百分比
14 demo.style.width = percent + '%';
15
16 //用于显示进度条宽度的百分比
17 demo.innerHTML = percent + '%';
18
19 } View Code
2.3 修改qici.init函数中的fading函数，该函数的功能是成功加载完成后，将loading界面的进度条移除，此时显示game界面，修改后的代码如下：
1 function fading() {
2
3 var game = window[qici.config.gameInstance];
4 loadState = 'done';
5
6 //移除loading界面的进度条
7 demo.parentNode.removeChild(demo);
8
9 //显示game界面
10 document.getElementById('gameDiv').style.display = 'block';
11 delete game.state.loadingAnimation;
12 if (game.state.delayCreateCallback) {
13 game.state.delayCreateCallback();
14 }
15 if (!game.phaser.world)
16 return;
17
18 if (game.adjustGameSize) {
19 game.adjustGameSize(true);
20 }
21 else {
22 game.updateScale(true);
23 }
24 } View Code
2.4 修改qici.init函数中的tick函数，tick函数中的requestAnimationFrame函数功能请百度，修改后的代码如下：
1 function tick() {
2
3 //成功加载完成后就不执行requestAnimationFrame函数
4 if (loadState === 'done') {
5 return;
6 }
7 requestAnimationFrame(tick);
8 if (qici.hasAssetLoaded)
9 {
10 qici.hasAssetLoaded = false;
11 loadScript();
12 updateStep();
13 }
14 } View Code
2.5 添加自己所喜欢的loading界面，本范例使用进度条显示loading界面，代码如下：
1 document.write('<div style="height=20px;80%;position:absolute;top:50%;left:10%;z-index:10000;background:#cccccc;">
2 <div id="demo"style="opacity:0;0px;height:18px;background:red;color:black;">0%</div></div>'); View Code
3. 以下是qici.init完整函数，如下所示：
1 //进入loading界面
2 qici.init = function() {
3
4 var loadState = null;
5
6 //通过id获取元素用于显示loading界面
7 var demo = document.getElementById("demo");
8
9 // 此时将游戏界面不显示
10 document.getElementById('gameDiv').style.display = 'none';
11
12 // 加载脚本文件，其中qici.scripts.length为总的脚本长度
13 function loadScript() {
14
15 var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
16 if (qici.loadIndex === qici.scripts.length ) {
17
18 qici.loadGame();
19
20 return;
21 }
22 else if (qici.loadIndex > qici.scripts.length && qici.loadIndex < totalCount)
23
24 return;
25 else if (qici.loadIndex >= totalCount)
26 {
27
28 qici.allAssetLoaded = true;
29 return;
30 }
31
32 var src = qici.scripts[qici.loadIndex];
33 var js = document.createElement('script');
34
35
36 js.onerror = function() {
37 console.log('Failed to load:', src);
38 qici.loadIndex++;
39 updateStep();
40 loadScript();
41 };
42
43 //脚本成功加载后的回调
44 js.onload = function () {
45 qici.loadIndex++;
46 updateStep();
47 loadScript();
48 };
49 js.setAttribute('type', 'text/javascript');
50 if (typeof src === 'string') {
51 js.setAttribute('src', src);
52 }
53 else {
54 js.setAttribute('src', src[0]);
55 js.setAttribute('plugin_id', src[1]);
56 }
57 document.getElementsByTagName('head')[0].appendChild(js);
58 }
59
60 //脚本成功加载后调用函数
61 function updateStep(){
62
63 var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
64 var percent = Math.floor(qici.loadIndex / totalCount * 100);
65 if(percent >= 100){
66
67 //加载成功后调用的函数
68 fading();
69 }
70
71 //进度条的宽度百分比
72 demo.style.width = percent + '%';
73
74 //用于显示进度条宽度的百分比
75 demo.innerHTML = percent + '%';
76
77 }
78 function fading() {
79
80 var game = window[qici.config.gameInstance];
81 loadState = 'done';
82
83 //移除Loading界面的进度条
84 demo.parentNode.removeChild(demo);
85
86 // 显示game界面
87 document.getElementById('gameDiv').style.display = 'block';
88 delete game.state.loadingAnimation;
89 if (game.state.delayCreateCallback) {
90 game.state.delayCreateCallback();
91 }
92 if (!game.phaser.world)
93 return;
94
95 if (game.adjustGameSize) {
96 game.adjustGameSize(true);
97 }
98 else {
99 game.updateScale(true);
100 }
101 }
102
103 function tick() {
104
105 //成功加载完成后就不执行requestAnimationFrame函数
106 if (loadState === 'done') {
107 return;
108 }
109 requestAnimationFrame(tick);
110 if (qici.hasAssetLoaded)
111 {
112 qici.hasAssetLoaded = false;
113 loadScript();
114 updateStep();
115 }
116 }
117
118 demo.style.opacity = '1';
119 tick();
120 loadScript();
121 updateStep();
122 }; View Code
4. 运行时，效果图如下：
二、修改引擎Loading界面之使用gif动画
方法与前面所述的基本类似，需要说明的是部分代码需要作修改，需要修改的代码如下所示：
1 //update width
2 function updateStep(){
3 var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
4 var percent = qici.loadIndex / totalCount * 100;
5 if(percent >= 100){
6 fading();
7 }
8 } View Code
loading界面显示代码如下：
1 document.write('
2 <div style="height=200px;200px;position:absolute;top:20%;left:20%;z-index:10000;background:#cccccc;">
3 <img id="demo" src="http://cdn.uehtml.com/201402/1 ... gt%3B
4 </div>'); View Code
运行时，效果图如下：
相关阅读
开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了！