开发实践|三步搞定爆款直播间小游戏

news2024/9/22 17:38:25

直播间小游戏引爆社交新潮流

近年来,直播行业迅速发展,特别是在抖音平台,直播间的吸引力已远超传统的短视频内容。而在这波直播风潮中,有一种玩法让我格外留意——直播间小游戏。经常刷抖音的朋友应该在直播间看到过这样的场景,主播与粉丝们互动一起参加各式各样的小游戏,这些游戏简单却富有趣味,极大地增强了主播与粉丝之间的互动与粘度。

看到这样的情景,作为开发者怎能坐视不动,于是,我决定动手打造一个直播间小游戏。接下来,我将分享如何使用ZEGO MiniGameEngine SDK 从0到1实现直播间爆款小游戏,希望能为想要入坑的你,提供一些参考与启示,帮助你快速get小游戏互动能力

Demo使用的工具介绍

跟大家介绍直播间小游戏实现流程之前,前置先介绍本次Demo使用的工具,音视频SDK工具包以及小游戏相关的解决方案,它们是我高效实现的开发利器。

  • 直播产品: 即构畅直播
  • 实时音视频产品:即构ZEGO Express SDK
  • 小游戏解决方案: 即构小游戏解决方案

一、开始准备

1、前提条件

在实现小游戏之前,请确保:

  • 已在 ZEGO 控制台 创建项目,获取项目的 AppID,详情请参考 控制台 - 项目信息。
  • 已联系 ZEGO 商务人员开通小游戏服务。
  • 已在项目中集成 ZEGO MiniGameEngine SDK,详情请参考 集成 SDK。

2、示例源码

ZEGO 提供了 示例源码,以供开发者进一步了解如何实现小游戏。

二、初始化SDK

在正式开始接入之前,让我们先来看下小游戏流程实现的时序图:
在这里插入图片描述

1、接入 ZEGO 服务端

请参考 服务端 API - 调用方式 了解如何接入 ZEGO 小游戏产品的服务端,并在您的服务端上实现 查询游戏金币余额 和 兑换游戏金币 等功能,以便您对用户的游戏金币进行管理。

ZEGO 为您提供了服务端示例源码,可供参考。但为了您的数据安全,请勿将其直接用于线上生产环境。

2、获取 Token

当您的用户在使用 ZEGO 小游戏服务时,ZEGO 服务端会根据用户初始化 SDK 时携带的 Token 参数判断用户是否有权限,避免因权限控制缺失或操作不当引发的风险问题。

请参考 使用 Token 鉴权 文档,在您的服务端生成 Token 并返回给向用户客户端。

说明:为便捷项目测试,您可以从 ZEGO 控制台 获取临时 Token,详情请参考控制台的 项目信息 - 辅助工具。但项目上线时,请从您的服务端生成 Token,以保障安全。

3、初始化 SDK

调用 init 接口,传入申请到的 AppID、您服务端生成的 Token、自定义的用户 ID 和用户名称、以及头像图片 URL 参数,初始化 ZEGO MiniGameEngine SDK。

示例代码如下:

// 初始化 ZEGO MiniGameEngine SDKlet appID = 您的 AppID; // AppID 在 [ZEGO 控制台](https://console.zego.im/) 创建项目后获得let token = "your token"; // 从您的服务器获取到的 Tokenlet userInfo = {
    userId: "your user userId", // 自定义的用户 ID,必选,需要与生成 Token 的 userID 保持一致userName: "your user Name", // 自定义的用户名称,必选avatar: "your user avatar" // 用户头像 URL,传输协议需为 HTTPS,可选
};
let instance = await ZegoMiniGameEngine.init(appID, token, userInfo);

三、获取游戏列表

1、注册监听小游戏事件

调用 on 接口注册监听小游戏事件,相关事件在 加载游戏 后通过 ZegoEventHandler 回调返回。

示例代码如下:

const instance = ZegoMiniGameEngine.getInstance();

// 游戏每局结算信息,Json 格式内容
instance.on("gameResult", (data) => {
    // 您的业务逻辑
});

// 在开始游戏场随机匹配半屏或全屏模式游戏前,如果需要配置机器人,会收到这个回调,开发者需要返回机器人的配置信息
instance.on("robotConfigRequire", (data) => {
    // 您的业务逻辑
});

// 游戏加载状态的通知
instance.on("gameLoadStateUpdate", async (data) => {
    // 您的业务逻辑
});

// 通知游戏按钮点击事件
instance.on("actionEventUpdate", (data) => {
    // 您的业务逻辑
});

