腾讯云大学大咖分享 |小游戏联机对战引擎实践

时间 2020-03-04

标签腾讯大学分享游戏联机引擎实践栏目腾讯繁體版

原文原文链接

腾讯云大学本期直播课程邀请到了腾讯云Web前端工程师经过两个小游戏demo，讲解了小游戏联机对战引擎中帧同步和状态同步两种应用场景。「腾讯云大学」联合「云加社区」为你们整理了课程精彩干货！前端

《猪猪对战》教学课程点击观看完整课程
《答题游戏》教学课程点击观看完整课程

实践案例背景

帧同步游戏 - 猪猪对战

猪猪对战demo是一款1V1的双人对战帧同步游戏，玩家能够经过邀请好友或者快速加房组成对局，而后使用帧同步实现不一样玩家之间游戏逻辑的同步。demo包含四个页面，分别是受权页、首页、房间页、对战页。玩家进入首页后，点击“快速开始”或者“邀请好友”按钮进入房间页；双方点击房间页“准备按钮”后能够进入对战页面开始游戏。express

涉及到的MGOBE接口有房间匹配（matchRoom）、建立房间（createRoom）、加入房间（joinRoom）、查询房间信息（getRoomDetail）、退出房间（leaveRoom）、修改玩家状态（changeCustomPlayerStatus）、开始帧同步（startFrameSync）、帧同步广播（onRecvFrame）。浏览器

状态同步游戏 - 答题游戏

答题游戏是一款使用MGOBE实时服务器实现的状态同步的组队答题类游戏。玩家经过随机匹配组成对局，而后与实时服务器进行交互，获取游戏状态（题目信息、玩家信息）。demo包含六个页面：受权页、首页、匹配页、房间页、答题页、结算页。玩家在首页经过三种匹配方式（1V一、2V二、3V3）进入房间，玩家向实时服务器发送准备指令后会进入答题页。选择答案后提交到实时服务器，由实时服务器的逻辑判断答案的正误，而且下发新的游戏状态给每一个玩家。服务器

涉及到的MGOBE接口有玩家匹配（matchPlayers）、查询指定房间信息（getRoomByRoomId）、退出房间（leaveRoom）、发送实时服务器消息（sendToGameSvr）、实时服务器广播（onRecvFromGameSvr）。微信

MGOBE 简介

小游戏联机对战引擎（Mini Game Online Battle Engine，MGOBE）主要为小游戏提供多人联机对战服务，帮助开发者快速搭建多人交互小游戏。依托腾讯云强大的网络、硬件资源，开发者无需关注游戏底层网络架构、网络通讯、服务器扩缩容、运维，只须要经过 SDK 调用 MGOBE 后台服务，便可得到就近接入、低延迟、实时扩容的高性能联机对战服务。网络

目前 MGOBE 具有了房间管理、玩家匹配、房间消息、帧同步、状态同步、实时服务器等服务能力，开发者只须要在小游戏中调用 SDK 接口，就能轻松接入联机对战，让玩家在网络上互通、对战、自由畅玩。前端工程师

接口概览

MGOBE 客户端 SDK 的接口能够分为五类，包括房间管理、匹配、消息发送、帧同步、广播接口。架构

房间管理类的接口主要是用于将不一样玩家组成一个对局，这个过程当中能够经过建立房间、邀请他人加入房间等方式将玩家聚合在一块儿。此外，还提供了如踢人、修改房间属性、查询房间信息等基本的房间管理方法。运维

匹配类的接口主要是用于将不一样玩家经过匹配的方式组成对局，开发者能够根据须要定制匹配规则，实现根据玩家等级、积分进行匹配。dom

帧同步和消息发送接口能够用于玩家消息的交互，经过帧同步、状态同步方式实现玩家游戏逻辑的同步。

广播类接口主要是用于处理上述接口调用产生的广播事件，好比玩家加房、退房广播、帧消息广播等等。

客户端 SDK 使用流程

客户端在使用SDK时的主要流程有4步，能够参考官网文档：

导入SDK，在微信小游戏环境中可使用 import 或者 require 语法。

// 使用 import/from
import * as MGOBE from "./js/libs/MGOBE.js";
const { Room, Listener, ErrCode, ENUM, DebuggerLog } = MGOBE;
// 使用 require
const MGOBE = require("./js/libs/MGOBE.js");
const { Room, Listener, ErrCode, ENUM, DebuggerLog } = MGOBE;

初始化 Listener 对象。

