QQ玩一玩广告与音效使用总结

QQ玩一玩广告与音效使用总结

1、经常遇到的问题

观看视频广告时背景音乐没有关闭
视频广告看完背景音乐重叠
游戏回到后台再回到前台时背景音乐重叠

开发环境

CocosCreator V2.0.5
手Q版本 V7.9.0.3820（目前市场中最新版本）
qqPlayCore.js buildTime:'Fri Nov 09 2018 13:20:45 GMT+0800 (GMT+08:00)'上出现，此版本的qqPlayCore.js也是最新能正常使用的版本。

顺便提一下，最新版本的qqPlayCore.js buildTime:'Wed Nov 21 2018 15:26:39 GMT+0800 (GMT+08:00)' 使用时会出现 “Canvas fillStyle 传入不合法数据”的警告弹窗但不影响其他接口的使用。

解决方案：

1、qqPlayCore.js 回退到之前最新版本 buildTime:'Fri Nov 09 2018 13:20:45 GMT+0800 (GMT+08:00)’ 2、如果非要使用新版本可以设置不显示错误弹框，默认显示错误弹框。 BK.Script.errorAlertOpen = false

2、音频使用封装

游戏启动页(Home场景下)设置GlobalAudio 为常驻节点并挂载音效脚本组件

全局音效常驻节点

音效脚本组件 AudioClip.js

这里播放音效直接使用的是CocosCreator引擎提供的 AudioEngine 组件

1/**
2 * @author Javen 
3 * @copyright 2018-10-31 16:24:42 javendev@126.com 
4 * @description  音效与背景音乐组件
5 */
6var Global = require("./Global");
7cc.Class({
8  extends: cc.Component,
9  properties: {
10
11    onClickAudio: {
12      default: null,
13      tooltip: "按钮点击音效",
14      type: cc.AudioClip,
15    },
16
17    bgmAudio: {
18      default: null,
19      tooltip: "背景音效",
20      type: cc.AudioClip
21    },
22
23  },
24
25  playClickAudio() {
26    if (Global.isAudio) {
27      cc.audioEngine.play(this.onClickAudio, false, 1);
28    }
29
30  },
31
32  playBgmAudio() {
33    if (Global.isAudio) {
34      cc.audioEngine.play(this.bgmAudio, true, 1);
35    }
36  },
37
38  //暂停现在正在播放的所有音频
39  pauseAll() {
40    cc.audioEngine.pauseAll();
41  },
42  //恢复播放所有之前暂停的所有音频
43  resumeAll() {
44    cc.audioEngine.resumeAll();
45  },
46  stopAll() {
47    cc.audioEngine.stopAll();
48  },
49
50  // onLoad() {},
51  // start () {},
52
53  // update (dt) {},
54});

那么问题来了，全局如何使用？

我们来自定义一个组件CustomComponent.js，其他的组件如果要使用到音效就继承此组件。具体实现如下

1/**
2 * @author Javen 
3 * @copyright 2018-10-26 16:13:11 javendev@126.com 
4 * @description 自定义组件
5 */
6
7cc.Class({
8    extends: cc.Component,
9    start() {
10        try {
11            //查询WebSocket节点并获取音效组件WebSocket
12            this._webSocket = cc.find("WebSocket").getComponent("WebSocket");
13            //查询GlobalAudio节点并获取音效组件AudioClip
14            this._audioClip = cc.find("GlobalAudio").getComponent("AudioClip");
15        } catch (error) {}
16    },
17    //下面的方法可要可无，只是为了方便在其他组件中调用，不用写重复的代码。
18    playClickAudio: function () {
19        if (this._audioClip) {
20            this._audioClip.playClickAudio();
21        }
22    },
23    playBgmAudio: function () {
24        if (this._audioClip) {
25            this._audioClip.playBgmAudio();
26        }
27    },
28});

使用案例

1/**
2 * @author Javen 
3 * @copyright 2018-12-07 15:51:19 javendev@126.com 
4 * @description QQ玩一玩示例 
5 */
6
7let customComponent = require("./common/CustomComponent");
8
9cc.Class({
10    extends: customComponent,//继承至自定义的组件 customComponent
11
12    properties: {},
13    
14    btnClick(event, data) {
15        this.playClickAudio(); //CustomComponent 父类中的方法
16    }
17
18    // onLoad () {},
19
20    start() {
21        this._super();//切忌不要忘记 否者playBgmAudio、playClickAudio 这些父类的方法执行时会提示没有定义
22        this.playBgmAudio();//CustomComponent 父类中的方法
23    },
24
25    // update (dt) {},
26});

3、视频广告以及banner广告封装

注意看注释，上面提到的前两个问题可以完美的解决

