Laya商业级教程-对接QQ小游戏sdk(5分钟掌握)

qq小游戏开发
视频演讲稿:

Laya商业教程

LAYA版本2.5,开发语言ts

我们以官方的2d案例为模板，对接QQSDK

QQ平台案例功能点：
banner，激励视频，插屏，游戏盒子，积木广告,分享功能

我们在模板上添加了2个按钮，开始游戏和分数翻倍

并且订阅了点击事件

导入TS类库到scirpt目录

打开banner广告

GameControl.ts

onEnable方法增加以下代码

BannerAndVideo1.OpenBanner(this, null);

真机运行结果

点击更多游戏，显示游戏盒子
GameUI.ts

moregameClcik() {
//qqsdk
BannerAndVideo1.createAppBox();
}
真机运行结果

游戏结束时打开积木盒子和banner
stopGame()
BannerAndVideo1.OpenBanner(this);
BannerAndVideo1.CreateBlockAd();

游戏开始时清除广告组件
startGame()
//qqsdk
BannerAndVideo1.Clear();
BannerAndVideo1.ClearBlockAd();

设置分享页面，预加载激励视频
在游戏的初始化方法里
GameControl.ts
constructor（）
//预加载激励视频
BannerAndVideo1.InitVideo();
设置点击右上角三个点出现分享菜单
if (Laya.Browser.onQQMiniGame)
Laya.Browser.window.qq.showShareMenu({
showShareItems: [‘qq’, ‘qzone’, ‘wechatFriends’, ‘wechatMoment’]
})

插屏

激励视频，分数翻倍
gameui.ts
scoreMul2Click()
BannerAndVideo1.ShowVideo(this, this.onvideoEnd)

onvideoEnd(isok) {console.log(this);if (isok) {Platform.ShowToast('奖励X2');this._score *= 2;this.scoreLbl.changeText("分数：" + this._score);}elsePlatform.ShowToast('看完视频才有奖励');
}

插屏广告

进行视频演示最后结果

QQ小游戏开发者文档
https://q.qq.com/wiki/develop/game/API/

现在进行广告组件的讲解，广告组件的全部代码在文章末尾

为了能在真机能成功测试，开发者务必准备好广告ID和APPID

在API调用前都会先做兼容处理，防止空指针异常，比如低版本的QQ是不支持游戏盒子和积木广告的

在打开banner时，因为广告组件异步加载的，用了canshowbanner来约束是否显示
主要是为了避免关闭广告之后还进行显示

插屏广告的调用结果会有调用失败的可能，因为平台底层限制了调用频率且在游戏开始1分钟后才能调用
本期讲解完毕；
课程资料可在进Q群下载

QQ广告类
import { EventMgr } from “…/JFrameWork/EventMgr”;
import { EventType } from “…/JFrameWork/EventType”;
import { Platform } from “./plaftform”;