const gameInfo = {
    openId: 'xxxxxx',
    gameId: "xxxxxx",// 替换为控制台上的“游戏ID”
    secretKey: 'xxxxxx',// 替换为控制台上的“密钥”
};
const config = {
    url: 'xxx.wxlagame.com',// 替换为控制台上的“域名”
    reconnectMaxTimes: 5,
    reconnectInterval: 1000,
    resendInterval: 1000,
    resendTimeout: 10000,
};
Listener.init(gameInfo, config, event => {
    if (event.code === 0) {
        // 初始化成功
        // 继续在此添加代码
        // ...
    }
});

实例化 Room 对象，加入到监听。

const room = new Room();
// 监听
Listener.add(room);

经过 room 实例调用方法，并处理广播回调。

// 建立房间
room.createRoom(para, callback);
// 监听加房广播
room.onJoinRoom = event => console.log("有玩家加入");

房间管理

在将各个玩家加到同一个房间造成对局的过程当中，须要用到建立房间、踢人、修改房间信息等操做。以微信小戏平台**邀请玩家**为例，整个流程以下：

其中，“生成邀请连接”、“分享”都是使用微信的接口实现，“建立房间”、“加入房间”使用 MGOBE 相应接口实现。在这个过程当中，房间信息可能会因为屡次操做引发屡次更新，好比玩家进房、退房、修改状态等。为了方便管理房间信息更新，可使用 onUpdate 接口：

const room = new Room();
room.onUpdate = () => {
    console.log("房间信息已更新", room.roomInfo);
    // 渲染画面
    // ...
}；

在处理应用重启的场景时，须要在打开应用时检查玩家是否在房间中、是否在游戏中等信息，能够经过 getRoomDetail 接口查询：

// 查询玩家本身的房间
room.initRoom();
room.getRoomDetail(event => {
    if (event.code === 0) {
        console.log("玩家已在房间内：", event.data.roomInfo.name);
        // 继续判断玩家是否在游戏中
        // ...
        return;
    }
    if (event.code === 20011) {
        console.log("玩家不在房间内");
        return;
    }
});

玩家匹配

MGOBE 为开发者提供了两种匹配方式：matchRoom 和 matchPlayers，分别表示房间匹配和玩家匹配。在两次分享课程中分别以猪猪对战和答题游戏为例介绍了这两种匹配方式的用法。

matchRoom

房间匹配是以 maxPlayers 和 roomType 为参数，寻找 maxPlayers、roomType 属性值一致的房间，若是存在这种房间，则将玩家加入，否为为玩家建立一个新房间。适合须要快速加房的场景，用法以下：

const playerInfo = {
        name: "Tom",
        customPlayerStatus: 1,
        customProfile: "https://xxx.com/icon.png",
    };
    const matchRoomPara = {
        playerInfo,
        maxPlayers: 5,
        roomType: "1",
    };
    room.matchRoom(matchRoomPara, event => {
        if (event.code !== 0) {
            console.log("匹配失败", event.code);
        }
    });

matchPlayers

玩家匹配更加灵活，开发者须要在控制台上建立匹配规则，获得匹配Code做为该接口参数。玩家触发该接口后会与其余玩家进行匹配，知足匹配规则的玩家会被匹配在一块儿。

示例1。四人随机匹配：

{
    "version": "V1.0",
    "teams": [
        {
            "name": "4人房间",
            "maxPlayers": 4,
            "minPlayers": 4,
            "number": 1
        }
    ]
}

示例2。3V3 根据玩家段位（level）进行匹配，而且玩家 level 属性值在 1 ~ 100 内的不一样玩家才能匹配在一块儿，规则以下：

{
    "version": "V1.0",
    "teams": [
        {
            "name": "3v3",
            "maxPlayers": 3,
            "minPlayers": 3,
            "number": 2
        }
    ],
    "playerAttributes": [
        {
            "name": "level",
            "type": "number"
        }
    ],
    "rules": [
        {
            "type": "segment",
            "expression": "teams[i].players.level",
            "value": [
                [
                    1,
                    100
                ]
            ]
        }
    ]
}

客户端 SDK 调用方法：

const playerInfo = {
        name: "Tom",
        customPlayerStatus: 1,
        customProfile: "https://xxx.com/icon.png",
        matchAttributes: [{
            name: "level",
            value: 99,
        }]
    };
    const matchPlayersPara = {
        playerInfo,
        // 匹配Code 须要从控制台配置获取
        matchCode: "match-xxx",
    };
    // 发起匹配
    room.matchPlayers(matchPlayersPara, event => {
        if (event.code === 0) {
            console.log("匹配成功", room.roomInfo);
        } else {
            console.log("匹配失败", event.code);
        }
    });

帧同步应用

帧同步须要使用 sendFrame、onRecvFrame 进行发帧、处理帧广播。客户端逻辑依靠于 onRecvFrame 进行更新，游戏状态计算也是在客户端完成。在帧同步以前须要调用 startFrameSync 触发开始帧同步：

