前置服务
- 需要后端搭建云游戏相关服务 （用于链接云游戏、查询排队情况）。
云游戏服务
安装
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 将被忽略