export default class BannerAndVideo1 {

private static curVideo;private static curbanner;
private static curBannerId = 0;private static bannerAdUnitId = ["8f8220b835c41349f98a008150a3da91"];
private static videlAdUnitId = ["d59e4671547cd398036f971156a57458"];private static InterstitialAdID = 'cab9d10be16322dd3f82c04b5f1aa75d';
private static adboxId = '5ba0a0206e90d902331b8926b5e06e39';private static BlockAdId = '9b9fc1fb33ad3d3c1ed0063c1adf4e9c';
//banner：8f8220b835c41349f98a008150a3da91
// 视频：d59e4671547cd398036f971156a57458
//插屏：cab9d10be16322dd3f82c04b5f1aa75d
//盒子：5ba0a0206e90d902331b8926b5e06e39
//积木广告：9b9fc1fb33ad3d3c1ed0063c1adf4e9c
//视屏广告是否加载成功
private static videoLoadCom: boolean = false;private static videoCallback: Function;
private static videoCallder;
//预先加载视屏广告
public static InitVideo() {if (Laya.Browser.onQQMiniGame != true)return;let videoId = BannerAndVideo1.videlAdUnitId[0];console.log('初始化视频', videoId);//激励视频广告组件。激励视频广告组件是一个原生组件，并且是一个全局单例//https://q.qq.com/wiki/develop/game/API/ad/RewardedVideoAd.html#loadif (BannerAndVideo1.curVideo == null) {BannerAndVideo1.curVideo = Laya.Browser.window.qq.createRewardedVideoAd({ adUnitId: videoId });BannerAndVideo1.curVideo.onLoad(() => {console.log('激励视频 广告加载成功');this.videoLoadCom = true;});BannerAndVideo1.curVideo.onError(err => {console.log("激励视屏加载失败:" + err);this.videoLoadCom = false;});console.log('订阅失败关闭事件');BannerAndVideo1.curVideo.onClose(res => {console.log("激励视频关闭:" + res.isEnded);let isEnd = (res && res.isEnded || res === undefined);if (isEnd) {this.videoCallback && this.videoCallback.call(BannerAndVideo1.videoCallder, true)}else { this.videoCallback && this.videoCallback.call(BannerAndVideo1.videoCallder, false) }// this.curVideo.offClose();// EventMgr.instance.event(EventType.AD_VIDEO_CLOSE_EVENT);});}BannerAndVideo1.curVideo.load();
}public static ShowVideo(callder, callback: Function) {//qqif (Laya.Browser.onQQMiniGame != true) {callback.call(callder, false);return;}BannerAndVideo1.videoCallder = callder;if (BannerAndVideo1.videoLoadCom) {console.log("showVideoAd:" + BannerAndVideo1.videoLoadCom);BannerAndVideo1.videoCallback = callback;BannerAndVideo1.curVideo.show().catch(err => {console.log(err);Platform.ShowToast('视频拉取失败，请重试');callback.call(callder, false);});}else {console.log("没能拉取激励视频");callback.call(callder, false);//WXSdk.Game_Share(callback);}}static canshowbanner = true;static bannerOnLoadCount = 0;
static firstReigstBannerEvent = false;static banner_errCb;
static banner_onloadCb;
static banner_onResizeCb;
/**打开banner * https://q.qq.com/wiki/develop/game/API/ad/BannerAd.html*/
public static OpenBanner(callder, callVack: Function = null, iswait: boolean = false) {if (Laya.Browser.onQQMiniGame != true) return;BannerAndVideo1.bannerOnLoadCount = 0;//估计banner也是全局单例,产生了冗余的回调事件if (this.curbanner) {this.curbanner.offResize(BannerAndVideo1.banner_onResizeCb);this.curbanner.offLoad(BannerAndVideo1.banner_onloadCb);this.curbanner.offError(BannerAndVideo1.banner_errCb);this.curbanner.destroy();}BannerAndVideo1.canshowbanner = true;//this.curBannerId++;//  if (this.curBannerId > 1) this.curBannerId = 0;let idd = BannerAndVideo1.bannerAdUnitId[0];let info = Laya.Browser.window.qq.getSystemInfoSync();let topvalue = info.windowHeight;//let widthvalue = info.windowWidth;console.log("baner adUnitId:" + idd);//750x160let newBanner = Laya.Browser.window.qq.createBannerAd({adUnitId: '8f8220b835c41349f98a008150a3da91',style: {width: 460,left: 0,top: 0}})BannerAndVideo1.banner_errCb = (err) => {console.log('banner err');console.log(err);callVack.call(null);};newBanner.onError(BannerAndVideo1.banner_errCb);BannerAndVideo1.banner_onloadCb = () => {BannerAndVideo1.bannerOnLoadCount += 1;console.log("新的", BannerAndVideo1.bannerOnLoadCount);this.curbanner = newBanner;if (this.canshowbanner && !iswait) {console.log("banner show");this.curbanner.show();}else {console.log("banner hide");this.curbanner.hide();}}newBanner.onLoad(BannerAndVideo1.banner_onloadCb);BannerAndVideo1.banner_onResizeCb = (size) => {let info = Laya.Browser.window.qq.getSystemInfoSync();// console.log(info);// 底部居中显示newBanner.style.top = info.windowHeight - size.height;// newBanner.style.width = info.windowWidth;// newBanner.style.top = info.windowHeight - this.curbanner.style.realHeight - 5;// console.log('style.top');// console.log(newBanner.style.top);// realHeightconsole.log(size);console.log(newBanner.style);console.log(Laya.stage.height, info.windowHeight, newBanner.style.realHeight);//var hight: number = Laya.stage.height / info.windowHeight * newBanner.style.realHeight;var hight: number = Laya.stage.height / info.windowHeight * size.height;if (callVack != null) {callVack.call(callder, hight);}}/**IOS下无法关闭 所以设置在顶端 */newBanner.onResize(BannerAndVideo1.banner_onResizeCb);}static Clear() {Laya.timer.clearAll(BannerAndVideo1);Laya.Tween.clearAll(BannerAndVideo1);BannerAndVideo1.canshowbanner = false;if (Laya.Browser.onQQMiniGame != true) return;//创建新的 BannerAd，销毁旧的 BannerAd//每个 BannerAd 实例在创建后会去拉取一次广告数据并进行渲染，//在此之后不再更新。如果想要展示其他内容的 BannerAd，//需要创建新的 BannerAd 并将之前的 BannerAd 进行销毁。if (BannerAndVideo1.curbanner) {console.log('banner hide');//BannerAndVideo1.curbanner.style.top = 3000;// if (GameSample.commonData.OnIOS) {//     this.ClearOpenBanner_OnIos();// }// elseBannerAndVideo1.curbanner.hide();}}
public static showbanner() {console.log('showbanner');//  if (!GameSetting.isWx) return;if (Laya.Browser.onQQMiniGame != true) return;BannerAndVideo1.canshowbanner = true;this.OpenBanner(this, null, false);// if (BannerAndVideo1.curbanner) BannerAndVideo1.curbanner.show();
}static CheatBanner(btn: Laya.UIComponent, viewHeight: number, yposAdd: number, complete: Function = null) {let ischeat = false;if (ischeat == false) {console.log("ignorecheat");BannerAndVideo1.OpenBanner(this, null);}else {btn.bottom = NaN;btn.y = viewHeight - btn.height - 40;BannerAndVideo1.OpenBanner(this, (height) => {if (!height) {return;} else {//  btn.y = Laya.stage.height - btn.height - 100;console.log("cheatstart", "bottom:100");btn.mouseEnabled = false;var end = viewHeight - height - btn.height - 20 + yposAdd;// let end=yposAdd// console.log("y:" + end);//  console.log(UseModule.CurrentAccount.CurAccountData.cheattime);Laya.timer.once(1000, this, () => {btn.mouseEnabled = true;this.showbanner();Laya.Tween.to(btn, { y: end }, 500, null, Laya.Handler.create(this, () => {if (complete != null) {complete();}}))})}}, true);}
}// 广告盒子组件。广告盒子组件是一个原生组件，层级比普通组件高。
//广告盒子是一个单例（小游戏端是全局单例，小程序端是页面内单例，在小程序端的单例对象不允许跨页面使用）。
//默认是隐藏的调用 AppBox.load()加载数据，AppBox.show() 将其显示。 AppBox.destroy()销毁实例，销毁后需要重新调用qq.createAppBox()创建实例。static curVideoadBox;
/**盒子组件 */
public static createAppBox() {if (Laya.Browser.onQQMiniGame != true) return;//兼容低版本QQif (Laya.Browser.window.qq['createAppBox'] == null) {console.log('当前版本不支盒子组件');return;}BannerAndVideo1.curVideoadBox = Laya.Browser.window.qq.createAppBox({ adUnitId: BannerAndVideo1.adboxId })BannerAndVideo1.curVideoadBox.load().then((res) => {console.log('appbox成功')    // resolvedBannerAndVideo1.curVideoadBox.show()}).catch((res) => {console.log('appbox reject')        // rejectconsole.log(res)})}private static _InterstitialAdObj;
/**插屏 * * 插屏广告组件默认是隐藏的，因此可以提前创建，* 以提前初始化组件。建议在小程序页面的 onReady 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。插屏广告组件是自动拉取广告并进行更新的，即在调用qq.createInterstitialAd之后会立马触发一次load。在组件创建后会拉取一次广告，用户关闭广告后会去拉取下一条广告，即在用户关闭广告之后，会立马触发一次load。*/
public static CreateInterstitialAd() {if (Laya.Browser.onQQMiniGame != true) return;//兼容低版本QQif (Laya.Browser.window.qq['createInterstitialAd'] == null) {console.log('当前QQ版本不支持插屏');return}BannerAndVideo1._InterstitialAdObj = Laya.Browser.window.qq.createInterstitialAd({adUnitId: 'cab9d10be16322dd3f82c04b5f1aa75d'});console.log('插屏创建成功');BannerAndVideo1._InterstitialAdObj.onLoad((res) => {console.log('m_InterstitialAd成功')    // resolvedBannerAndVideo1._InterstitialAdObj.show()})BannerAndVideo1._InterstitialAdObj.onError((res) => {console.log('m_InterstitialAd erro')    // resolvedconsole.log(res)})}private static _BlockAd;
/**积木盒子 */
public static CreateBlockAd() {if (Laya.Browser.onQQMiniGame != true) return;//兼容低版本QQif (Laya.Browser.window.qq['createBlockAd'] == null) {console.log('当前QQ版本不支持积木');return}BannerAndVideo1._BlockAd = Laya.Browser.window.qq.createBlockAd({adUnitId: this.BlockAdId,size: 5,orientation: 'landscape',style: {left: 16,top: 16}})console.log('CreateBlockAd.show');BannerAndVideo1._BlockAd.show();BannerAndVideo1._BlockAd.onLoad((res) => {//console.log('CreateBlockAd onload show');console.log(res);BannerAndVideo1._BlockAd.show()});BannerAndVideo1._BlockAd.onError((res) => {console.log('_BlockAd error', res)console.log(res)});BannerAndVideo1._BlockAd.onResize(size => {console.log('_BlockAd onResize');console.log(size);let info = Laya.Browser.window.qq.getSystemInfoSync();// console.log(info);// 底部居中显示//  BannerAndVideo1._BlockAd.style.top = info.windowHeight - size.height;//中间显示let scale = 0.5;//top scale 0////bottom 1//  console.log('windowHeight', info.windowHeight);//相对屏幕中间 上移动200//width  number  积木广告的真实宽度BannerAndVideo1._BlockAd.style.top = info.windowHeight * scale - 200;// console.log(BannerAndVideo1._BlockAd.style);//console.log(BannerAndVideo1._BlockAd);BannerAndVideo1._BlockAd.style.left = info.windowWidth * 0.5 - size.width * 0.5;})// BannerAndVideo1._BlockAd.load();
}public static ClearBlockAd() {if (Laya.Browser.onQQMiniGame != true) return;console.log('ClearBlockAd 积木');if (BannerAndVideo1._BlockAd != null)BannerAndVideo1._BlockAd.hide();
}

}

Laya商业级教程-对接QQ小游戏sdk(5分钟掌握)相关推荐

Laya教程-对接抖音小游戏sdk(10分钟掌握)
抖音小游戏开发视频演讲稿 LAYA对接抖音小游戏(10分钟掌握) 演讲稿: 本节内容讲的是:Laya对接抖音小游戏平台功能点包括: banner广告,激励视频,插屏广告,渠道游戏列表展示,视频录制 ...
vivo小游戏sdk对接 Laya(5分钟掌握)
vivo云测 vivo小游戏开发视频演讲稿 laya教程-对接vivo平台(10分钟掌握) 演讲稿: 本节内容讲的是:Laya引擎对接vivo平台讲解顺序依次是SDK对接,安装vivo发布环境,测 ...
cocos creator 接QQ小游戏 BannerAd 广告sdk
cocos creator 接QQ小游戏 BannerAd 广告sdk 开发者工具 0.1.26 版本开始支持调试广告组件首先,你需要初始化广告,判断什么的你自己加,我就不写很详细 //方法外的全局 ...
使用SDK快速接入各大平台快游戏微信小游戏 QQ小游戏使用方法-附源码下载地址
使用SDK快速接入各平台快游戏微信小游戏 QQ小游戏使用方法引入SDK文件 // 该方式引入可以直接使用qgsdk<script src="qg-sdk.min.1.0.4.js ...
cocos creator 接QQ小游戏小程序RewardedVideoAd 激励视频广告sdk
cocos creator 接QQ小游戏小程序RewardedVideoAd 激励视频广告sdk 开发者工具 0.1.26 版本开始支持调试广告组件话说你们看完为什么不留言点赞? 首先,你需要初始化 ...
QQ小游戏 BannerAd 创建banner广告组件 API
BannerAd 创建banner广告组件 qq.createBannerAd(Object object) BannerAd qq.createBannerAd(Object object) 创建 ...
QQ小游戏 AppBox 创建广告盒子组件 API
AppBox QQ小游戏创建广告盒子组件 qq.createAppBox(Object object) AppBox qq.createAppBox(Object object) 创建广告盒子组件.基 ...
QQ小游戏 RewardedVideoAd 创建激励视频广告组件 API
RewardedVideoAd 创建激励视频广告组件 qq.createRewardedVideoAd(Object object) RewardedVideoAd qq.createRewarded ...
Cocos Creator 3D发布QQ小游戏并打APK包
Cocos Creator 3D版本 : 1.2.0 Visual Studio版本:2017,typeScripts. 1. 构建QQ小游戏 1. 在菜单栏的项目里打开构建发布因为QQ跟微信的平台 ...

Laya商业级教程-对接QQ小游戏sdk(5分钟掌握)

Laya商业级教程-对接QQ小游戏sdk(5分钟掌握)相关推荐

最新文章

热门文章