键鼠触控映射--云手机-火山引擎

文档中心

立即注册

导航

键鼠触控映射

最近更新时间：2024.05.09 20:04:11首次发布时间：2023.12.18 10:43:50

功能介绍

当客户业务存在云机游戏应用，且游戏应用为触屏事件（如示例图-图1所示），当在 PC 访问时，只能通过鼠标操作不便捷。可以采用此功能方案，模拟键盘转鼠标或触控功能，实现模拟触屏事件。

功能场景

键盘操作触控游戏

云手机 SDK 不提供 UI 层面展现，该 UI 层（如示例图-图2所示）需业务应用开发。即业务应用处理按键 UI 展现以及 UI 对应屏幕左边，然后参考示例代码监听按键事件，发送 Touch 事件至云机实例。

业务应用可以监听 remote-app-switched-foreground 和 remote-app-switched-background 判断云机游戏应用是否被切换到前台，根据此状态判断是否显示业务应用 UI 层。

示例代码

键盘事件获取代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>

</style>
</head>
<body>
    <script>
        const centralPointList = [0.3,0.3]; // 中心点坐标
        const stepRange =0.1; // 横/竖轴移动步幅，x,y可为不同值
        const intervalTime = 100;  // 触发间隔时间
        let hasKeyPress = true; // 当前是否仍存在keydown
        let intervalId =0; // 计时器ID
        const keyPressMap = { // 当前状态及变化方向
            'KeyA':{
                status: 0,
                direction:[-1,0]
            },
            'KeyW':{
                status: 0,
                direction:[0,1]
            },
            'KeyS':{
                status: 0,
                direction:[0,-1]
            },
            'KeyD':{
                status: 0,
                direction:[1,0]
            }
        }
        const print = (stage,msg)=>{
            console.warn(stage, msg);
        }
        const touchStart = (msg) =>{
            print('touchStart', msg)
        }
        const touchMove = (msg) =>{
            print('touchMove', msg)
        }
        const touchEnd = (msg) =>{
            print('touchEnd', msg)
        }
        const keydown = (e)=>{
            // console.log('keydown', e);
            if(keyPressMap?.[e?.code]){
                keyPressMap[e.code].status = 1;
                if(!hasKeyPress){
                    hasKeyPress = true;
                    touchStart(centralPointList);
                    sendPressFn(touchMove);
                    intervalId = setInterval(sendPressFn,100); // 间隔100s，一直响应keydown
                }
                e.preventDefault();
            }
        }
        const sendPressFn = ()=>{
            let xDirection = 0;
            let yDirection = 0;
            Object.values(keyPressMap).forEach(item=>{
                    if(item?.status){
                        xDirection += item?.direction?.[0];
                        yDirection += item?.direction?.[1];
                    }
                })
                const movePosition  = [centralPointList?.[0]+xDirection*stepRange,centralPointList?.[1]+yDirection*stepRange ];
                touchMove(movePosition)
        }
        const keyup = (e)=>{
            // console.log('keyup', e);
            if(keyPressMap?.[e?.code]){
                keyPressMap[e.code].status = 0;
                hasKeyPress =  !!Object.values(keyPressMap).find(item=>item?.status); //判断是否全部keyup了;
                if(!hasKeyPress){
                    clearInterval(intervalId);
                    const movePosition  = [centralPointList?.[0]+keyPressMap[e.code]?.direction?.[0]*stepRange,centralPointList?.[1]+keyPressMap[e.code]?.direction?.[1]*stepRange ]
                    touchEnd(movePosition);
                }
                e.preventDefault();
            }
        }
        document.addEventListener('keydown', keydown);
        document.addEventListener('keyup', keyup);

    </script>
</body>
</html>

SDK 方法调用示例

document.addEventListener('keydown', (e) => {
    if (e.key === 'w') { // 模拟拖拽功能
        e.preventDefault();
        player.sendTouchMessage({
            pointerId: 0,
            action: 0, // touch start
            x: 0.28481,
            y: 0.84557,
        });
        player.sendTouchMessage({
            pointerId: 0,
            action: 2, // touch move
            x: 0.28481,
            y: 0.74557,
        });
        setTimeout(() => {
            player.sendTouchMessage({
                pointerId: 0,
                action: 1, // touch end
                x: 0.28481,
                y: 0.74557,
            });
        }, 0);
    }
    if (e.key === 'l') { // 模拟点击功能
        e.preventDefault();
        player.sendTouchMessage({
            pointerId: 0,
            action: 0,
            x: 0.03797,
            y: 0.14557,
        });
        player.sendTouchMessage({
            pointerId: 0,
            action: 1,
            x: 0.03797,
            y: 0.14557,
        });
    }
});
on('remote-game-switched-background', d => { // 监听云机应用切换到后台，关闭业务UI及键盘触控监听
    console.warn('backgroundApp', d);
});
on('remote-game-switched-foreground', d => {// 监听云机应用切换到前台，开启业务UI及键盘触控监听
    console.warn('foregroundApp', d);
});

云手机

功能介绍

功能场景

键盘操作触控游戏

相关API

Web

示例代码

键盘事件获取代码示例

SDK 方法调用示例

示例图

图1 - 触屏游戏应用

图2 - UI 层示例