《Cocos Creator游戏实战》微信小游戏激励视频接入步骤及音乐中断恢复

微信小游戏激励视频接入步骤及音乐中断恢复

获取广告位ID

创建节点

编写代码

笔者之前已经在接入微信小游戏广告这篇文章中详细讲解了Banner广告接入步骤以及一些广告接入的注意点。在这篇教程中，我们将来看下如何接入激励视频广告。

运行效果如下：

Cocos Creator版本：2.2.2

后台回复"激励视频"，获取该项目完整文件：

获取广告位ID

首先我们要去微信小游戏后台创建一个激励视频广告位，并获取广告位ID：

关于广告位的新建步骤笔者这里就不详述了，大家可以去看下这篇文章：接入微信小游戏广告。

点击右边的获取代码，我们就可以看到官方给我们的代码了，现在让我们来看下如何在项目中进行使用。

创建节点

1. bg为Sprite类型节点，作为背景。

2. video btn是一个按钮节点，用于呼出激励视频。

3. board节点用于显示激励视频的奖励结果，默认隐藏，只有等用户关闭激励视频后才会显示。文本内容显示在ad result子节点上(Label类型)，close btn子节点用于再次隐藏board节点。

编写代码

新建一个Video.js脚本，在properties中添加两个属性：

// Video.js
properties: {
    bgAudio: {
        default: null,
        type: cc.AudioClip
    },

    adResult: cc.Label
},

1. bgAduio是背景音乐。

2. adResult用来显示用户关闭广告后的奖励情况文本。

onLoad方法编写如下：

// Video.js
onLoad () {
    this.videoAd = null;                // 激励视频广告
    this.initVideoAd();                 // 初始化
    this.playMusic();                   // 播放背景音乐
},

1. 首先创建一个this.videoAd变量。

2. 在initVideoAd方法中进行初始化，其中就用到了官方给我们的一段代码：

initVideoAd() {
    if (typeof wx === 'undefined') {
        return;
    }

    // 创建激励视频广告实例，提前初始化
    this.videoAd = wx.createRewardedVideoAd({
        adUnitId: '这里放你自己的广告位ID'
    });

    this.videoAd .onError(err => {
        console.log('激励视频展示失败');
        console.log(err);

        this.adResult.string = '激励视频展示失败';
        this.adResult.node.parent.active = true;
    });

    this.videoAd.onClose(res => {
        // 用户点击了【关闭广告】按钮
        // 小于 2.1.0 的基础库版本，res 是一个 undefined
        if (res && res.isEnded || res === undefined) {
            // 正常播放结束，可以下发游戏奖励
            console.log('奖励已经发放');

            this.adResult.string = '奖励已经发放';
            this.adResult.node.parent.active = true;
        }
        else {
            // 提前关闭广告，不发放奖励
            console.log('因播放中途退出，所以不下发游戏奖励');

            this.adResult.string = '因播放中途退出，所以不下发游戏奖励';
            this.adResult.node.parent.active = true;
        }

        cc.audioEngine.pauseMusic();            // 先强制暂停
        cc.audioEngine.resumeMusic();           // 再恢复播放音乐 
    });
},

除了放入官方给我们的代码，我们还要实现onError和onClose。前者用来适配广告视频播放失败的情况，后者用来判定在广告被关闭后是否给玩家发放奖励。具体可以参考官方文档。

如果玩家在广告正常播放结束后才关闭广告，那么我们就给玩家发放奖励(开发者需根据自身项目情况在这编写相应代码)，笔者这里就只是在屏幕上显示'奖励已经发放'这个文本。

this.adResult.string = '奖励已经发放';
this.adResult.node.parent.active = true;

注：广告被关闭存在两种情况。第一，广告未播放结束玩家就提前关闭。第二，广告播放完毕后玩家才关闭。

广告关闭后的另一个重要操作就是恢复音乐播放。这时候我们必须先强制暂停音乐，再调用resumeMusic恢复音乐播放。单单调用第二句代码是没有效果的。

cc.audioEngine.pauseMusic();            // 先强制暂停
cc.audioEngine.resumeMusic();           // 再恢复播放音乐

3. 接下来是playMusic方法：

// Video.js
playMusic () {
    // 循环播放背景音乐
    cc.audioEngine.playMusic(this.bgAudio, true);
    cc.audioEngine.setMusicVolume(0.6);
},

很简单，就是循环播放背景音乐并设置了音量大小。

最后是showVideoAd方法，该方法将作为video btn按钮节点的事件函数，用于呼出视频广告：

// Video.js
showVideoAd() {
    if (!this.videoAd) {
        return;
    }

    // 用户触发广告后，显示激励视频广告
    this.videoAd.show().catch(() => {
        // 失败重试
        this.videoAd.load()
        .then(() => videoAd.show())
        .catch(err => {
            console.log(err);
            console.log('激励视频 广告显示失败');

            this.adResult.string = '激励视频 广告显示失败';
            this.adResult.node.parent.active = true;
        })
    });
},

就是官方的代码，笔者只是加了两行代码将失败提示显示到了屏幕上。

要了解更多关于广告接入的细节就去看下这篇文章吧：接入微信小游戏广告

那本节教程就到这，祝大家有所收获~