这个问题一直从去年遗留到现在,今天找个空,把她找到了。
是有
Kinogam
原创文章
用于HTML5游戏开发的资源加载器
之前我在开发一个飞机射击类的html5游戏,需要处理一下类似图片和音频的加载,因为web workers暂时还不是大部分浏览器都支持,所以我开发了一个资源加载器SourceLoader。
游戏开发的话,我们需要加载各种各样的素材和数据(加载数据我暂时还没并在这个类里一起处理)
为了让大家更好的关注游戏的用户体验,我们需要更多便利的工具,现在我来介绍下SourceLoader。
var rl = new ResourceLoader();
rl.add({ type: "image", key: "pic1", src: "1.jpg" });
ResourceLoader 有 add 方法,参数是一个json对象,type表示资源的类型,暂时有”image”,”audio”,”video” 3种,分别表示图片、音频、视频资源;key表示资源使用的时候对应的名字,比如 rl.rs["pic1"] 就可以获得 1.pig的Image对象;src表示该资源的URL地址。
以下我们用一个单元测试的用例来介绍下回调:
asyncTest("resource list items callback test", function () {
var rl = new ResourceLoader();
rl.add({ type: "image", key: "pic1", src: "1.jpg" });
rl.add({ type: "audio", key: "audio1", src: "01.mp3" });
rl.add({ type: "video", key: "video1", src: "01.mp4" });
rl.itemLoad = function () {
ok(true, "item " + this.type + " callback success");
}
rl.onload = function () {
ok(true, "all items callback success");
start();
}
rl.load();
});
itemLoad表示每个资源加载完成时的回调事件,里面的this表示当前的资源的json,比如1.pig加载完的时候,this表示{ type: “image”, key: “pic1″, src: “1.jpg” }。
onload表示所有资源都加载完之后的回调事件,平时可以在所有资源都加载完毕之后就正式进入游戏(开始执行事件绑定或开始画图),比如这样:
fl.prototype.startGame = function (tfn) {
this.x = this.canvas.width / 2 - 25;
this.y = this.canvas.height - 50;
var fobj = this;
this.loader.onload = function () {
fobj.regEvent();
fobj.draw(fobj, tfn);
};
this.loader.load();
}
要开始资源加载的时候,我们可以使用 load 方法。
另外,该类也有清空资源的方法
rl.clearItem("pic1");
rl.clearAll();
假如大家有兴趣使用 ResourceLoader 的话,可以关注一下,源代码可以在这里下载
https://github.com/kinogam/ResourceLoader