HTML5游戏开发 之 资源加载篇(1)
一) 背景介绍
利用HTML5进行游戏开发,相比于其他语言例如Java、C++等,有很多不同,其中一个就是资源加载。本文主要对HTML5游戏资源加载的问题、原因以及解决方案,进行一些分析,试图解释以下问题:
如何加载不同类型的资源
如何进行批量加载
如何显示加载的进度条
如何存放资源
在文章的最后,也会列举一些游戏引擎的实现方案,供大家参考。通过此篇文章,希望可以让读者对于资源加载的技术有一个全面的了解。
二) 需要考虑的资源类型
一般游戏需要的资源,主要包括图片、音频、视频以及二进制数据文件。如果是3D游戏,还会需要一些模型文件,例如3dmax导出的obj文件。通常的情况下,这些资源文件,少则几十兆,多则几个G。对于很多客户端游戏,这个并不是特别大的问题。通常,它们可以将这些资源打在安装包中,随着安装的过程,一次性的存放在本地。
但是,Web游戏面临的情况比较复杂,主要有两个原因:
因为所有的资源都放在云端的服务器上。
浏览器为了优化网页的渲染,对于图片、音频等资源的加载,通常都是异步的。
大家可以回想一下,在打开某些网页的时候,偶然也会看到,即使在网页显示完以后,总有一两个图片的位置是空白的,大约几秒钟以后,这些图片往往又在不经意中显示了出来。
除了图片、音频等二进制文件,还有一类比较特殊的文件,就是Javascript文件。尤其是游戏逻辑比较庞大时,Javascript文件也可能有几百K,甚至好几兆。如果仅是根据文件的大小,这类文件似乎可以忽略不计。但是由于浏览器对于Javascript文件的处理是同步的,往往这些文件会成为性能的瓶颈。
举个例子,当浏览器在解析网页的过程中,碰到了碰到了

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
