Rumah hujung hadapan web Tutorial H5 HTML5游戏开发 之 资源加载篇(1)

HTML5游戏开发 之 资源加载篇(1)

May 17, 2016 am 09:08 AM

       一) 背景介绍

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

  • 如何加载不同类型的资源


  • 如何进行批量加载


  • 如何显示加载的进度条


  • 如何存放资源


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

       二) 需要考虑的资源类型

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

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

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


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


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

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

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

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

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

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

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

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

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

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

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

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

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

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

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

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

Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

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

See all articles