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>
看看出来的效果
要想捉大鱼，不能怕水深。要想摘玫瑰，就得不怕刺。
