新手教程:HTML5萌萌水贼游戏技术图文教程

本文转自9秒社团 作者:耍赖猫咪

萌萌水贼是一款可玩性很高的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元素播放时,边解码边播放)

耍赖猫咪建议:把音频文件的大小缩小些,或者分解成若干小文件再分别加载解码播放