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教程