feat: 增加触控转鼠标

QuickStart/Web/README.md

@@ -20,6 +20,7 @@
 16. 虚拟键鼠
 17. 本地输入法显示中文合成过程
 18. 自动回收时长
+19. 触控转鼠标
 
 方便用户快速接入云游戏客户端 Web SDK。
 
@@ -57,6 +58,7 @@
 │   │   ├── sync-local-keyboard-close-status.js # 同步本地键盘状态到云端
 │   │   ├── update-video-scale.js # 更新画面放缩比
 │   │   ├── virtual-input-suite.js # 虚拟键鼠
+│   │   ├── touch-to-mouse-event.js # 触控转鼠标
 │   └── style.css # 样式文件
 └── vite.config.js # vite 配置文件
 └── .env #  Web SDK 启动需要的配置

QuickStart/Web/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@volcengine/vegame": "^1.31.0",
+    "@volcengine/vegame": "^1.55.0",
     "bootstrap": "^5.3.3"
   }
 }

QuickStart/Web/src/constant.js

@@ -142,3 +142,24 @@ export const veGamePadList = [
     value: veGamePad.DisableVibrate,
   },
 ];
+
+// 触控类型
+export const ACTION = {
+  DOWN: 0,
+  UP: 1,
+  MOVE: 2,
+  TOUCH_START: 0,
+  TOUCH_END: 1,
+  TOUCH_MOVE: 2,
+  WHEEL: 8,
+  PC_TOUCH_UP: 0,
+  PC_TOUCH_DOWN: 1,
+  PC_TOUCH_MOVE: 2,
+};
+
+// 鼠标按键
+export const MOUSE_BUTTON = {
+  LEFT: 0,
+  CENTER: 1,
+  RIGHT: 2,
+};

QuickStart/Web/src/features/index.js

@@ -17,3 +17,4 @@ export { default as getUserProfilePath } from "./get-user-profile-path.js";
 export { default as setTouchToMouse } from "./set-touch-to-mouse.js";
 export { default as virtualInputSuite } from "./virtual-input-suite.js";
 export { default as gamePad } from "./game-pad.js";
+export { default as touchToMouseEvent } from "./touch-to-mouse-event.js";

QuickStart/Web/src/features/touch-to-mouse-event.js

@@ -0,0 +1,82 @@
+import { ACTION, MOUSE_BUTTON } from "../constant";
+
+const mouseLeftClick = async (x, y, veGameSdkInstance) => {
+  console.log("[MouseLeft Click]:", x, y);
+  await veGameSdkInstance.sendMouseMessage({
+    button: MOUSE_BUTTON.LEFT,
+    action: ACTION.DOWN,
+    x,
+    y,
+  });
+  await veGameSdkInstance.sendMouseMessage({
+    button: MOUSE_BUTTON.LEFT,
+    action: ACTION.UP,
+    x,
+    y,
+  });
+};
+
+const touchToMouseMoveEvent = (veGameSdkInstance) => {
+  let touchstartTs = 0; // 记录touchstart的时间戳
+  const clickInterval = 1000; // 如果间隔大于1s，则认为是鼠标滑动，否则认为是点击
+  // 在触摸移动事件中，检查从触摸开始到当前的时间间隔, 如果时间间隔大于 dragInterval，则将状态设置为拖拽，并发送鼠标按下的消息。
+  // 如果时间间隔小于 dragInterval，则继续处理为滑动。
+  const dragInterval = 200;
+  let inTouchMove = false;
+  let inDrag = false;
+
+  veGameSdkInstance.on("on-touch-event", async (touchList) => {
+    if (touchList.length !== 1) return;
+
+    const { action, x, y, movementX, movementY } = touchList.pop();
+    if (action === ACTION.TOUCH_START) {
+      touchstartTs = Date.now(); // 记录手指触屏的时间
+    }
+    if (action === ACTION.TOUCH_END) {
+      inTouchMove = false;
+      // 拖拽过程中，手指抬起离屏
+      if (inDrag) {
+        console.log("[Drag End]:", x, y);
+        inDrag = false;
+        veGameSdkInstance.sendMouseMessage({
+          button: MOUSE_BUTTON.LEFT,
+          action: ACTION.UP,
+          x,
+          y,
+        });
+        return;
+      }
+      if (Date.now() - touchstartTs < clickInterval) {
+        mouseLeftClick(x, y, veGameSdkInstance); // 如果触屏和离屏的时间小于某个阈值，则视为一次点击
+        return;
+      }
+      // 其他情况，滑动结束
+    }
+    if (action === ACTION.TOUCH_MOVE) {
+      console.log("[Touch Move]:", x, y);
+      if (!inTouchMove && Date.now() - touchstartTs > dragInterval) {
+        inDrag = true;
+        // 如果是拖拽效果，鼠标左键先按下
+        console.log("[Drag start]:", x, y);
+        veGameSdkInstance.sendMouseMessage({
+          button: MOUSE_BUTTON.LEFT,
+          action: ACTION.DOWN,
+          x,
+          y,
+        });
+      }
+      // 鼠标滑动
+      console.log("[Mouse Move]:", x, y);
+      veGameSdkInstance.sendMouseMessage({
+        action: ACTION.MOVE,
+        x,
+        y,
+        movementX,
+        movementY,
+      });
+      inTouchMove = true;
+    }
+  });
+};
+
+export default touchToMouseMoveEvent;

QuickStart/Web/src/main.js

@@ -196,6 +196,8 @@ function bindEventListener(veGameSdkInstance, callback) {
             "com.pkg3",
           ]),
         },
+        // 关闭默认Touch事件
+        disableDefaultTouchEvent: true,
       });
       console.log("start success", startRes);