Cocos2d-JS使用CocosDenshion引擎

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，它的内容如下： 

cc.game.onStart = function(){
    cc.view.setDesignResolutionSize(1136, 640, cc.ResolutionPolicy.EXACT_FIT);
	cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {							①
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

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

var res = {

    //image
    On_png: "res/on.png",
    Off_png: "res/off.png",
    background_png: "res/background.png",
    start_up_png: "res/start-up.png",
    start_down_png: "res/start-down.png",
    setting_up_png: "res/setting-up.png",
    setting_down_png: "res/setting-down.png",
    help_up_png: "res/help-up.png",
    help_down_png: "res/help-down.png",
    setting_back_png: "res/setting-back.png",
    ok_down_png: "res/ok-down.png",
    ok_up_png: "res/ok-up.png",

    //plist
    //fnt
    //tmx
    //bgm
    //music
    bgMusicSynth_mp3: 'res/sound/Synth.mp3', 								①
    bgMusicJazz_mp3: 'res/sound/Jazz.mp3'									②
    //effect
};

var g_resources = [														③

];

for (var i in res) {															④
    g_resources.push(res[i]);

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

播放背景音乐
背景音乐的播放与停止实例代码如下： 

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

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

var SettingLayer = cc.Layer.extend({

    ctor:function () {
        this._super();
        cc.log("SettingLayer init");
			//播放代码  													①
			return true;
    },
    onEnter: function () {
    	this._super();
    	cc.log("SettingLayer onEnter");
    	//播放代码															②
    },
    onEnterTransitionDidFinish: function () {
    	this._super();
    	cc.log("SettingLayer onEnterTransitionDidFinish");
		//播放代码															③
    },
    onExit: function () {
    	this._super();
    	cc.log("SettingLayer onExit");
    	//播放代码															④
    },
    onExitTransitionDidStart: function () {
    	this._super();
    	//播放代码															⑤
    }
});

关于播放背景音乐，理论上我们是可以将播放代码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场景中，主要代码如下： 

var HelloWorldLayer = cc.Layer.extend({

    ctor:function () {
        this._super();
        cc.log("HelloWorldLayer init");
    },
    onEnter: function () {
    		this._super();
    		cc.log("HelloWorldLayer onEnter");
    },
    onEnterTransitionDidFinish: function () {
    		this._super();
    		cc.log("HelloWorldLayer onEnterTransitionDidFinish");
    },
    onExit: function () {
    		this._super();
    		cc.log("HelloWorldLayer onExit");
    		//停止播放代码													①
    },
    onExitTransitionDidStart: function () {
    	this._super();
    		//停止播放代码  												②
    }
});

关于停止背景音乐播放，理论上我们是可以将停止播放代码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课堂微信公共平台，了解最新技术文章、图书、教程信息

时间： 2024-10-02 17:25:10

Cocos2d-JS使用CocosDenshion引擎的相关文章

Cocos2d-x中使用音频CocosDenshion引擎介绍与音频文件的预处理

Cocos2d-x提供了一个音频CocosDenshion引擎CocosDenshion引擎可以独立于Cocos2d-x单独使用CocosDenshion引擎本质上封装了OpenAL音频处理库.具体使用的API是SimpleAudioEngine.SimpleAudioEngine有几个常用的函数void preloadBackgroundMusic (const char *pszFilePath) 预处理背景音乐文件将压缩格式的文件进行解压处理如MP3解压为WAV.void playBack

【COCOS2D-HTML5 开发之一】新建HTML5项目及简单阐述与COCOS2D/X引擎关系

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos2d-html5/1463.html             真的是有一段时间没写博了,这段时间呢,发生的事情真的挺多,另外自己呢也闲来做了一些自己的喜欢的东西,主要做的还是基于Mac系统的Cocoa框架的各种编辑器吧.(对了,今年初也出了自己第二本书<iOS游戏编程之从零开始-Cocos2d-x与cocos2d引擎游戏开发>)

探究Javascript模板引擎mustache.js使用方法_javascript技巧

我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法. 简单示例 function show(t) { $("#content").html(t); } var view = { title: 'YZF', cacl: function () { return 6 + 4; } }; $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view

JavaScript模板引擎Template.js使用详解_javascript技巧

template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https://github.com/aui/artTemplate 1.特性 (1).性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)(2).支持运行时调试,可精确定位异常模板所在语句(演示) (3).对 NodeJS Express 友好支持(4).安全,默认对输出进行转义.

JavaScript游戏引擎列表

这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 游戏引擎 Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源.2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based Akihabara 1.3 GPL2/MIT Classic Repro 基于JS+HTML5的街机风格的游戏3 The

javascript-关于codefollow编辑器的js偶尔加载不出来的问题

问题描述 关于codefollow编辑器的js偶尔加载不出来的问题 一.问题描述 codefollow网站用的是Simditor编辑器,在网速不是很快的情况下偶尔会出现编辑器工具栏加载不出来,导致无法发布问题和回答问题.查看控制台,报的是404的错,错误信息如下: 这两个js的文件路径是正确的,这两个js是模版引擎解析的源文件,静态资源没有问题,不懂为什么会报404的错,有没有哪位大神之前遇到过这种情况,一般是什么原因会导致报404的错? 解决方案 把你的dns设置为8.8.8.8看看

node.js学习笔记（9） 和谐模式

众所周知,ECMAScript 是一种开放的.国际上广为接受的脚本语言规范. 它本身并不是一种脚本语言.正如在 Web 应用程序中执行有用操作的 bean 集合(例如,Netscape 的 AWT)是 Sun 的 JavaBean 规范的一种实现一样,JavaScript 是 ECMAScript 规范的一种实现. 2015年6月17日,ECMA国际发布了EcmaScript2015,即EcmaScript6(以下简称ES6)草案的正式版.ES6是继ES5之后的一次主要改进,语言规范由ES5.1

Cocosd2d实例教程（三） Cocos2d瓦片地图的导入

上一节讲了如何使用Tiled制作瓦片地图,下面讲一下如何将地图导入游戏中. 第一步:将生成的文件导入resource中,如图,分别为地图和图片集 第二步:在HelloWorldLayer.h中修改代码,有一定基础的人还是比较好理解的. #import <GameKit/GameKit.h> // When you import this file, you import all the cocos2d classes #import "cocos2d.h" // Hello

Node.js 异步编程之 Callback介绍（一）

 这篇文章主要介绍了Node.js 异步编程之 Callback介绍(一),本文用实例讲解Callback的相关知识,本文是第一篇,下一篇小编会跟进,需要的朋友可以参考下     Node.js 基于 JavaScript 引擎 v8,是单线程的.Node.js 采用了与通常 Web 上的 JavaScript 异步编程的方式来处理会造成阻塞的I/O操作.在 Node.js 中读取文件.访问数据库.网络请求等等都有可能是异步的.对于 Node.js 新人或者从其他语言背景迁移到 Node.js