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

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>

看看出来的效果

时间： 2024-12-30 18:41:50

Html5游戏之KiwiJs（4）-资源加载进度的相关文章

prelaod场景，用来显示资源加载进度

phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas的元素,然后实例化一个 Game 对象就可以了. 复制代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>game</title> <

刚入前端整合的一个手机端页面适配+预加载+获取资源加载进度等的一个小模板

刚入前端不久,之前主要学的是pc端的布局,到公司之后负责的主要是移动段页面,刚开始时为了使页面适应移动端不同的屏幕大小采用的是百分比加媒体查询的方式,做完一个项目之后,感觉非常不好,虽然最后也基本使页面做到了适配.所以做完这个项目之后,我就在网上查找各种屏幕适配的方案,最终找到了一个通过js控制使页面整体缩放的方案,还有一个就是通过js实时检测屏幕大改变html根字体大小的rem布局方案.目前我在使用的是缩放的方案.整体代码基本上是整合的是大牛们分享的一些实用代码,如有什么bug欢迎提出,共同进

Unity3D手游开发日记(3) - 场景加载进度条的完美方案

我以为做个进度条很简单,分分钟解决,结果折腾了一天才搞定,Unity有很多坑,要做完美需要逐一解决. 问题1:最简单的方法不能实现100%的进度用最简单的方法来实现,不能实现100%的进度,原因是Unity加载完新场景立马就激活新场景了,无法显示最后的进度.解决办法就是使用allowSceneActivation来控制进入场景的时机. 问题2:使用allowSceneActivation后进度卡在90% 这个问题官网论坛也有人讨论,解决办法就是自己手动修补最后的10%, 问题3:进度条一顿一顿

TangIDE开发技巧之自定义资源加载窗口进度条

用TangIDE开发游戏的朋友都知道,你可以像编辑普通的窗口一样编辑资源加载窗口,加入各种丰富的控件和动画效果,但是进度条相对比较单调,现在进度条默认是两张小图,加载时按九宫格来绘制,如果你不想用九宫格,想用两张水平长图替代它们,那么你可以在资源加载窗口的onSystemInit事件下,重写进度条控件(UIProgressBar)的drawBgImageH方法(这里的H表示水平形状的进度条),改变图片的绘制方式. var me = this; var win = this.getWindow()

网页的资源加载优化

移动开发中很重要的一块是资源的加载优化.移动开发由于网速低带宽,高延迟,移动设备小内存,低处理器性能的原因,因此很多时候不得不通过优化前端页面的性能来满足用户对网页加载的预期. 前段时间做了相关方面的优化,发现网上的中文教程比较少,都是照着chrome开发者网站上一步一步看下来,找问题来解决,因此将部分有用的网页整理翻译了一下. 一.查看网页加载速度网页加载时长受到网速影响,一般采用浏览器模拟一个特定网速进行测试,这样优化前与优化后的结果会有一个较准确的对比. 方法:打开调试面板-选择网速,一

html5游戏之createjs以及“找不同”实践

今天给大家介绍一款h5游戏的小框架,createjs,相信很多人都接触过.先简单介绍下createjs:CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎. CreateJS 中包含五款工具: EaselJS:用于 Sprites.动画.向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控),同时提供 Flash 中的“显示列表”功能. TweenJS:一个简单的用于制作类似 Flash 中“补间动画”的引擎,可生成数字或非数字的连续变化效果.

让我们再聊聊浏览器资源加载优化

让我们再聊聊浏览器资源加载优化让我们再聊聊浏览器资源加载优化

各浏览器对页面外部资源加载的策略

这个总结来源于一次优化的请求,最初某个页面的加载十分缓慢,load事件迟迟无法触发,因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化,拿得load事件尽可能早地触发. 于是我查看了页面的源码,并对外部资源进行了整理,基于下面2个理念画出了一个推测的瀑布图: 1.浏览器对同一个域只能并发2个HTTP请求 – 网上盛传已久.2.javascript文件的加载会阻塞浏览器其他资源的加载 – 同样网上盛传已久. 然而,当我看到各浏览器中实际的瀑布图时,我知道自己又犯了一个简单的错误:太过相

Webkit资源加载介绍

一.webkit资源分类 webkit中有多种资源,大致分为以下几种: HTML文本 CSS样式文本 - CachedCSSStyleSheet 字体 - CachedFont 图片 - CachedImage 只读资源 - CachedRawResource JavaScript文本 - CachedScript SVG - CachedSVGDocument 视频字幕 - CachedTextTrack XSL样式表 - CachedXSLStyleSheet 类图如下: HTML文本是网页