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