您当前的位置:网站首页>twitter,HTML5游戏开发的好资源怎么加载呢?,skirt

twitter,HTML5游戏开发的好资源怎么加载呢?,skirt

2019-04-07 00:33:12 投稿作者:admin 围观人数:145 评论人数:0次
HTML5游戏开发的好资源怎样加载呢?

使用HTML5进行游戏开发,比较于其他言语例如Java、C++等,有许多不同,其间一个便是资源加载。小编首要对HTML5游戏资源加载的问题、原因以及处理方案,进行一些剖析,企图解释一下问题:

怎样加载不同类型的资源

怎样进行批量加载

怎样显现加载的进度条

怎样寄存资源

二) 需求考虑的资源类型

一般游戏需求的资源,首要包含图片、音谶频、视频以及二进制数据文件。假如是3D游戏,还会需求一些模型文件,例如3dmax导出的obj文件。一般的状况下,这twitter,HTML5游戏开发的好资源怎样加载呢?,skirt些资源文件,少则几十兆,多则几个G。关于许多客户端游戏,这个并不是特别大的问题。一般,它们能够将这些资源打在装置包中,跟着装置的进程,一次性的寄存在本地。

HTML5游戏开发的好资源怎样加载呢?

可是,Web游戏面对的状况比较复杂,主凉粉要有两个原因:

因为一切的资源都放在云端的服务器上。

浏览器为了优化网页的烘托,关于图片、音频等资源的加载,一般都是异步的。

我们能够回想一下,在打浛洸开某些网twitter,HTML5游戏开发的好资源怎样加载呢?,skirt页的时分,偶尔也会看到,即便在网页显现完今后,总有一两个图片的方位是空白的,大约几秒钟今后,这些图片往往又在不经意中显现了出来。

除了图片、音频等二进制文件,还有一类比较特别的文件,便是Javascript文件。假如仅是依据文件的巨细,这类文件如同能够忽略不计。可是因为浏览器关于Javascript文件的处理是同应崇江步的,往往这些文件会成为功用的瓶颈。除铁器ccscd

三) 怎样加载不同类型的资源

2.1 经过浏览器内置目标的回调接口,完结资源加载

关于图片文件的加载,浏览器供给了便利的回调接口,比较简单完结,如下:

var image = new Image();

image.add荷斯坦奶农沙龙EventListener(“success”, functtwitter,HTML5游戏开发的好资源怎样加载呢?,skirtion(e) {

// do stuff with the image

);

image.src = "/som章一诚微博e/image.png";

仿制代码

仿制代码

可是比较费事的是,HTML并没有供给对等的Audio、Video目标。关于Audio,尽管Web Audio API能够供给相似的功用,但twitter,HTML5游戏开发的好资源怎样加载呢?,skirt是人工少女显着学习门槛高了一些。关于Video,现在还没有能够梁心怡有用的方法,能够模仿相似的功用。关于文本、二进制等文件,更是比较费事。

2.2老鼠货是什么意思 经过Aj石加乐ax恳求,完结资源加载

使用Ajax对HTTP地址进行恳求的才能,信任我们没有任何质疑。可是,在Ajax恳求到相关资源今后,怎样将资源转化为相应的图片、音频等目标,如同又产生了一些困难。

可是走运的是,现在Ajax推出了新的规范,能够支撑对二进制数据的提取。再辅佐现在新的数据存储方法,比方Blob、FileSystem等,能够轻松的处理这个问题。

使用Blob将资源转化相应的目标健力宝,代码片段如下,更多代码请参阅“New Trics in XHR”

window.URL = window.URL || wind地铁5号线ow.webkitURL; // Take care of vendor prefixe秘鲁伟人甲由s.var xhr = new XMLHttpRequest();

xhr.open('GET', '/path/to/image.png', true);

xhr.responseType = 'blob';

xhr.onload = function(e) {

if (this.status == 200) {

var blob = this.response;

var img = document.createElement('img');

img.onload = function(e) {

window.URL.revokeObjectURL(img.src); // Clean up after yourself.

};

img.src = window.URL.createObjectURL(blob);

document.body.appendChild(img);

...

}

};

xhr.send();

仿制代码

仿制代码

使用FileSystem

将资源转化为相应的目标,代码片段如下,更多完结代码,请参阅“LOADING LARGE ASSETS IN MODERN HTML5 GAMES”

var xhr = new XMLHttpRequest()无法逃离的变节;

xhr.open('GET', url, twitter,HTML5游戏开发的好资源怎样加载呢?,skirttrue);

xhr.responseType = 'arraybuffetwitter,HTML5游戏开发的好资源怎样加载呢?,skirtr';

xhr.addEventListener('load', function() {

createDir_(root, dirname_(key).split('/'), function(dir) {

dir.getFile(basename_(key), {create: true}, function(fileEntry) {

fileEntry.createWriter(function(writer) {

wr秋收起义iter.onwrite = function(e) {

// Save this file in the path to URL lookup table.

lookupTable[key] = fileEntry.toURL();

callback();

};

write招警考试r.otwitter,HTML5游戏开发的好资源怎样加载呢?,skirtnerror = failCallback;

var bb = new BlobBuilder();

bb.append(xhr.response);

writer.write(bb.getBlob());

}, failCa宝宝辅食llback);

}, failCallback);

});

});

xh黄雅滢r.addEventListener('error', failCallback);

xhr.send();

仿制代码

仿制代码

上面两种方法,都是在取得资源后,为资源生成一个URL地址目标,在将此地址赋给相关的目标。

the end
中国最具影响力生殖健康信息传播平台,关爱您的生殖系统