Kiwi.js中资源的加载是在Kiwi.State.preload方法中进行的，而关于加载进度State中有另外一个方法loadProgress来实现，所以要实现进度百分比显示，只需要重写loadProgress方法即可。
下面是Kiwi.js的loadProgress的API说明
重写loadProgress方法
loading.loadProgress = function(percent, bytesLoaded, file){
Kiwi.State.prototype.loadProgress(percent, bytesLoaded, file);
this.loadingPercentText.text = "loading..." + percent.toFixed(1) + "%";
//console.log("loading..."+percent.toFixed(1)+"%");
};这里的loadingPercentText是一个文本，需要在preload方法中创建并添加到场景。
下面是完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Kiwi.js - 加载进度</title>
<script src="assets/kiwi.js"></script>
<script type="text/javascript">
var game = new Kiwi.Game();
var loading = new Kiwi.State("LoadingState");
loading.preload = function () {
Kiwi.State.prototype.preload.call(this);
this.loadingPercentText = new Kiwi.HUD.Widget.TextField(game, "loading...", game.width/2, game.height/2);
this.game.huds.defaultHUD.addWidget(this.loadingPercentText);
this.addImage("pic1", "assets/pics/pic (1).jpg");
this.addImage("pic1", "assets/pics/pic (2).jpg");
this.addImage("pic1", "assets/pics/pic (3).jpg");
this.addImage("pic1", "assets/pics/pic (4).jpg");
this.addImage("pic1", "assets/pics/pic (5).jpg");
this.addImage("pic1", "assets/pics/pic (6).jpg");
this.addImage("pic1", "assets/pics/pic (7).jpg");
this.addImage("pic1", "assets/pics/pic (8).jpg");
this.addImage("pic1", "assets/pics/pic (9).jpg");
this.addImage("pic1", "assets/pics/pic (10).jpg");
this.addImage("pic1", "assets/pics/pic (11).jpg");
this.addImage("pic1", "assets/pics/pic (12).jpg");
this.addImage("pic1", "assets/pics/pic (13).jpg");
this.addImage("pic1", "assets/pics/pic (14).jpg");
this.addImage("pic1", "assets/pics/pic (15).jpg");
this.addImage("pic1", "assets/pics/pic (16).jpg");
this.addImage("pic1", "assets/pics/pic (17).jpg");
this.addImage("pic1", "assets/pics/pic (18).jpg");
this.addImage("pic1", "assets/pics/pic (19).jpg");
this.addImage("pic1", "assets/pics/pic (20).jpg");
this.addImage("pic1", "assets/pics/pic (21).jpg");
this.addImage("pic1", "assets/pics/pic (22).jpg");
this.addImage("pic1", "assets/pics/pic (23).jpg");
this.addImage("pic1", "assets/pics/pic (24).jpg");
this.addImage("pic1", "assets/pics/pic (25).jpg");
this.addImage("pic1", "assets/pics/pic (26).jpg");
this.addImage("pic1", "assets/pics/pic (27).jpg");
this.addImage("pic1", "assets/pics/pic (28).jpg");
this.addImage("pic1", "assets/pics/pic (29).jpg");
this.addImage("pic1", "assets/pics/pic (30).jpg");
this.addImage("pic1", "assets/pics/pic (31).jpg");
this.addImage("pic1", "assets/pics/pic (32).jpg");
this.addImage("pic1", "assets/pics/pic (33).jpg");
this.addImage("pic1", "assets/pics/pic (34).jpg");
};
loading.loadProgress = function(percent, bytesLoaded, file){
Kiwi.State.prototype.loadProgress(percent, bytesLoaded, file);
this.loadingPercentText.text = "loading..." + percent.toFixed(1) + "%";
//console.log("loading..."+percent.toFixed(1)+"%");
};
loading.create = function(){
Kiwi.State.prototype.create.call(this);
this.bgImage = new Kiwi.GameObjects.StaticImage(this, this.textures.pic1, 1024, 768);
this.bgImage.x = 0;
this.bgImage.y = 0;
this.addChild(this.bgImage);
};
game.states.addState(loading);
game.states.switchState("LoadingState");
</script>
</head>
<body>
</body>
</html>
看看出来的效果
原文：http://blog.csdn.net/dyyaries/article/details/44522597
