青瓷引擎使用心得——修改引擎的loading界面

一. 修改引擎的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

運作時，效果圖如下：