Change default qici loader(Only applicable to the latest version 1.1.0)

GeneralQC-Cindy Published the article • 0 comments • 625 views • 2016-04-15 16:12 • 来自相关话题

At present QICI engine provides three built-in start loading interfaces, they are eating beans, progress bar interface and static background figure interface, here in the following we will talk about each start loading interface implementation:

1、Eating beans loading interface, shown as below,





 
This interface is the default engine loading interface, we only need to set the value of qici.config.loadingHandler to be "svgHandler" in the HTML file,shown as the red arrow marks below,






2、Using the progress bar loading interface,shown as below,





 
As the same we set the value of qici.config.loadingHandler to be “progressHandler” in Html file.

3、Using the static background figure loading interface,shown as below,





As the same we also just need to set the value of qici.config.loadingHandler,for the background we can set the backgroundStyle to be CSS type string in the qici.config.loading, such as below,
loadingHandler: 'backgroundHandler',
loading:{
backgroundStyle: "background-image:url(../../build/imgs/qici.png);background-size:100% 100%",
}Also we can customize our favorite start loading interface, in the below we will talk the circular progress bar as an example. The graph results as below,





 
The steps are as follows:
1, create a js file, the file name can be testLoading. Js, implement a class in the file, the name of the class can be called circleHandler, and this class must implement the following three methods:
A.void start (totalAssetCount) : when begin loading, the method will be called and the parameter is the total number of resources.
B. void progress (curCount) : resource loading progress notices, the parameter is the number of loaded resource.
C. void finish () : all resources to be loaded, the method will be called.
 
2, make the circleHandler class instantiation, then assigned to qici. LoadingHandler variables, as follows: qici. LoadingHandler = new circleHandler ();
The code is as below:
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());

//定义一个类
var circleHandler = function(){
this.tickState = 'normal';
};
circleHandler.prototype = {};
circleHandler.prototype.constructor = circleHandler;

//开始加载
circleHandler.prototype.start = function(totalAssetCount){
this.totalCount = totalAssetCount;
};

//加载进度
circleHandler.prototype.progress = function(curCount){

var percent = Math.floor(curCount / this.totalCount * 100);
var circle = document.getElementById('circle');
var imgLeft = -(percent*44+(percent*10))+'px'
circle.style.backgroundPosition = imgLeft+'\t' + '0px';
circle.innerHTML = percent+'%';
};

//资源加载完成
circleHandler.prototype.finish = function(){
this.tickState = 'fadeout';
this.startFadingOutTime = new Date().getTime();
};

circleHandler.prototype._tick = function() {

var self = qici.loadingHandler;
if (self.tickState === 'done')
return;

requestAnimationFrame(self._tick);
if (self.tickState === 'normal')
return;


var time = new Date().getTime();
var delta = time - self.startFadingOutTime;

var rate = delta / 500;
if (rate > 1) {
// 移除进度条
self.tickState = 'done';
var circle = document.getElementById('circle');
circle.parentNode.removeChild(circle);
}
else {
document.getElementById('circle').style.opacity = 1 - rate;
}
}
if (qici.config.loadingHandler === 'circleHandler')
document.write('<div id="circle" style="width:44px;margin:-22px 0px 0px -22px;position:absolute;left:50%;top:50%;height:44px;line-height:44px;text-align:center;z-index:10000;background: url(images/circle.png);"></div>');


if (qici.config.loadingHandler === 'circleHandler'){

//实例化circleHandler类
qici.loadingHandler = new circleHandler();
qici.loadingHandler._tick();
}1、When starting the html file, modify the qici.config.loadingHandler  to be custom  circleHandler,as below:
qici.config.loadingHandler = ‘circleHandler’;
2、When starting the html file, after loadedqc-loading.js,dispose the js file, shown as below, 
<body onload="qici.init();">
<div style="overflow:hidden;padding:0;margin:0;width:100%;height:100%;">
<div id="gameDiv" style="position:relative;"></div>
</div>
<script src='./lib/qc-loading.js'></script>
<script src="./testLoading.js"></script>
</body>
 
  查看全部
At present QICI engine provides three built-in start loading interfaces, they are eating beans, progress bar interface and static background figure interface, here in the following we will talk about each start loading interface implementation:

1、Eating beans loading interface, shown as below,

1.gif

 
This interface is the default engine loading interface, we only need to set the value of qici.config.loadingHandler to be "svgHandler" in the HTML file,shown as the red arrow marks below,

图片1.png


2、Using the progress bar loading interface,shown as below,

2.gif

 
As the same we set the value of qici.config.loadingHandler to be “progressHandler” in Html file.

3、Using the static background figure loading interface,shown as below,

3.gif

