Html5遊戲之KiwiJs（4）-資源載入進度，html5kiwijs
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>
看看出來的效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
