Html5游戏之KiwiJs（4）-资源加载进度

浏览数：25 / 时间：2015年06月09日

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>

看看出来的效果

技术分享