首页 / HTML5 / HTML5游戏开发之资源加载篇(2)

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5游戏开发之资源加载篇(2)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2753字，纯文字阅读大概需要4分钟。

内容图文

四) 下载过程的管理

4.1) 如何管理成千上百的资源

在游戏开发的过程中，很有可能会有成千上百张图片。最直接的方式，是将这些图片编写在代码中，但是图片的名字很容易改变的，会造成大量的维护工作，甚至影响代码的打包和发布。我的同事Boris，在他的代码演示库中，给出了一个参考实现方式，如下。这种方式，可以保证，在需要修改或者调整资源名称或者路径的时候，不需要接触代码。

  1. {
  2. "assetRoot": "url/to/assets",
  3. "bundles": [
  4. {
  5. "name": "unique bundle name",
  6. "contents": [
  7. "relative/path/to/asset.jpg",
  8. "another/asset.mp3"
  9. ]
  10. },
  11. "autoDownload": true
  12. }
  13. var gal = new GameAssetLoader("http://path.to/gal.manifest");
  14. // Load the GAL. If manifest indicates autoDownload, this call will
  15. // start loading assets one by one.
  16. gal.init(function() {
  17. // Called when the library is initialized
  18. });

更完整的代码，可以参考GitHub上的源代码

4.2) 如何实现批处理的下载

再获得了资源列表之后，就要开始资源的下载。显然，需要这样的方法。

  1. AssetManager.prototype.downloadAll = function(downloadCallback) {
  2. for (var i = 0; i < this.downloadQueue.length; i++) {
  3. var path = this.downloadQueue[i];
  4. var img = new Image();
  5. var that = this;
  6. img.addEventListener("load", function() {
  7. // coming soon
  8. }, false);
  9. img.addEventListener("error", function() {
  10. // coming soon
  11. }, false);
  12. img.src = path;
  13. }
  14. }

  15.
  16. 下载的过程中，一般情况下都需要一个进度条，来显示完成的情况，所以必须对AssetManager进行计数。



  19.
  20. function AssetManager() {
  21. this.successCount = 0;
  22. this.errorCount = 0;
  23. this.downloadQueue = [];
  24. }

  26. AssetManager.prototype.isDone = function() {
  27. return (this.downloadQueue.length == this.successCount + this.errorCount);
  28. }
  29. AssetManager.prototype.getProcess = function() {
  30. return (this.successCount + this.errorCount)/this.downloadQueue.length;
  31. }

显然，也需要对每个img的load和error事件，进行计数。还请注意downloadAll函数有个参数叫做downloadCallback，在资源下载完成以后，通知此函数，进入游戏过程中。

  1. img.addEventListener("load", function() {
  2. that.successCount += 1;
  3. if (that.isDone()) {
  4. downloadCallback();
  5. }
  6. }, false);
  7. img.addEventListener("error", function() {
  8. that.errorCount += 1;
  9. if (that.isDone()) {
  10. downloadCallback();
  11. }
  12. }, false

4.3) 游戏中的不同关卡

游戏通常是分关卡的，完全没有必要在一开始就将游戏的所有资源下载到本地，毕竟不是每个玩家都会将游戏通关。为了按需下载，比较完备的资源加载器，应该可以对每个资源配上一个标签或者属性，可以标志它属于哪一关。每一关的开始，只下载和本关相关联的资源，在每一关结束的时候，在去下载下一关的资源。不仅减少用户的不必要的等待时间，还可以有效的减少服务器的压力。

5.资源加载器的具体实现

5.1 PreloadJS

官方网站：http://www.createjs.com/#!/PreloadJS/download

开源代码：https://github.com/CreateJS/PreloadJS/

专门用于资源下载的类库，非常好用，考虑的也非常全面，首先推荐的一款软件，尤其是读者不希望加载特别大的游戏引擎是，这款软件可以作为首选。

具体的例子可以参考：https://github.com/CreateJS/PreloadJS/tree/master/examples

（未完待续）

内容总结

以上是互联网集市为您收集整理的HTML5游戏开发之资源加载篇(2)全部内容，希望文章能够帮你解决HTML5游戏开发之资源加载篇(2)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/389704.html

来源：【匿名】