Change default qici loader

Hello, Is there any demo how to change default qici loader? which is located engine.zuoyouxi.com/lib/1.0.6/qc-loading.js 
Has invited:

QC-Cindy

Favor from:

Change default QICI loading
一、Use a progress bar display to change default QICI loading
1、Double click to open the file lib/qc-loading-debug.js from the engine package zip,shown as below:

图片1.png

2、Only need to change qici.init function then to change default QICI loading.
2.1、Modify the loadScript function in qici.init,the function mainly finish loading the script,the code changed is as below:
 // load the script file, the script length of qici.scripts.length is 
function loadScript() {

var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;

// all scripts are loaded
if (qici.loadIndex === qici.scripts.length ) {

qici.loadGame();

return;
}

// loading resources
else if (qici.loadIndex > qici.scripts.length && qici.loadIndex < totalCount)

return;
else if (qici.loadIndex >= totalCount)
{

qici.allAssetLoaded = true;
return;
}

var src = qici.scripts[qici.loadIndex];

// create script label
var js = document.createElement('script');


js.onerror = function() {
console.log('Failed to load:', src);
qici.loadIndex++;
updateStep();
loadScript();
};

// the callback after scripts finish loaded
js.onload = function () {
qici.loadIndex++;
updateStep();
loadScript();
};

// set properties and add
js.setAttribute('type', 'text/javascript');
if (typeof src === 'string') {
js.setAttribute('src', src);
}
else {
js.setAttribute('src', src[0]);
js.setAttribute('plugin_id', src[1]);
}
document.getElementsByTagName('head')[0].appendChild(js);
}
2.2、Modify the updateStep function in qici.init,the function is to update the progress bar percentage when the script successfully loaded, the code is changed as below:
// the script successfully loaded the calling function
function updateStep(){

var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
var percent = Math.floor(qici.loadIndex / totalCount * 100);

if(percent >= 100){

// the script successfully loaded the calling function
fading();
}

// the percentage of the progress bar width
demo.style.width = percent + '%';

// used to display the percentage of progress bar width
demo.innerHTML = percent + '%';

}
2.3、Modify the fading function in qici.init,the function is to remove the progress bar from loading interface and to display the game interface after successfully loaded, the code is changed as below:
function fading() {

var game = window[qici.config.gameInstance];
loadState = 'done';

// remove the progress bar from loading interface
demo.parentNode.removeChild(demo);

// display the game interface
document.getElementById('gameDiv').style.display = 'block';
delete game.state.loadingAnimation;
if (game.state.delayCreateCallback) {
game.state.delayCreateCallback();
}
if (!game.phaser.world)
return;

if (game.adjustGameSize) {
game.adjustGameSize(true);
}
else {
game.updateScale(true);
}
}
2.4、Modify the tick function in qici.init,for the requestAnimationFrame function in tick you should learn by yourself,the code is changed as below:
function tick() {

// not perform requestAnimationFrame function after successfully loaded
if (loadState === 'done') {
return;
}
requestAnimationFrame(tick);
if (qici.hasAssetLoaded)
{
qici.hasAssetLoaded = false;
loadScript();
updateStep();
}
}
2.5、Add your favorite loading interface, in this example we use progress bar to show the loading interface, code is shown as below:
document.write('<div  style="height=20px;width:80%;position:absolute;top:50%;left:10%;z-index:10000;background:#cccccc;">\
<div id="demo"style="opacity:0;width:0px;height:18px;background:red;color:black;">0%</div></div>');
3、Here as below is the complete function of qici.init:
// enter loading interface
qici.init = function() {

var loadState = null;

// get element to display loading interface by id
var demo = document.getElementById("demo");

// at the time the game interface is not shown
document.getElementById('gameDiv').style.display = 'none';

// loading script file, and qici.scripts.length is the length of all scripts
function loadScript() {

var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
if (qici.loadIndex === qici.scripts.length ) {

qici.loadGame();

return;
}
else if (qici.loadIndex > qici.scripts.length && qici.loadIndex < totalCount)

return;
else if (qici.loadIndex >= totalCount)
{

qici.allAssetLoaded = true;
return;
}

var src = qici.scripts[qici.loadIndex];
var js = document.createElement('script');


js.onerror = function() {
console.log('Failed to load:', src);
qici.loadIndex++;
updateStep();
loadScript();
};

// the callback after scripts finish loaded
js.onload = function () {
qici.loadIndex++;
updateStep();
loadScript();
};
js.setAttribute('type', 'text/javascript');
if (typeof src === 'string') {
js.setAttribute('src', src);
}
else {
js.setAttribute('src', src[0]);
js.setAttribute('plugin_id', src[1]);
}
document.getElementsByTagName('head')[0].appendChild(js);
}

// the script successfully loaded the calling function
function updateStep(){

var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
var percent = Math.floor(qici.loadIndex / totalCount * 100);
if(percent >= 100){

//the script successfully loaded the calling function
fading();
}

// the percentage of the progress bar width
demo.style.width = percent + '%';

// used to display the percentage of progress bar width
demo.innerHTML = percent + '%';

}
function fading() {

var game = window[qici.config.gameInstance];
loadState = 'done';

// remove the progress bar from loading interface
demo.parentNode.removeChild(demo);

// display the game interface
document.getElementById('gameDiv').style.display = 'block';
delete game.state.loadingAnimation;
if (game.state.delayCreateCallback) {
game.state.delayCreateCallback();
}
if (!game.phaser.world)
return;

if (game.adjustGameSize) {
game.adjustGameSize(true);
}
else {
game.updateScale(true);
}
}

function tick() {

// not perform requestAnimationFrame function after successfully loaded if (loadState === 'done') {
return;
}
requestAnimationFrame(tick);
if (qici.hasAssetLoaded)
{
qici.hasAssetLoaded = false;
loadScript();
updateStep();
}
}

demo.style.opacity = '1';
tick();
loadScript();
updateStep();
};
4.Runtime, rendering as below:

loading1.gif

 
二、Use gif animation to change default QICI loading
The way is similar as described above, but need to modify some parts of the codes, the codes needed to be changed are as below:
//update width
function updateStep(){
var totalCount = qici.scripts.length + qici.loadingAssetCount || 0;
var percent = qici.loadIndex / totalCount * 100;
if(percent >= 100){
fading();
}
}
Loading interface show the codes as below:
document.write('\
<div style="height=200px;width:200px;position:absolute;top:20%;left:20%;z-index:10000;background:#cccccc;">\
<img id="demo" src="http://cdn.uehtml.com/201402/1 ... gt%3B\
</div>');
Runtime, rendering as below:

loading2.gif

 
 

george828

Favor from:

Hello I did everything but when game is loaded it shows just a background color of the game.

QC-Cindy

Favor from:

Hello, for your problem can you please send your project to our email support@qiciengine.com, then we can help you find out the problem and the method to solve it in a better way. 
 
Waiting for your email.

jagajaga

Favor from:

where is qici.init?
Why you cant write more details? Why some operation like this must be so hard and unuseful?
 

jagajaga

Favor from:

Any way, why your Preload Prefab from documents dosn't change default loading progress bar?

To reply to a question, please Login or registered