Cocos2d-JS使用CocosDenshion引擎

时间  2019-11-05
标签 cocos2d cocos 使用 cocosdenshion 引擎 栏目 Cocos2d-x 繁體版
原文   原文链接

Cocos2d-JS提供了一个音频CocosDenshion引擎。具体使用的API是cc.AudioEngine。cc.AudioEngine有几个经常使用的函数：
playMusic(url, loop)。播放背景音乐，参数url是播放文件的路径，参数loop控制是否循环播放，缺省状况下false。
stopMusic()。中止播放背景音乐。
pauseMusic()。暂停播放背景音乐。
resumeMusic ()。继续播放背景音乐。
isMusicPlaying()。判断背景音乐是否在播放。
playEffect (url, loop)。播放音效，参数同playMusic函数。
pauseEffect(audioID)。暂停播放音效，参数audioID是playEffect函数返回ID。
pauseAllEffects ()。暂停全部播放音效。
resumeEffect (audioID)。继续播放音效，参数audioID是playEffect函数返回ID。
resumeAllEffects ()。继续播放全部音效。
stopEffect(audioID)。中止播放音效，参数audioID是playEffect函数返回ID。
stopAllEffects ()。中止全部播放音效。


音频文件的预处理
不管是播放背景音乐仍是音效在播放以前进行预处理是有必要的。若是不进预处理，则会发如今第一次播放这个音频文件时候感受很“卡”，用户体验很差。Cocos2d-JS中提供了资源文件的预处理功能。
经过模板生成的Cocos2d-JS工程中有一个main.js，它的内容以下：
html

[html] view plaincopy在CODE上查看代码片派生到个人代码片微信

  1. cc.game.onStart = function(){  函数

  2.     cc.view.setDesignResolutionSize(1136, 640, cc.ResolutionPolicy.EXACT_FIT);  oop

  3.     cc.view.resizeWithBrowserSize(true);  字体

  4.     //load resources  动画

  5.     cc.LoaderScene.preload(g_resources, function () {                           ①  网站

  6.         cc.director.runScene(new HelloWorldScene());  this

  7.     }, this);  编码

  8. };  url

  9. cc.game.run();  

其中cc.LoaderScene.preload函数能够预处理一些资源，其中g_resources是资源文件集合变量，它是在resource.js文件中定义的，resource.js文件的内容以下：

[html] view plaincopy在CODE上查看代码片派生到个人代码片

  1. var res = {  

  2.   

  3.   

  4.     //image  

  5.     On_png: "res/on.png",  

  6.     Off_png: "res/off.png",  

  7.     background_png: "res/background.png",  

  8.     start_up_png: "res/start-up.png",  

  9.     start_down_png: "res/start-down.png",  

  10.     setting_up_png: "res/setting-up.png",  

  11.     setting_down_png: "res/setting-down.png",  

  12.     help_up_png: "res/help-up.png",  

  13.     help_down_png: "res/help-down.png",  

  14.     setting_back_png: "res/setting-back.png",  

  15.     ok_down_png: "res/ok-down.png",  

  16.     ok_up_png: "res/ok-up.png",  

  17.   

  18.   

  19.     //plist  

  20.     //fnt  

  21.     //tmx  

  22.     //bgm  

  23.     //music  

  24.     bgMusicSynth_mp3: 'res/sound/Synth.mp3',                                ①  

  25.     bgMusicJazz_mp3: 'res/sound/Jazz.mp3'                                   ②  

  26.     //effect  

  27. };  

  28.   

  29.   

  30. var g_resources = [                                                     ③  

  31.   

  32.   

  33. ];  

  34.   

  35.   

  36.   

  37.   

  38. for (var i in res) {                                                            ④  

  39.     g_resources.push(res[i]);  

}
上述代码第③行定义了资源集合变量g_resources，其中的第④行的for循环是将背景音乐资源文件添加到g_resources资源集合变量中。注意为了防止硬编码，咱们须要在res变量中添加资源别名的声明见代码第①行和第②行。
经过的上述设置游戏应用在运行的时候加载全部资源文件，包括图片、声音、属性列表文件（plist）、字体文件（fnt）、瓦片地图文件（tmx）等。


播放背景音乐
背景音乐的播放与中止实例代码以下：

[html] view plaincopy在CODE上查看代码片派生到个人代码片

  1. cc.audioEngine.playMusic(res.bgMusicSynth_mp3, true);  

  2. cc.audioEngine.stopMusic(res.bgMusicSynth_mp3);  

其中cc.audioEngine是cc.AudioEngine类建立的对象。
背景音乐的播放代码放置到什么地方比较适合呢？例如：在Setting场景中，主要代码以下：