封装的代码已开源-封装源码地址-使用案例源码地址

1/**
2 * 展示广告 Global.videoAd.show();
3 * 预加载视频广告
4 */
5function loadVideoAd() {
6    if (!Global.videoAd && cc.sys.platform == cc.sys.QQ_PLAY) { //如果没有广告资源就加载新的视频广告
7        let videoAd = BK.Advertisement.createVideoAd();
8        videoAd.onError(function (err) {
9            //加载失败
10            log("BKTools onError code:" + err.code + " msg:" + err.msg);
11            Global.viewAdLoadCount += 1;
12            if (Global.viewAdLoadCount < 4) {
13                loadVideoAd();
14            }
15        });
16
17        videoAd.onPlayFinish(function () {
18            //播放结束
19            log("BKTools onPlayFinish...");
20            Global.videoAd = undefined;
21        });
22        videoAd.onClose(function () {
23            //播放结束
24            log("BKTools onClose...");
25            Global.videoAd = undefined;
26        });
27
28        videoAd.onLoad(function () {
29            //加载成功
30            log("BKTools onLoad");
31            Global.videoAd = videoAd;
32            Global.videoAdLoadCount = 0;
33        });
34    } else {
35        log("BKTools 已存在广告资源 或者 非QQ玩一玩平台....");
36    }
37}
38
39/**
40 * 展示广告 Global.bannerAd.show();
41 * 预加载banner广告
42 */
43function loadBannerAd(viewId) {
44    if (!viewId) {
45        viewId = 1001;
46    }
47    if (!Global.bannerAd && cc.sys.platform == cc.sys.QQ_PLAY) { //如果没有广告资源就加载新的视频广告
48        let bannerAd = BK.Advertisement.createBannerAd({
49            viewId: viewId,
50        });
51        bannerAd.onError(function (err) {
52            //加载失败
53            log("BKTools onError code:" + err.code + " msg:" + err.msg);
54            Global.bannerAdLoadCount += 1;
55            if (Global.bannerAdLoadCount < 4) {
56                loadBannerAd(viewId);
57            }
58        });
59        bannerAd.onLoad(function () {
60            //加载成功
61            log("BKTools onLoad");
62            Global.bannerAd = bannerAd;
63            Global.viewAdLoadCount = 0;
64        });
65    } else {
66        log("BKTools 已存在banner资源 或者 非QQ玩一玩平台....");
67    }
68}
69
70function showBannerAd() {
71    if (Global.bannerAd) {
72        Global.bannerAd.show();
73    } else {
74        log("BKTools 不存在banner资源....");
75        loadBannerAd();
76    }
77}
78
79function hideBannerAd() {
80    if (Global.bannerAd) {
81        Global.bannerAd.hide();
82        Global.bannerAd = undefined;
83        loadBannerAd();
84    } else {
85        log("BKTools 不存在banner资源无法关闭....");
86    }
87}

使用案例

1case "adVideo":
2    let videoAd = Global.videoAd;
3    if (videoAd) {
4        videoAd.show();//展示视频广告
5        videoAd.onPlayStart(function () {
6            BKTools.log("video ad onPlayStart...");
7            //QQ玩一玩或者是引擎的bug 播放广告时没有关闭背景音效需要手动处理
8            if (Global.isAudio) {
9                //this._audioClip.pauseAll();
10                this._audioClip.stopAll();
11            }
12        }.bind(this));
13        videoAd.onPlayFinish(function () {
14            //播放结束
15            BKTools.log("video ad onPlayFinish...");
16            //业务逻辑处理.....
17        }.bind(this));
18        videoAd.onClose(function () {
19            BKTools.log("video ad  onClose...");
20            if (Global.isAudio) {
21                //this._audioClip.resumeAll();
22                this._audioClip.playBgmAudio();//恢复背景音效
23            }
24        }.bind(this));
25    } else {
26        BKTools.log("暂无广告资源.....");
27        BKTools.loadVideoAd();//加载视频广告
28    }
29    break;
30case "banner":
31    BKTools.showBannerAd(1002);//显示banner广告
32    break;
33case "hideBanner":
34    BKTools.hideBannerAd();//隐藏banner广告
35    break;

好了，到此已解决了前两个问题。游戏回到后台再回到前台时背景音乐重叠的问题如何解决呢？此时你可能会想到游戏是否有提供游戏生命周期的回调呢？

翻翻文档不难发现是有提供的 —— 最新版本的生命周期函数文档

4、QQ玩一玩生命周期函数事件监听

在CocosCreator中如何实现QQ玩一玩生命周期函数事件监听？最后一个问题的解决方案注意看注释

这里可以使用常驻节点来实现，具体实现如下

生命周期函数事件监听常驻节点设置

