v1.1.3

v1.1.3

Author: ranpeng

README.md

@@ -6,8 +6,19 @@
 
 直接 import dist/tcg-sdk，导出的为umd 格式
 
+## Samples
+
+可参考samples 文件夹下，Mobile/PC demo
+
+## Plugin
+
+新增遥感插件
+
 ## 说明文档
 
-[使用例子](demo/demo.html)
+[使用例子](samples/)
+
+[快速入门](https://cloud.tencent.com/document/product/1162/46135)
+
+[接口申明文件](dist/tcg-sdk//index.d.ts)
 
-[快速入门](https://cloud.tencent.com/document/product/1162/46135)

changelog.md

@@ -1,3 +1,18 @@
+### [1.1.3](https://github.com/tencentyun/cloudgame-js-sdk/releases/tag/v1.1.3)@2022.03.23
+
+**新增**
+
+- PC 端操作手游
+- 移动端虚拟摇杆插件
+
+**变更**
+
+- 取消打印数据通道消息发送日志
+
+**修复**
+
+- Safari 下多次重连会导致连接不成功问题
+
 ### [1.1.2](https://github.com/tencentyun/cloudgame-js-sdk/releases/tag/v1.1.2)@2022.02.21
 
 **新增**

dist/tcg-sdk/index.d.ts

@@ -103,6 +103,7 @@ export interface ServerSideDescription {
   readonly sdp?: string;
   readonly server_ip?: string;
   readonly server_version?: string;
+  readonly server_port?: string;
   readonly region?: string;
   readonly instance_type?: string; // L1 S1 M1
   readonly message?: string;

dist/tcg-sdk/index.js

@@ -0,0 +1,6 @@
+### [1.0.0](https://github.com/tencentyun/cloudgame-js-sdk/releases/tag/v1.1.3)@2022.02.21
+
+**新增**
+
+- 虚拟摇杆插件
+

plugin/changelog.md

@@ -0,0 +1,33 @@
+# 云游戏插件项目 - 摇杆
+
+接口描述见申明文件（joystick.d.ts）
+
+## 使用方法
+
+> 需结合TCGSDK 一起使用，使用前请确保TCGSDK 已被正常加载
+
+1. import joystick plugin 
+
+    ```javascript
+    import { joystick } from 'tcg-plugin/joystick/joystick';
+    ```
+
+2. create joystick, 具体参数可以参见申明文件 create 方法
+
+    ```javascript
+    const j = joystick.create({
+        zone: document.querySelector('#your-element')
+    });
+    ```
+
+3. 监听对应事件（如果sendData 为true（默认值 true），插件会自动发送对应指令）
+
+    ```javascript
+    j.on('move', (data) => {
+        const { degree } = data.angle;
+        console.log('degree', degree);
+    });
+    ```
+
+
+如有疑问和需求，可随时联系 ranpeng

plugin/joystick/README.md

@@ -0,0 +1,120 @@
+export interface CreateConfig {
+  /**
+   * 摇杆挂载节点，默认 document.body
+   */
+  zone?: HTMLElement;
+  /**
+   * 摇杆尺寸，默认 `100px`
+   */
+  size?: number;
+  /**
+   * 相对于挂载节点的位置
+   * 默认值 `{top: 50, left: 50}`，及根据size 剧中
+   */
+  position?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+  /**
+   * 锁定X 轴移动, 默认值 `false`
+   */
+  lockX?: boolean;
+  /**
+   * 锁定Y 轴移动, 默认值 `false`
+   */
+  lockY?: boolean;
+  /**
+   * 两种摇杆样式 wasd/上下左右, 默认值 `dpad_updown`
+   */
+  type?: 'dpad_wasd' | 'dpad_updown';
+  /**
+   * 是否自动发送移动数据, 默认值 `true`
+   */
+  sendData?: boolean;
+  /**
+   * 摇杆背景图， http/https 地址
+   * 不填采用默认图片
+   * @back 底图
+   * @front 按钮图
+   * @frontPressed 按钮被按下后的图片
+   */
+  joystickImage?: {
+    back?: string;
+    front?: string;
+    frontPressed?: string;
+  };
+  /**
+   * end 后复位摇杆，默认值 `true`
+   */
+  restJoystick?: boolean;
+  /**
+   * 操作阀值，暂未启用
+   */
+  threshold?: number;
+  /**
+   * fade 动画时间，暂未启用
+   */
+  fadeTime?: number;
+  /**
+   * 根据android 编辑倒出的json 数据显示摇杆，暂未启用
+   */
+  configJson?: any; // 有android 端倒出的json 文件
+}
+
+export type JoystickEventTypes = 'start' | 'move' | 'end' | 'added';
+
+/**
+ * 摇杆move 时候返回的数据
+ */
+export interface JoystickOutputData {
+  angle: {
+    degree: number;
+    radian: number;
+  };
+  distance: number;
+  force: number;
+  identifier: number;
+  lockX: boolean;
+  lockY: boolean;
+  position: {
+    x: number;
+    y: number;
+  };
+  pressure: number;
+  raw: {
+    distance: number;
+    position: {
+      x: number;
+      y: number;
+    };
+  };
+  vector: {
+    x: number;
+    y: number;
+  };
+  direction?: {
+    angle: string;
+    x: string;
+    y: string;
+  };
+}
+
+export interface Joystick {
+  /**
+   * @param type 对应的事件
+   * @param handler 回调函数
+   */
+  on<T extends JoystickEventTypes>(
+    type: T,
+    handler: (data: T extends 'move' ? JoystickOutputData : null) => void,
+  ): void;
+  destroy(): void;
+}
+
+declare class JoystickStatic {
+  create(params: CreateConfig): Joystick;
+}
+
+export declare const joystick: JoystickStatic;

plugin/joystick/joystick.d.ts

@@ -24,15 +24,26 @@
       width: 100%;
       height: 100%;
     }
+
+    #plugin-point {
+      position: absolute;
+      left: 100px;
+      bottom: 50px;
+      width: 100px;
+      height: 100px;
+    }
+
   </style>
 </head>
 
 <body>
   <div id="demo-container">
     <div id="mount-point"></div>
+    <div id="plugin-point"></div>
   </div>
   <script type="text/javascript" src="../../dist/tcg-sdk/index.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
+  <script type="text/javascript" src="../../plugin/joystick/joystick.js"></script>
+  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
   <script>
 
     const startGame = async () => {
@@ -68,6 +79,11 @@
       // 连接成功回调
       onConnectSuccess: async (res) => {
         console.log('onConnectSuccess', res);
+
+        // // 添加遥感
+        // const j = joystick.create({
+        //   zone: document.querySelector('#plugin-point'),
+        // });
       },
       // 网络中断/被踢触发此回调
       onDisconnect: (res) => {