zoukankan      html  css  js  c++  java
  • (转)CocosCreator零基础制作游戏《极限跳跃》九、为游戏添加声音音效功能

    CocosCreator零基础制作游戏《极限跳跃》九、为游戏添加声音音效功能

     

    游戏的声音很重要,我们在这个游戏中需要加2个音效,一个背景音乐。。。第一个音效在玩家与障碍物碰撞的地方加碰撞音效,第二个在玩家主角坠落到屏幕底部的时候加游戏结束的音效。然后游戏开始的时候加载背景音乐。

     

    我们一开始在MainScene场景中的声音图标节点就是我们用来控制声音的开关。。

    首先修改guawileft.js脚本,添加音效资源,在onload设置声音大小。代码:

    01 //guanwileft.js
    02  
    03    properties: {
    04          
    05         times: 0,
    06         // 碰撞音效资源
    07         pengAudio: {
    08             default: null,
    09             url: cc.AudioClip
    10         },
    11     },
    12     // use this for initialization
    13     onLoad: function () {
    14          
    15             this.moveRight();
    16             cc.audioEngine.setEffectsVolume ( 0.2 );//设置音效声音大小
    17       
    18        
    19     },

    同理在guaiwuright.js脚本也是这样添加。。

    为障碍物的2个脚本添加好代码后,我们需要修改我们的两个障碍物预制体。绑定音效资源,这里以zhangaiwuleft预制体为例。双击zhangaiwuleft预制体,添加声音资源绑定。如图:

    QQ20160530-1@2x.png

    zhangaiwuright预制体同理也是这样添加声音。

    碰撞音效加载好后,我们为游戏结束加个音效。打开GAME.js脚本。在 properties中添加属性。代码如下:

    01         // 背景音乐资源
    02         bgmusic: {
    03             default: null,
    04             type: cc.Node
    05         },
    06         // 游戏音乐资源
    07         gameAudio: {
    08             default: null,
    09             url: cc.AudioClip
    10         },
    11         // 游戏结束音乐资源
    12         gameOverAudio: {
    13             default: null,
    14             url: cc.AudioClip
    15         },

    添加好代码后,我们双击打开MainScene场景开始为属性绑定资源和节点。。如图:

    QQ20160530-2@2x.png

    可以跑起来测试下我们的声音有没有了。。这就完了吗?当然不是,我们的声音图标还没有用到啊!!

    下面为我们的声音图标节点加一个脚本,新建脚本AudioScript.js。代码如下:

    01 //AudioScript.js
    02  
    03 cc.Class({
    04     extends: cc.Component,
    05     properties: {
    06         //是否开启音乐  默认开启
    07         isOpen: true,
    08         // 游戏音乐资源
    09         gameAudio: {
    10             default: null,
    11             url: cc.AudioClip
    12         },
    13          
    14     },
    15     // use this for initialization
    16     onLoad: function () {
    17         this.isOpen = true;//开启音乐
    18         cc.audioEngine.playMusic ( this.gameAudio, true );
    19          
    20     },
    21     //检查音乐开启状态
    22     checkMusic:function(){
    23          
    24         return isOpen;
    25     },
    26     //获取点击坐标
    27     setCp:function(pos){
    28          
    29         var rec = cc.rectContainsPoint(this.node.getBoundingBoxToWorld(),pos) ;
    30       
    31         if(rec){
    32             //检查音乐开启状态
    33             //如果音乐开启了则关闭音乐和音效
    34             if(this.isOpen){
    35              //if (cc.audioEngine.isMusicPlaying()) {
    36                 cc.audioEngine.pauseMusic();//暂停正在播放音乐
    37                 cc.log("暂停正在播放音乐");
    38                 //this.node.addChild("Texture/menu_music_off.png");
    39                 this.isOpen = false;
    40                 }
    41             else {
    42               // cc.log("music is not playing");
    43               cc.audioEngine.resumeMusic ();//恢复背景音乐
    44               cc.log("恢复背景音乐");
    45               this.isOpen = true;
    46              }
    47               
    48         }
    49     },
    50      
    51     // called every frame, uncomment this function to activate update callback
    52     // update: function (dt) {
    53          
    54     // },
    55 });

    代码里实现了一个音乐播放的状态,用来给我们判断是否播放了。播放了图标显示声音图标,没有播放显示静音图标。

    1 var rec = cc.rectContainsPoint(this.node.getBoundingBoxToWorld(),pos) ;

    此处用来判断声音图标的包围盒和点击坐标的比较,如果为true则表示声音图标被点击到了,如果声音图标被点击则判断当前声音播放状态,并改变状态。声音图标节点显示如图:

    QQ20160530-3@2x.png

    声音节点绑定好脚本后,我们继续修改GAME.js脚本中的代码,为AudioScript.js中的方法setCp:function(pos)传参数。

    首先在顶部添加引用代码,然后在点击事件添加点击的检测方法,然后update实现更新状态。代码如图:

    cocoscreator声音系统

    QQ20160530-5@2x.png

    QQ20160530-6@2x.png

     

    这里我就不贴代码了,大家手打下。。。到此我们的声音系统也添加完毕了。。。对了,还少一点,声音状态切换的时候声音图标也要改变啊。。。这里大家自己解决。。

     

    原文地址:https://www.byjth.com/jixiantiaoyue/74.html

  • 相关阅读:
    Windows XP下 Android开发环境 搭建
    Android程序的入口点
    在eclipse里 新建android项目时 提示找不到proguard.cfg
    64位WIN7系统 下 搭建Android开发环境
    在eclipse里 新建android项目时 提示找不到proguard.cfg
    This Android SDK requires Android Developer Toolkit version 20.0.0 or above
    This Android SDK requires Android Developer Toolkit version 20.0.0 or above
    Android requires compiler compliance level 5.0 or 6.0. Found '1.4' instead
    Windows XP下 Android开发环境 搭建
    Android程序的入口点
  • 原文地址:https://www.cnblogs.com/wodehao0808/p/9122848.html
Copyright © 2011-2022 走看看