1/**
2 * @author Javen 
3 * @copyright 2018-10-22 15:04:24 javendev@126.com 
4 * @description QQPlay 事件监听
5 */
6
7let BKTools = require("./BKTools");
8let Utils = require("./Utils");
9let Global = require("./Global");
10let CustomComponent = require("./CustomComponent");
11cc.Class({
12    extends: CustomComponent,
13
14    // properties: {},
15
16    // onLoad () {},
17
18    start() {
19        this._super();
20        if (cc.sys.platform == cc.sys.QQ_PLAY) {
21            BKTools.log('QQPlayerEvent QQ玩一玩平台');
22            this._onQQPlayEvent();
23        } else {
24            BKTools.log('QQPlayerEvent 非QQ玩一玩平台');
25        }
26    },
27    _enterForegroundListener() {
28        BKTools.log('进入前台');
29        this._audioClip.playBgmAudio();//重新播放音效
30    },
31    _enterBackgroundListener() {
32        BKTools.log('退出前台');
33        //this._audioClip.pauseAll();
34        this._audioClip.stopAll();//测试发现有时候背景音效不会重叠,为了彻底解决此问题就停止所有音效。缺点是在恢复播放时需要单独处理播放进度问题 可以通过 getCurrentTime 获取当前的播放时间, 在恢复时setCurrentTime再调用play
35    },
36    _gameCloseListener() {
37
38        //上报操作
39        let score = Utils.getRandomInt(0, 100);
40        BKTools.log('关闭游戏:' + score);
41        BKTools.uploadScore(score, function (errorCode) {
42            if (errorCode == 0) {
43                BKTools.log("数据上报成功......");
44            } else {
45                BKTools.log("数据上报失败......");
46            }
47        });
48    },
49    _maximizeListener() {
50        BKTools.log('最大化');
51    },
52    _minimizeListener() {
53        BKTools.log('最小化');
54    },
55    _onNetworkChangeListener(data) {
56        BKTools.log(data);
57        if (data.state == BK.NetworkState.NoneToMobileNetwork) {
58            BKTools.log('从无网络到移动网络');
59        } else if (data.state == BK.NetworkState.NoneToWifi) {
60            BKTools.log('无网络到WiFi网络');
61        } else if (data.state == BK.NetworkState.MobileNetworkToWifi) {
62            BKTools.log('移动网络到WiFi网络');
63        } else if (data.state == BK.NetworkState.MobileNetworkToNone) {
64            BKTools.log('移动网络到无网络');
65        } else if (data.state == BK.NetworkState.WifiToNone) {
66            BKTools.log('WiFi到无网络');
67        } else if (data.state == BK.NetworkState.WifiToMobileNetwork) {
68            BKTools.log('WiFi到移动网络');
69        }
70    },
71    _onShareCompleteListener(data) {
72        //shareDest 0为QQ 1为QZone 2为微信 3为朋友圈  isFirstShare永远为true
73        BKTools.log("分享完成： retCode:" + data.retCode + '，isFirstShare:' + data.isFirstShare + '，dest:' + data.shareDest);
74    },
75    _onShareListener() {
76        BKTools.log("调用分享接口时回调,分享了...");
77        //无法自定义分享
78    },
79    _onQQPlayEvent() {
80        BK.onEnterForeground(this._enterForegroundListener.bind(this));
81        BK.onEnterBackground(this._enterBackgroundListener.bind(this));
82        BK.onGameClose(this._gameCloseListener.bind(this));
83        BK.onMaximize(this._maximizeListener.bind(this));
84        BK.onMinimize(this._minimizeListener.bind(this));
85        BK.onNetworkChange(this._onNetworkChangeListener.bind(this));
86        BK.onGameShareComplete(this._onShareCompleteListener.bind(this));
87        BK.onGameShare(this._onShareListener.bind(this));
88    },
89
90
91    // update (dt) {},
92});

5、源码

CocosCreator开发小游戏示例: Brickengine_Guide

QQPlay为旧版本QQ玩一玩示例
QQPlay_New为新版本QQ玩一玩示例

完

到这里就介绍完了，个人能力有限如有错误欢迎指正，如有遗漏欢迎补充。如有疑问欢迎留言一起交流讨论。

QQ玩一玩广告与音效使用总结

1、经常遇到的问题

2、音频使用封装

3、视频广告以及banner广告封装

4、QQ玩一玩生命周期函数事件监听

5、源码

评论区

相关推荐

QQ玩一玩广告与音效使用总结

1、经常遇到的问题

2、音频使用封装

3、视频广告以及banner广告封装

4、QQ玩一玩生命周期函数事件监听

5、 源码

评论区

相关推荐

5、源码