前置服务

• 需要后端搭建云游戏相关服务 （用于链接云游戏、查询排队情况）。

云游戏服务

安装

npm install --save @tripmini/vehicle-gs-core

示例

import Tcg from "@tripmini/vehicle-gs-core";

/* 云游戏配置参数 */
const gameId = "game-japxh18e";
const groupId = "cgg-m72vy27d";
const gameEnv = "pro";
const userId = "11111111888888888899999999";
const appid = 1255598736;

/* 初始化云游戏 */
Tcg({
  appid,
  mount: "mount-point",
  userId,
  gameId,
  groupId,
  gameEnv,
  async connectGame(data) {
    const res = await getServerSession(data);
    return res.data;
  },
  async queryQueueInfo(data) {
    const res = await queueInfo(data);
    return res.data;
  },
  gameCallback: {
    onErrorCallBack() {},
    onDisconnectCallback() {},
    onConnectFail() {},
    onConnectSuccess(TcgClient) {
      console.log("cb onConnectSuccess ===> ", TcgClient);
    },
    onDataChannelConnected(tcgConnect) {
      console.log("cb onDataChannelConnected ===> ", tcgConnect);
    },
    onGameMessage(msg) {
      console.log("cb msg ===> ", msg);
    },
    onGameSizeInitSuccess() {
      console.log("cb onDataChannelConnected ===> ");
    },
    onNetworkChange() {},
  },
});

参数

Tcg

| 参数名 | 说明 | 是否必传 | 类型 | | :------------- | :----------------------------------------- | :------- | :------- | | appid | 云游戏 id | Y | string | | mount | 云游戏挂载点的 HTML 元素 ID | Y | string | | userId | 当前设备唯一标志 | Y | string | | gameId | 游戏 ID | Y | string | | groupId | 游戏分组 ID | Y | string | | gameEnv | 游戏环境 | Y | string | | connectGame | 链接云游戏服务的 异步函数 需要返回请求结果 | Y | function | | queryQueueInfo | 查询排队信息的 异步函数 需要返回请求结果 | Y | function | | gameCallback | 云游戏事件回调对象 | N | object |

gameCallback

| 参数名 | 说明 | 回调参数 | 是否必传 | 类型 | | :--------------------- | :------------------------- | :--------- | :------- | :------- | | onErrorCallBack | 浏览器不兼容 WebRtc 时调用 | | N | function | | onDisconnectCallback | 断开/被踢触发此回调 | 参考链接 | N | function | | onConnectFail | 连接失败回调 | 参考链接 | N | function | | onConnectSuccess | 连接成功回调 | TcgClient | N | function | | onDataChannelConnected | 消息通道建立成功回调 | TcgConnect | N | function | | onGameMessage | 接收到云游戏推送消息时回调 | msg | N | function | | onGameSizeInitSuccess | 自适应屏幕尺寸成功后回调 | | N | function | | onNetworkChange | 网络状态变化 | 参考链接 | N | function |

参考链接

SDK 实例

• TcgClient TCGSDK 初始化
• TcgConnect 链接游戏、相互通信
• TcgControl 交互事件、初始事件处理

发送指令 TcgConnect

const msg: string | object = "send code";
TcgConnect.sendDataMessage(msg);

虚拟摇杆插件 (可选)

示例

import { Joystick } from "@tripmini/vehicle-gs-core";

Joystick.init({
  mode: "dynamic",
  size: 80,
  zone: joyCon,
  position: { top: "100px", left: "100px" },
  joystickImg: { back, front },
  event: {
    start(evt, nipple) {
      console.log("start ===> ", evt, nipple);
    },
    move(evt, nipple) {
      const { direction } = nipple;
      console.log("start ===> ", evt, nipple);
    },
    end(evt, nipple) {
      console.log("start ===> ", evt, nipple);
    },
});

参数

init

| 参数名 | 说明 | 可选值 | 是否必传 | 类型 | | :---------- | :------- | :------------------------------ | :------- | :----- | | mode | 摇杆模式 | dynamic、static 默认:dynamic | N | string | | size | 摇杆模式 | 80 默认:80 | N | number | | zone | 摇杆模式 | div | N | DOM | | position | 摇杆模式 | { top: "100px", left: "100px" } | N | object | | joystickImg | 摇杆模式 | { back, front } | N | object | | event | 摇杆模式 | { start, move, end } | N | object |

mode = dynamic 时 position 将被忽略