// 开始帧同步
    room.startFrameSync({}, event => {
        if (event.code === 0) {
            console.log("开始帧同步成功");
        }
    });
    // 开始帧同步广播回调
    room.onStartFrameSync = event => console.log("开始帧同步");

开始帧同步成功以后玩家能够向 MGOBE 后台发送帧消息指令。以猪猪对战为例，玩家点击屏幕后会向后台发送一条 jump 指令。MGOBE 后台会将所有玩家的消息指令组成一个帧广播，而且定时下发（如每秒15次）：

const frame = {cmd: "jump"};
    room.sendFrame({ data: frame }, event => console.log(event));
    // 处理帧广播
    room.onRecvFrame = event => {
        console.log("帧广播", event.data.frame);
        // 计算游戏逻辑状态
        // ...
    };

开发者在游戏中每每会有同步随机数的需求，好比”炸弹“的位置须要随机出现、“伤害值”存在随机性等。MGOBE 的每一个帧广播都带上了一个随机种子，能够结合 SDK 提供的随机数工具来生成随机数，而且能够确保在不一样客户端生成的随机数序列是一致的：

room.onRecvFrame = event => {

        console.log("帧广播", event.data.frame);

        // 使用帧广播随机种子和帧ID组成新的随机种子

        const seed = event.data.frame.ext.seed + event.data.frame.id;

        // 收到帧广播后初始化随机出工具

        MGOBE.RandomUtil.init(seed);

        // 生成随机数

        const r1 = MGOBE.RandomUtil.random();

        const r2 = MGOBE.RandomUtil.random();

        const r3 = MGOBE.RandomUtil.random();

        // 利用随机数执行相应逻辑

        // ...

    };

状态同步应用

状态同步类型联机游戏的特色是游戏逻辑状态在服务端计算。为了实现状态同步，MGOBE 为开发者提供了实时服务器功能，开发者能够上传代码部署到实时服务器上，而且与客户端 SDK、房间服务进行交互。

实时服务器实现了对客户端游戏逻辑的扩展。玩家进入房间以后，对房间进行的任何操做，都会经过房间服务器同步给实时服务器，那这样实时服务器上也能拿到最新的房间状态，好比玩家进房、退房、掉线、开始帧同步等等。

客户端能够经过 sendToGameSvr请求接口、onRecvFromGameSvr广播接口实现和实时服务器进行交互。

客户端代码

// 发送消息给实时服务器
room.sendToGameSvr({data: { cmd: 1 }}, event => console.log(event));
// 接收实时服务器广播
room.onRecvFromGameSvr = event => {
    console.log("新自定义服务消息", event);
    // 更新游戏画面
    // ...
}

实时服务器代码

// 接收客户端消息
onRecvFromClient = args => {
    // 客户端消息
    const data = args.actionData;
    // 计算游戏状态 gameData
    // ...
    // 发送游戏状态给客户端
    args.SDK.sendData({ playerIdList: [], data: { gameData } });
    args.SDK.exitAction();
};

经过这种方式，开发者能够把玩家的游戏输入所有发送给实时服务器，而后由实时服务器计算游戏状态，而且广播给每一个客户端，实现游戏状态同步。

常见问题

Q:createRoom、matchRoom、matchPlayers接口主要区别是什么？
A:createRoom 建立房间而且加入到该房间。matchRoom 根据参数匹配到同样的房间，而且进入。
若是没有合适的房间，按照该参数建立新房间。matchPlayers 须要在控制台上配置匹配规则，
拿到匹配code，以此为参数进行匹配。匹配成功后进入房间。

Q:建立房间后须要调用joinRoom吗？
A:不须要，调用 createRoom 后玩家会自动进入房间。
不须要，匹配成功玩家会自动进入房间。
开发者可能开通了实时服务器，可是没有正常运行，好比没有发布代码。
新版本即将支持 H5原生环境，能够直接在浏览器中运行。
检查 room 实例是否加入到 Listener。

Q:匹配成功后须要建立房间吗？
A:建立房间或匹配的时候出现400十、40011错误

Q:如何在浏览器中进行调试？
A:SDK 没有收到广播

结语

MGOBE 能为开发者快速实现游戏房间管理、在线匹配、联网对战等功能，你们能够到腾讯云官网产品页中搜索“MGOBE”进一步了解。也欢迎你们扫码加入开发者群交流。

腾讯云大学是腾讯云旗下，面向云生态用户的一站式学习成长平台。腾讯云大学大咖分享每周邀请内部技术大咖，为你提供免费、专业、行业最新技术动态分享。