// token 过期前 30s 触发回调,通常配合方法 updateToken 函数使用
instance.on("tokenWillExpire", async (data) => {
    // 您的业务逻辑    
});

// 通知反加载游戏成功
instance.on("unloaded", (data) => {
    // 您的业务逻辑
});

// 通知玩家需要充值才能继续玩游戏的事件
instance.on("chargeRequire", (data) => {
    // 您的业务逻辑
});

// 通知当前玩家的状态(游戏中/不在游戏中)
instance.on("playerStateUpdate", (data) => {
    // 您的业务逻辑
});

// 通知游戏状态变化                
instance.on("gameStateUpdate", (data) => {
    // 您的业务逻辑
});

// 如果加载游戏时设置了自定义播放游戏声音,在游戏需要播放音乐或音效时,会收到这个回调,通知开发者需要控制声音文件的播放
instance.on("gameSoundPlay", (data) => {
    // 您的业务逻辑
});

// 如果加载游戏时设置了自定义播放游戏声音,此回调通知开发者需要修改 gameSoundPlay 提及的声音的音量
instance.on("gameSoundVolumeChange", (data) => {
    // 您的业务逻辑
});

// 通知游戏运行错误
instance.on("gameError", (data) => {
    // 您的业务逻辑
});

2、获取游戏列表和游戏详细信息

玩游戏前,用户需要获取游戏 ID,可以通过获取游戏列表,在列表中选择想玩的游戏。此外,用户还可以针对该游戏获得更详细的信息。

2.1 获取游戏列表

调用 getAllGameList 接口,获取全量游戏信息。

示例代码:

const instance = ZegoMiniGameEngine.getInstance();

// 获取所有模式的游戏列表
instance.getAllGameList().then((result) => {
    // gameInfoList 为所有模式游戏的列表
});

2.2 (可选)获取游戏详细信息

如果不满足于游戏列表结果中的简短信息,还可以调用 getGameInfo,指定 gameID,即可获取该游戏的更多信息(包括最大支持玩家数量、所需金币、游戏朝向等)。

示例代码如下:

const instance = ZegoMiniGameEngine.getInstance();

// 获取游戏详细信息
instance.getGameInfo(miniGameId).then((result) => {

});

四、加载游戏

用户先调用 setGameContainer 接口设置游戏的父容器,最后调用loadGame加载游戏。

完成加载后,玩家即可开始玩游戏场随机匹配半屏和全屏模式的游戏。

主播带玩指定匹配模式游戏则还需要主播主动调用 startGame 接口才能开始,详情请参考 8 (可选)主播开始游戏。

注意:

  • 此处的“主播”和“观众”指的是您的业务角色,由您定义。ZEGO MiniGameEngine SDK 并不会对用户进行分类。
  • 如需实现主播和观众一起玩游戏,他们各自的 roomID 和 gameID 必须保持一致。
  • 如果在直播间(语聊房)的观众(听众)需要观看主播的游戏过程,但不加入游戏,也需要设置游戏父容器和加载游戏。

示例代码如下:

// 设置游戏父容器
// '#iframe' 需为集成 SDK 时规定的 iframe 的 ID
ZegoMiniGameEngine.getInstance().setGameContainer('#iframe');

// 加载主播带玩指定匹配模式游戏
const gameID = "xxxxxx";   // 游戏 ID
const gameMode = 1;  // 1 代表主播带玩指定匹配模式
const roomID = "xxxxxxx";  // 游戏房间 ID,建议与您的业务房间 ID 保持一致
                           // 对于主播带玩指定匹配模式此字段必填
                           // 对于游戏场半屏模式和游戏场全屏模式,此字段可传空
await ZegoMiniGameEngine.getInstance().loadGame(gameID, gameMode, {roomId: roomID, customPlaySound: false });

五、其他

1、接收游戏中的事件

加载游戏后,会通过 on 回调接收游戏中的事件,有游戏事件、玩家事件、声音播放事件、充值提示等。

2、反加载游戏

当需要关闭游戏时,主播和观众都需要调 unloadGame 接口反加载游戏游戏。

示例代码如下:

const instance = ZegoMiniGameEngine.getInstance();

// 反加载游戏
// 设置参数 forceQuit 为 false,表示玩家若在游戏中调用此接口时,会要求玩家确认是否退出。
// 若设置参数 forceQuit 为 true,表示玩家若在游戏中调用此接口时,会直接退出游戏。
instance.unloadGame(false);

3、释放资源

调用 unInit 接口反初始化 ZEGO MiniGameEngine SDK。
// 反初始化
const instance = ZegoMiniGameEngine.getInstance();
instance.unInit();