[html] view plaincopy在CODE上查看代码片派生到个人代码片

  1. var SettingLayer = cc.Layer.extend({  

  2.       

  3.     ctor:function () {  

  4.         this._super();  

  5.         cc.log("SettingLayer init");          

  6.             //播放代码                                                      ①    

  7.             return true;        

  8.     },  

  9.     onEnter: function () {  

  10.         this._super();  

  11.         cc.log("SettingLayer onEnter");  

  12.         //播放代码                                                          ②  

  13.     },  

  14.     onEnterTransitionDidFinish: function () {  

  15.         this._super();  

  16.         cc.log("SettingLayer onEnterTransitionDidFinish");      

  17.         //播放代码                                                          ③  

  18.     },  

  19.     onExit: function () {  

  20.         this._super();  

  21.         cc.log("SettingLayer onExit");        

  22.         //播放代码                                                          ④  

  23.     },  

  24.     onExitTransitionDidStart: function () {  

  25.         this._super();  

  26.         //播放代码                                                          ⑤     

  27.     }  

  28. });  

关于播放背景音乐，理论上咱们是能够将播放代码cc.audioEngine.playMusic(res.bgMusicSynth_mp3, true)放置到三个位置（代码中的①、②、③）。下面咱们分别分析一下它们还有什么不一样。
一、代码放到第①行
代码放到第①行（即在ctor构造函数），若是前面场景中没有调用背景音乐中止语句，则能够正常播放背景音乐。可是若是前面场景层HelloWorldLayer onExit函数有调用背景音乐中止语句，那么会出现背景音乐播放几秒钟后中止。
为了解释这个现象，咱们能够参考一下多场景切换生命周期的相关内容。使用pushScene函数从实现HelloWorld场景进入Setting场景，生命周期函数调用顺序以下图所示。

生命周期事件顺序

从图中可见，HelloWorldLayer onExit调用是在SettingLayer init(ctor构造函数)以后，这样当咱们在SettingLayer init中开始播放背景音乐后，过一会调用HelloWorldLayer  onExit中止背景音乐播放，这样问题就出现了。
注意 不管播放和中止的是不是同一个文件，都会出现个问题。

二、代码放到第②行
代码放到第②行（即在SettingLayer onEnter函数），若是前面场景中没有调用背景音乐中止语句，则能够正常播放背景音乐。若是前面的场景层HelloWorldLayer onExit函数有背景音乐中止语句，也会出现背景音乐播放几秒钟后中止。缘由与代码放到第①行状况同样。

三、代码放到第③行
咱们推荐代码放到第③行代码位置，由于onEnterTransitionDidFinish函数是在进入层并且过渡动画结束时候调用，代码放到这里不用考虑中前面场景是否有调用背景音乐中止语句。并且用户也不会先听到声音，后出现界面现象。
综上所述，是否可以成功播放背景音乐，前面场景是否有调用背景音乐中止语句有关，也与当前场景中播放代码在哪一个函数里有关。若是前面场景没有调用背景音乐中止语句，问题也就简单了，咱们能够将播放代码放置在代码①、②、③任何一处。可是若是前面场景调用背景音乐中止语句，在onEnterTransitionDidFinish函数播放背景音乐会更好一些。


中止播放背景音乐
中止背景音乐播放代码放置到什么地方比较适合呢？例如：在HelloWorld场景中，主要代码以下：

[html] view plaincopy在CODE上查看代码片派生到个人代码片

  1. var HelloWorldLayer = cc.Layer.extend({  

  2.       

  3.     ctor:function () {  

  4.         this._super();  

  5.         cc.log("HelloWorldLayer init");          

  6.     },  

  7.     onEnter: function () {  

  8.             this._super();  

  9.             cc.log("HelloWorldLayer onEnter");  

  10.     },  

  11.     onEnterTransitionDidFinish: function () {  

  12.             this._super();  

  13.             cc.log("HelloWorldLayer onEnterTransitionDidFinish");      

  14.     },  

  15.     onExit: function () {  

  16.             this._super();  

  17.             cc.log("HelloWorldLayer onExit");         

  18.             //中止播放代码                                                    ①  

  19.     },  

  20.     onExitTransitionDidStart: function () {  

  21.         this._super();  

  22.             //中止播放代码                                                ②  

  23.     }  

  24. });  

关于中止背景音乐播放，理论上咱们是能够将中止播放代码cc.audioEngine.stopMusic(res.bgMusicSynth_mp3)放置到两个位置（代码中的①和②）。下面咱们分别分析一下它们还有什么不一样。


一、代码放到第①行
代码放到第①行（即在HelloWorldLayer onExit函数），若是后面场景中调用背景音乐播放，则可能致使播放背景音乐异常，可是若是在后面场景的onEnterTransitionDidFinish函数中播放背景音乐就不会有异常了。关于这个问题咱们在前一节以及介绍过了。
二、代码放到第②行

代码放到第②行（即在HelloWorldLayer onExitTransitionDidStart函数），从图9-1可见，HelloWorldLayer onExitTransitionDidStart函数第一个被执行，若是咱们的中止播放代码放在这里，不会对其它场景的背景音乐播放产生影响。咱们推荐中止播放代码放在这里。


更多内容请关注最新Cocos图书《Cocos2d-x实战：JS卷——Cocos2d-JS开发》

本书交流讨论网站：http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群：257760386

更多精彩视频课程请关注智捷课堂Cocos课程：http://v.51work6.com

智捷课堂现推出Cocos会员，敬请关注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

《Cocos2d-x实战 JS卷》现已上线，各大商店均已开售：

京东：http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台，了解最新技术文章、图书、教程信息

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程