输入处理

ESEngine 通过 Input 资源提供输入处理。InputPlugin 由 createWebApp() 自动注册，绑定 DOM 键盘、鼠标、触摸和滚轮事件。

在系统中使用输入

通过 Res(Input) 系统参数访问输入状态：

import { defineSystem, addSystem, Res, Input, Query, Mut, LocalTransform } from 'esengine';

addSystem(defineSystem(
    [Res(Input), Query(Mut(LocalTransform))],
    (input, query) => {
        for (const [entity, transform] of query) {
            if (input.isKeyDown('KeyW')) {
                transform.position.y -= 5;
            }
            if (input.isKeyDown('KeyS')) {
                transform.position.y += 5;
            }
            if (input.isKeyDown('KeyA')) {
                transform.position.x -= 5;
            }
            if (input.isKeyDown('KeyD')) {
                transform.position.x += 5;
            }
        }
    }
));

键盘输入

按键状态

// 当前被按住（按住期间每帧为 true）
if (input.isKeyDown('Space')) {
    charge();
}

// 这帧刚被按下（仅一帧为 true）
if (input.isKeyPressed('Space')) {
    jump();
}

// 这帧刚被释放（仅一帧为 true）
if (input.isKeyReleased('Space')) {
    releaseCharge();
}

提示

一次性动作（跳跃、射击）使用 isKeyPressed，持续性动作（移动、蓄力）使用 isKeyDown。

按键码

使用标准 DOM 按键码：

// 字母
'KeyA', 'KeyB', ... 'KeyZ'

// 数字
'Digit0', 'Digit1', ... 'Digit9'

// 特殊键
'Space', 'Enter', 'Escape', 'Tab'
'ShiftLeft', 'ShiftRight', 'ControlLeft', 'ControlRight'

// 方向键
'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'

// 功能键
'F1', 'F2', ... 'F12'

鼠标输入

const mousePos = input.getMousePosition();
console.log(`鼠标位置: ${mousePos.x}, ${mousePos.y}`);

if (input.isMouseButtonDown(0)) {  // 左键
    // 处理点击
}
if (input.isMouseButtonDown(2)) {  // 右键
    // 处理右键点击
}

// 这帧刚按下 / 释放
if (input.isMouseButtonPressed(0)) {
    onClickStart();
}
if (input.isMouseButtonReleased(0)) {
    onClickEnd();
}

滚轮输入

const scroll = input.getScrollDelta();
if (scroll.y !== 0) {
    zoomCamera(scroll.y);
}

触摸输入

触摸输入与鼠标输入统一处理，实现跨平台支持：

if (input.isMouseButtonDown(0)) {
    const pos = input.getMousePosition();
    handleTap(pos.x, pos.y);
}

提示

设计输入处理时应同时兼容鼠标和触摸。Input 资源提供了统一的接口。

示例：玩家移动

定义 Player 和 MoveSpeed 组件，在场景编辑器中挂载到实体上，然后编写移动系统：

import {
    defineSystem, defineComponent, defineTag, addSystem,
    Res, Input, Time, Query, Mut, LocalTransform
} from 'esengine';

const Player = defineTag('Player');
const MoveSpeed = defineComponent('MoveSpeed', { value: 200 });

addSystem(defineSystem(
    [Res(Input), Res(Time), Query(Mut(LocalTransform), MoveSpeed, Player)],
    (input, time, query) => {
        for (const [entity, transform, speed] of query) {
            const velocity = { x: 0, y: 0 };

            if (input.isKeyDown('KeyW') || input.isKeyDown('ArrowUp')) {
                velocity.y = -1;
            }
            if (input.isKeyDown('KeyS') || input.isKeyDown('ArrowDown')) {
                velocity.y = 1;
            }
            if (input.isKeyDown('KeyA') || input.isKeyDown('ArrowLeft')) {
                velocity.x = -1;
            }
            if (input.isKeyDown('KeyD') || input.isKeyDown('ArrowRight')) {
                velocity.x = 1;
            }

            const len = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y);
            if (len > 0) {
                velocity.x /= len;
                velocity.y /= len;
            }

            transform.position.x += velocity.x * speed.value * time.delta;
            transform.position.y += velocity.y * speed.value * time.delta;
        }
    }
));