文档章节

Cocos2d-JS使用CocosDenshion引擎

智捷课堂
 智捷课堂
发布于 2015/04/06 18:43
字数 1792
阅读 326
收藏 1

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] view plaincopy在CODE上查看代码片派生到我的代码片

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

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

  3.     cc.view.resizeWithBrowserSize(true);  

  4.     //load resources  

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

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

  7.     }, this);  

  8. };  

  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)放置到三个位置(代码中的①、②、③)。下面我们分别分析一下它们还有什么不同。
1、代码放到第①行
代码放到第①行(即在ctor构造函数),如果前面场景中没有调用背景音乐停止语句,则可以正常播放背景音乐。但是如果前面场景层HelloWorldLayer onExit函数有调用背景音乐停止语句,那么会出现背景音乐播放几秒钟后停止。
为了解释这个现象,我们可以参考一下多场景切换生命周期的相关内容。使用pushScene函数从实现HelloWorld场景进入Setting场景,生命周期函数调用顺序如下图所示。

生命周期事件顺序

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

2、代码放到第②行
代码放到第②行(即在SettingLayer onEnter函数),如果前面场景中没有调用背景音乐停止语句,则可以正常播放背景音乐。如果前面的场景层HelloWorldLayer onExit函数有背景音乐停止语句,也会出现背景音乐播放几秒钟后停止。原因与代码放到第①行情况一样。

3、代码放到第③行
我们推荐代码放到第③行代码位置,因为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)放置到两个位置(代码中的①和②)。下面我们分别分析一下它们还有什么不同。


1、代码放到第①行
代码放到第①行(即在HelloWorldLayer onExit函数),如果后面场景中调用背景音乐播放,则可能导致播放背景音乐异常,但是如果在后面场景的onEnterTransitionDidFinish函数中播放背景音乐就不会有异常了。关于这个问题我们在前一节以及介绍过了。
2、代码放到第②行

代码放到第②行(即在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课堂微信公共平台,了解最新技术文章、图书、教程信息


© 著作权归作者所有

智捷课堂

智捷课堂

粉丝 40
博文 239
码字总数 215495
作品 0
东城
私信 提问
cocos2d-X学习之引擎源码目录结构介绍

Cocos2d-x的目录结构如下: 目录的具体结构介绍如下: Box2D:物理引擎Box2D的相关源文件 Chipmunk:物理引擎chipmunk的相关源文件 cocos2dx:cocos2d-x引擎的核心部分,存放了引擎的大部分源...

长平狐
2012/08/29
1K
0
cocos2d-x js模版修改

创建cocos2d-x项目,导入引擎模版,避免每次都拷贝引擎到项目中,修改路径: D:commonscocos2d-xcocos2d-2.1rc0-x-2.1.3templatemsvcCCAppWiz.win32Scripts1033下的js文件如下: // Additio...

石头哥哥
2013/08/04
266
0
搭建Cocos2d-JS开发环境

使用Cocos2d-JS引擎开发游戏,主要的程序代码是JavaScript语言,因此,凡是能够开发JavaScript语言工具都适用于Cocos2d-JS游戏开发。本书我们推荐WebStorm和Cocos Code IDE工具。 搭建WebSt...

智捷课堂
2015/03/18
3K
0
Cocos2d-js接入FB和Mobvista原生广告

【业务需求】 一、功能需求 Cocos2d-js接入FB和Mobvista原生广告 二、技术要求 熟悉Cocos2d-js引擎(用的是Cocos Creator),接入过FB原生广告,接过MobVista原生广告 【人员要求】 一、能力...

atwal
2017/12/06
73
4
Cocos2d-JS中JavaScript继承

JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的,在Cocos2d-J...

智捷课堂
2015/03/17
43
0

没有更多内容

加载失败,请刷新页面

加载更多

编程作业20190210900169

1编写一个程序,提示用户输入名和姓,然后以“名,姓”的格式打印出来。 #include <stdio.h>#include <stdlib.h> int main(){ char firstName[20]; char lastName[20]; print......

1李嘉焘1
7分钟前
1
0
补码的优点及原理分析

只讨论整数 1.计算机内部为什么没有减法器? 减法运算本身其实就是加法,如x - y即x +(-y),所以只需要将负数成功表示出来并可以参加加法运算,那加法器就可同时实现“+”和“-”的运算。这...

清自以敬
23分钟前
54
0
Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
50分钟前
5
0
Spring Security 实战干货:必须掌握的一些内置 Filter

1. 前言 上一文我们使用 Spring Security 实现了各种登录聚合的场面。其中我们是通过在 UsernamePasswordAuthenticationFilter 之前一个自定义的过滤器实现的。我怎么知道自定义过滤器要加在...

码农小胖哥
53分钟前
7
0
常见分布式事务解决方案

1 微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务,这样可以降低开发难度、增强扩展性、便于敏捷开发。当前被越来越多的开发者推崇,很多互联网行业巨头、开源...

asdf08442a
53分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部