六、总结

截止到这一步,您已成功接入ZEGO 小游戏SD。接下来还可通过链接: https://doc-zh.zego.im/article/17652, 进一步认识小游戏引擎的概念与功能,完善更多小游戏功能,游戏模式、游戏语言、音乐、音效等等。

快捷的接入速度,让企业即刻实现小游戏平台搭建,为在线社交注入新的活力,打开社交新思路。ZEGO 提供 Demo 接入指引,对接一次 SDK 即可接入所有游戏,并且可以持续获取后续的新增游戏资源,体验更多爆款游戏!

同时,ZEGO 小游戏平台致力于为企业提供最优的技术能力与服务,H5 端包体大小最低可至 390 Kb,提供丰富的游戏种类,实时PVP、语音互动类、秀场互动类、桌游类、棋牌类等多类型游戏应有尽有!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1141691.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SIT3491ISO具有隔离功能,256 节点,全双工 RS422/RS485 芯片

SIT3491ISO 是一款电容隔离的全双工 RS-422/485 收发器,总线端口 ESD 保护能力 HBM 达到 15kV 以上,功能完全满足 EIA-422 以及 TIA/EIA-485 标准要求的 RS-422/485 收发器。 SIT3491ISO 包括一个驱动器和一个接收器,两者均…

为什么 Python 适合初学者?如何开始学习 Python?

与其他编程语言相比较,Python有着更为简单的语法,所以学习Python对于很多刚进入编程领域的初学者来说是一个很好的选择。 Python还是一门应用领域很广的编程语言,这也就意味着你可以在各种各样的工作和领域中使用它。 跟很多刚进入技术领域…

C++in/out输入输出流[IO流]

文章目录 1. C语言的输入与输出2.C的IO流2.1流的概念2.2CIO流2.3刷题常见while(cin >> str)重载强制类型转换运算符模拟while(cin >> str) 2.4C标准IO流2.5C文件IO流1.ifstream 1. C语言的输入与输出 C语言用到最频繁的输入输出方式就是scanf ()与printf()。 scanf…

jquery中定义的动态生成的标签元素,点击事件该方法未定义Uncaught ReferenceError: goHere is not defined

如下图: 在点击动态生成的弹窗里的html中的企业列表标签时(该标签绑定了点击事件-goHere), 会提示:Uncaught ReferenceError: goHere is not defined 生成的html代码: // 自定义content function showContent(a) {if (a != undefined) {return `<div class="…

Centos7 安装和配置 Redis 5 教程

在Centos上安装Redis 5&#xff0c;如果是 Centos8&#xff0c;那么 yum 仓库中默认的 redis 版本就是 5&#xff0c;直接 yum install 即可。但如果是 Centos7&#xff0c;yum 仓库中默认的 redis 版本是 3 系列&#xff0c;比较老&#xff1a; 通过 yum list | grep redis 命…

全民拼购模式:无论成败皆有所得

什么是全民拼购模式&#xff1f; 全民拼购模式是一种基于社交电商的新型模式&#xff0c;它通过拼团、拼购等方式&#xff0c;让消费者享受更优惠的价格和更便捷的购物体验。这种模式的出现&#xff0c;不仅为电商平台注入了新的活力&#xff0c;也成为了消费者追求高性价比商…

物联网AI MicroPython传感器学习 之 LCD1602液晶屏

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; 一、产品简介 LCD1602 字符型液晶显示模块是专门用于显示字母、数字、符号等的点阵型液晶显示模块。分4位和8位数据传输方式。提供5x7点阵游标的显示模式。提供显示数据缓冲区 DDRAM、字符发生器CGROM和字符…

双十一某宝、某东活动脚本

一、前言 双十一马上就快开始了&#xff0c;各大网购平台的优惠活动开展的如火如荼&#xff0c;羊毛党们也是摩拳擦掌&#xff0c;蠢蠢欲动。为了提高效率&#xff0c;自动化脚本应运而生&#xff0c;今天&#xff0c;小编为大家带来的就是这么三款自动化点击软件。主要是针对…

protobuf对象与JSON相互转换

除了之前的 protobuf-java依赖之外&#xff0c;还需要引入 protobuf-java-uti 依赖&#xff1a; <!-- https://mvnrepository.com/artifact/com.google.protobuf/protobuf-java --><dependency><groupId>com.google.protobuf</groupId><artifactId&…

linux可视化运维工具

