HTML5游戏开发之资源加载篇（1）-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5游戏开发之资源加载篇（1）

PHP中文网

May 17, 2016 am 09:08 AM

一) 背景介绍

利用HTML5进行游戏开发，相比于其他语言例如Java、C++等，有很多不同，其中一个就是资源加载。本文主要对HTML5游戏资源加载的问题、原因以及解决方案，进行一些分析，试图解释以下问题：

如何加载不同类型的资源

如何进行批量加载

如何显示加载的进度条

如何存放资源

   在文章的最后，也会列举一些游戏引擎的实现方案，供大家参考。通过此篇文章，希望可以让读者对于资源加载的技术有一个全面的了解。

   二) 需要考虑的资源类型

   一般游戏需要的资源，主要包括图片、音频、视频以及二进制数据文件。如果是3D游戏，还会需要一些模型文件，例如3dmax导出的obj文件。通常的情况下，这些资源文件，少则几十兆，多则几个G。对于很多客户端游戏，这个并不是特别大的问题。通常，它们可以将这些资源打在安装包中，随着安装的过程，一次性的存放在本地。

   但是，Web游戏面临的情况比较复杂，主要有两个原因：

因为所有的资源都放在云端的服务器上。

浏览器为了优化网页的渲染，对于图片、音频等资源的加载，通常都是异步的。

   大家可以回想一下，在打开某些网页的时候，偶然也会看到，即使在网页显示完以后，总有一两个图片的位置是空白的，大约几秒钟以后，这些图片往往又在不经意中显示了出来。

   除了图片、音频等二进制文件，还有一类比较特殊的文件，就是Javascript文件。尤其是游戏逻辑比较庞大时，Javascript文件也可能有几百K，甚至好几兆。如果仅是根据文件的大小，这类文件似乎可以忽略不计。但是由于浏览器对于Javascript文件的处理是同步的，往往这些文件会成为性能的瓶颈。

   举个例子，当浏览器在解析网页的过程中，碰到了碰到了