As the same we also just need to set the value of qici.config.loadingHandler,for the background we can set the backgroundStyle to be CSS type string in the qici.config.loading, such as below,
loadingHandler: 'backgroundHandler',
loading:{
backgroundStyle: "background-image:url(../../build/imgs/qici.png);background-size:100% 100%",
}
Also we can customize our favorite start loading interface, in the below we will talk the circular progress bar as an example. The graph results as below,

4.gif

 
The steps are as follows:
1, create a js file, the file name can be testLoading. Js, implement a class in the file, the name of the class can be called circleHandler, and this class must implement the following three methods:
A.void start (totalAssetCount) : when begin loading, the method will be called and the parameter is the total number of resources.
B. void progress (curCount) : resource loading progress notices, the parameter is the number of loaded resource.
C. void finish () : all resources to be loaded, the method will be called.
 
2, make the circleHandler class instantiation, then assigned to qici. LoadingHandler variables, as follows: qici. LoadingHandler = new circleHandler ();
The code is as below:
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());

//定义一个类
var circleHandler = function(){
this.tickState = 'normal';
};
circleHandler.prototype = {};
circleHandler.prototype.constructor = circleHandler;

//开始加载
circleHandler.prototype.start = function(totalAssetCount){
this.totalCount = totalAssetCount;
};

//加载进度
circleHandler.prototype.progress = function(curCount){

var percent = Math.floor(curCount / this.totalCount * 100);
var circle = document.getElementById('circle');
var imgLeft = -(percent*44+(percent*10))+'px'
circle.style.backgroundPosition = imgLeft+'\t' + '0px';
circle.innerHTML = percent+'%';
};

//资源加载完成
circleHandler.prototype.finish = function(){
this.tickState = 'fadeout';
this.startFadingOutTime = new Date().getTime();
};

circleHandler.prototype._tick = function() {

var self = qici.loadingHandler;
if (self.tickState === 'done')
return;

requestAnimationFrame(self._tick);
if (self.tickState === 'normal')
return;


var time = new Date().getTime();
var delta = time - self.startFadingOutTime;

var rate = delta / 500;
if (rate > 1) {
// 移除进度条
self.tickState = 'done';
var circle = document.getElementById('circle');
circle.parentNode.removeChild(circle);
}
else {
document.getElementById('circle').style.opacity = 1 - rate;
}
}
if (qici.config.loadingHandler === 'circleHandler')
document.write('<div id="circle" style="width:44px;margin:-22px 0px 0px -22px;position:absolute;left:50%;top:50%;height:44px;line-height:44px;text-align:center;z-index:10000;background: url(images/circle.png);"></div>');


if (qici.config.loadingHandler === 'circleHandler'){

//实例化circleHandler类
qici.loadingHandler = new circleHandler();
qici.loadingHandler._tick();
}
1、When starting the html file, modify the qici.config.loadingHandler  to be custom  circleHandler,as below:
qici.config.loadingHandler = ‘circleHandler’;
2、When starting the html file, after loadedqc-loading.js,dispose the js file, shown as below, 
<body onload="qici.init();">
<div style="overflow:hidden;padding:0;margin:0;width:100%;height:100%;">
<div id="gameDiv" style="position:relative;"></div>
</div>
<script src='./lib/qc-loading.js'></script>
<script src="./testLoading.js"></script>
</body>

 
 

Is there any way to set z-index or depth value for a node ?

Generallijh Replyed • 2 person concerned • 1 replies • 574 views • 2016-04-11 11:16 • 来自相关话题

Proper way to handle values with nodes and behaviours

Generallijh Replyed • 2 person concerned • 1 replies • 514 views • 2016-04-05 14:26 • 来自相关话题

What are all the Built-in Behaviour methods?

Generallijh Replyed • 2 person concerned • 1 replies • 602 views • 2016-04-05 11:30 • 来自相关话题

Click/Touch outside of node

Generaljustinboyd5 Replyed • 2 person concerned • 5 replies • 612 views • 2016-04-01 00:13 • 来自相关话题

What is the best way to have something like edge collider?

Generalerdiizgi Replyed • 2 person concerned • 2 replies • 594 views • 2016-03-30 02:38 • 来自相关话题

Finite state machine

Generaleric Replyed • 2 person concerned • 1 replies • 564 views • 2016-03-19 00:06 • 来自相关话题

Isometric

Generaleric Replyed • 2 person concerned • 1 replies • 813 views • 2016-03-16 21:06 • 来自相关话题

Prevent Click event through nodes

Generaljustinboyd5 Replyed • 2 person concerned • 5 replies • 597 views • 2016-03-15 00:20 • 来自相关话题

Why does rotated text look bad?

Generaleric Replyed • 2 person concerned • 1 replies • 565 views • 2016-03-09 11:45 • 来自相关话题