今天推荐两个linux可视化的运维工具Cockpit和orion-ops Cockpit Cockpit是CentOS 8默认内置的一个基于Web的可视化管理工具。它提供了对一系列常见命令行管理操作的图形化支持&#xff0c;包括用户管理、防火墙管理、服务器资源监控等等。方便易用的Cockpit号称是适用于所有人…

一文解决:Swagger API 未授权访问漏洞问题

Swagger 是一个用于设计、构建、文档化和使用 RESTful 风格的 Web 服务的开源软件框架。它通过提供一个交互式文档页面&#xff0c;让开发者可以更方便地查看和测试 API 接口。然而&#xff0c;在一些情况下&#xff0c;未经授权的访问可能会导致安全漏洞。本文将介绍如何解决 …

基于SpringBoot + Vue的学生成绩管理系统的设计与实现源码及搭建视频

基于SpringBoot Vue的学生成绩管理系统的设计与实现 引言 1.1目的 该文档的目的是描述学生成绩管理系统的概要设计&#xff0c;主要内容包括系统功能简介、系统结构设计、模块设计和界面设计等。 本文档的预期读者包括&#xff1a;产品设计者、编程人员、系统用户。 1.2 范围…

高品质工地建筑模板,防水耐用,易脱模

欢迎选购我们的产品&#xff1a;高品质工地建筑模板。作为一家专业厂家&#xff0c;我们提供适用于高层建筑的建筑模板&#xff0c;具有出色的防水耐用性能&#xff0c;且不易开胶。1. 高品质工地建筑模板&#xff1a;我们的建筑模板经过精心设计和制作&#xff0c;以确保其高品…

Python 中多态性的示例和类的继承多态性

单词 “多态” 意味着 “多种形式”&#xff0c;在编程中&#xff0c;它指的是具有相同名称的方法/函数/操作符&#xff0c;可以在许多不同的对象或类上执行。 函数多态性 一个示例是 Python 中的 len() 函数&#xff0c;它可以用于不同的对象。 字符串 对于字符串&#xf…

新的iLeakage攻击从Apple Safari窃取电子邮件和密码

图片 导语&#xff1a;学术研究人员开发出一种新的推测性侧信道攻击&#xff0c;名为iLeakage&#xff0c;可在所有最新的Apple设备上运行&#xff0c;并从Safari浏览器中提取敏感信息。 攻击概述 iLeakage是一种新型的推测性执行攻击&#xff0c;针对的是Apple Silicon CPU和…

LabVIEW更改图像特定部分的颜色

LabVIEW更改图像特定部分的颜色 在随附的照片中&#xff0c;想将包围的部分更改为黄色。该怎么做&#xff1f;或者如何将图像的蓝色部分更改为绿色。 绘制拼合像素图不接受数组或输出数组。如果需要有关函数的更多信息&#xff0c;请按 CTRL H 打开上下文帮助&#xff0c;或单…

linux shell脚本修改ini配置文件[session]下的键值

比如我要修改一个配置文件&#xff0c;如下&#xff0c;修改systemFlag.ini下的[huake]下的ip和port的值 代码如下&#xff0c;我就不解释了&#xff0c;有注释&#xff0c;用的是sed 来修改的&#xff0c;不懂的&#xff0c;可以去学习一下 #!/bin/bash #获取当前路径 curr…

无需更换vue-cli 脚手架 uniapp-搭建项目-H5-低版本安卓IOS兼容问题(白屏)(接口请求异常)

✨求关注~ &#x1f4bb;博客&#xff1a;www.protaos.com I. 简介 A. UniApp项目概述 B. 白屏和接口请求异常问题的背景 II. 白屏问题 A. 问题描述 1、uniapp 打包H5内嵌入APP内、低版本手机系统访问白屏问题 B. 问题根本原因 1、低版本手机系统 自带的webview内核不支持ES6语…

开放式耳机推荐百元价位、好用的开放式耳机推荐

个人很喜欢体验新潮或者与众不同的耳机&#xff0c;这不就发现了不一样的开放式耳机&#xff0c;这种耳机不需要插入耳道&#xff0c;而是采用开放式设计&#xff0c;最大的优点是在听音乐的同时能够感知周围环境的声音效果&#xff0c;同时佩戴也非常舒适&#xff0c;因此深受…

计算机操作系统重点概念整理-第四章 内存管理【期末复习|考研复习】

第四章 内存管理 【期末复习|考研复习】 计算机操作系统系列文章传送门&#xff1a; 第一章 计算机系统概述 第二章 进程管理 第三章 进程同步 第四章 内存管理 第五章 文件管理 第六章 输出输出I/O管理 文章目录 第四章 内存管理 【期末复习|考研复习】前言四、内存管理4.1 内…