发新帖

[新人报到] H5萌萌水贼游戏技术图文教程

大神级别 2016-9-12 197


萌萌水贼是一款可玩性很高的HTML5休闲游戏,关卡设置丰富,玩法多样。我在测试的时候就各种停不下来,一关一关又一关
因为爱所以爱~~ 这就是我接下来要和大家分享的一款游戏

游戏的玩法很简单:画出最适路径帮助我们的小水贼得到所有金币呦!虽然过程中会有些阻碍,但为了各种见钱眼开的我们是没有任何困难能够难得住我们


掏干货的时间又到了看着我的眼睛~~~



鉴于之前的《高尔夫花园》帖,有朋友给我了一些建议让我直接捞干货,那些项目介绍太小case不符合我高端大气上档次,低调奢华有内涵的人设;所以马上将WebAudio API介绍给大家...


Part 1 WebAudio API介绍
WebAudio API顾名思义主要是为音频文件添加音效而设计的,但同时也用以播放音频文件和HTML5 audio元素的功能,audio元素可以有控制界面,用户可以点击界面上的播放/停止按钮来控制文件的播放,也可以拖动界面上的进度条来控制播放进度。而WebAudio API实现的音频播放则没有控制界面,对于手机设备的跨平台更有优势。而且目前游戏引擎Cocos2d-html5就在使用。

详见:官网介绍去




Part 2 WebAudio API创建
加载音频文件:
先通过XMLHttpRequest API从服务器上下载音频文件到本地,在下载完毕后调用WebAudio中的解码函数decodeAudioData对下载的数据进行解码,如果平台不支持音频文件的解码,将调用出错灰调函数

  1. .registerSound = function(a, q, v) {
  2.         if (k)
  3.             if (p) {
  4.                 var u = new XMLHttpRequest;
  5.                 u.open("get", q, !0);
  6.                 u.responseType = "arraybuffer";
  7.                 u.onload = function() {
  8.                     p.decodeAudioData(u.response, function(f) {
  9.                         e[a] = {
  10.                             buffer: f
  11.                         };
  12.                         v && v()
  13.                     })
  14.                 };
  15.                 u.send()
  16.             } else e[a] = new Audio, v && (e[a].preload = "auto", $(e[a]).on("loadeddata", v)), e[a].src = f ? q.replace(".mp3", ".ogg") : q;
  17.         else v && v()
  18.     };
复制代码


播放声音:

  1. typeof q.sourceNode.noteOn//立即播放
复制代码
  1. a.playSound = function(f) {
  2.         try {
  3.             var q;
  4.             k && (q = e[f]) && (p ? (a.stopSound(f), q.sourceNode = p.createBufferSource(), q.sourceNode.buffer = q.buffer,
  5.                 q.sourceNode.connect(p.destination), "undefined" !== typeof q.sourceNode.noteOn ? q.sourceNode.noteOn(0) : q.sourceNode.start(0)) : (q.currentTime = 0, q.play()))
  6.         } catch (v) {}
  7.     };
复制代码


停止播放:

  1. a.sourceNode.noteOff//立即停止
复制代码
  1. a.stopSound = function(a) {
  2.         k && (a = e[a]) && (p ? a.sourceNode && ("undefined" !== typeof a.sourceNode.noteOff ? a.sourceNode.noteOff(0) : a.sourceNode.stop(0), a.sourceNode = null) : (a.pause(), a.currentTime = 0))
  3.     }
  4. })(window.AudioManager = window.AudioManager || {});
复制代码


循环播放:

  1. a.loopSound = function(f) {
  2.         var q;
  3.         k && (q = e[f]) && (p ? (a.stopSound(f), q.sourceNode = p.createBufferSource(), q.sourceNode.loop = !0, q.sourceNode.buffer = q.buffer, q.sourceNode.connect(p.destination), "undefined" !== typeof q.sourceNode.noteOn ? q.sourceNode.noteOn(0) : q.sourceNode.start(0)) : ("boolean" === typeof q.loop ? q.loop = !0 : q.addEventListener("ended", function() {
  4.             this.currentTime =
  5.                 0;
  6.             this.play()
  7.         }, !1), q.play()))
  8.     };
复制代码


Part 3 WebAudio API效率问题
上面介绍了如何用WebAudio来播放音频文件,但是需要注意的是
不要轻易采用WebAudio的该功能,因为当音频文件比较大时,可能会影响程序的执行效率。

  • 程序中采用了XMLHttpRequest下载文件比较耗时,影响音频的播放延迟。
  • 程序调用WebAudio的decodeAudioData函数解码整个音频文件,在一次性解码完毕后才开始播放音频文件又增加了音频播放延迟。
  • 由于整个文件的一次性解码,整个解码前和解码后文件都是同事存储在内存中的,也引起内存的巨大开销(audio元素播放时,边解码边播放)


最新回复 (0)
登录后再回复
返回