이제 웹 앱이 포인터 이벤트를 캡처할 때 마우스 가속을 사용 중지할 수 있습니다.
빠른 이동은 마우스나 트랙패드를 사용하여 화면에서 포인터를 움직일 때 인체 공학적 기능입니다. 빠르게 움직여서 정확하게 움직이는 동시에 빠른 동작으로 포인터가 전체 화면을 가로지르도록 할 수 있습니다. 특히 마우스를 이동하는 거리와 동일한 물리적 거리에서 화면의 포인터는 이동 거리가 더 빠르면 더 멀리 이동합니다.
운영체제에서 기본적으로 마우스 가속을 사용할 수 있습니다. 일부 퍼스트 파티 관점 게임과 일반적인 1인칭 슈팅 게임 (FPS)에서는 원시 마우스 입력 데이터가 가속 조정 없이 카메라 회전을 제어하는 데 사용됩니다. 느리거나 빠르게 같은 물리적 움직임이 동일한 회전을 초래합니다. 전문 게이머에 따르면 이를 통해 게임 환경이 개선되고 정확도가 높아집니다.
Chrome 88부터 웹 앱은 업데이트된 Pointer Lock API를 통해 가속 및 비 가속 마우스 이동 데이터 간에 전환할 수 있습니다.
Google Stadia 및 Nvidia GeForce Now와 같은 웹 기반 게임 플랫폼은 이미 이러한 새로운 기능을 사용하여 FPS 게이머를 만족시키고 있습니다.
API 사용
포인터 잠금 요청
포인터 잠금은 데스크톱 애플리케이션이 포인터 아이콘을 숨기고 마우스 움직임을 다른 것으로 해석하는 경우(예: 3D 세계에서 주변을 둘러봄)의 표준 용어입니다.
mousemove 문서 이벤트의 movementX 및 movementY 속성은 마지막 이동 이벤트 이후 마우스 포인터가 얼마나 움직였는지 알려줍니다. 그러나 포인터가 웹페이지 외부로 이동할 때는 업데이트되지 않습니다.
document.addEventListener("mousemove", (event) => {
console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});
마우스 포인터를 캡처하거나 포인터 잠금을 요청하면 포인터가 더 이상 밖으로 움직이는 것을 걱정할 필요가 없습니다. 이는 몰입형 웹 게임에 특히 유용합니다. 포인터가 잠겨 있으면 모든 마우스 이벤트가 포인터 잠금의 타겟 요소로 이동합니다.
타겟 요소에서 requestPointerLock()를 호출하여 포인터 잠금을 요청하고 pointerlockchange 및 pointerlockerror 이벤트를 수신 대기하여 포인터 잠금 변경사항을 모니터링합니다.
const myTargetElement = document.body;
// Call this function to request a pointer lock.
function requestPointerLock() {
myTargetElement.requestPointerLock();
}
document.addEventListener("pointerlockchange", () => {
if (document.pointerLockElement) {
console.log(`pointer is locked on ${document.pointerLockElement}`);
} else {
console.log("pointer is unlocked");
}
});
document.addEventListener("pointerlockerror", () => {
console.log("pointer lock error");
});
마우스 가속 사용 중지
마우스 가속에 관한 OS 수준 조정을 사용 중지하고 원시 마우스 입력에 액세스하려면 { unadjustedMovement: true }로 requestPointerLock()를 호출합니다.
이렇게 하면 포인터가 잠겨 있을 때 mousemove 이벤트의 마우스 이동 데이터에 마우스 가속이 포함되지 않습니다.
requestPointerLock()에서 새로 반환된 프로미스를 사용하여 요청이 성공했는지 확인합니다.
function requestPointerLockWithUnadjustedMovement() {
const promise = myTargetElement.requestPointerLock({
unadjustedMovement: true,
});
if (!promise) {
console.log("disabling mouse acceleration is not supported");
return;
}
return promise
.then(() => console.log("pointer is locked"))
.catch((error) => {
if (error.name === "NotSupportedError") {
// Some platforms may not support unadjusted movement.
// You can request again a regular pointer lock.
return myTargetElement.requestPointerLock();
}
});
}
포인터 잠금을 해제하지 않고 가속 및 비 가속 마우스 이동 데이터 간에 전환할 수 있습니다. 원하는 옵션을 사용하여 포인터 잠금을 다시 요청하면 됩니다. 요청이 실패하면 원래 잠금이 그대로 유지되고 반환된 프로미스가 거부됩니다. 변경 요청이 실패하면 포인터 잠금 이벤트가 실행되지 않습니다.
브라우저 지원
Pointer Lock API는 여러 브라우저에서 잘 지원됩니다. 그러나 Chromium 기반 브라우저 (예: Chrome, Edge 등)에서만 마우스 가속의 OS 수준 조정 사용 중지를 2020년 10월부터 지원합니다. 업데이트는 MDN의 브라우저 호환성 표를 참조하세요.
운영체제 지원
마우스 가속을 위한 OS 수준 조정 사용 중지는 ChromeOS, macOS Catalina 10.15.1, Windows에서 지원됩니다. 리눅스도 뒤따를 것입니다.
샘플
Glitch에서 샘플을 실행하여 Pointer Lock API를 사용해 볼 수 있습니다. 소스 코드를 확인하세요.
유용한 링크
감사의 말
이 기사에 대한 리뷰를 제공해 주신 제임스 홀리어, 토마스 슈타이너, 조 메들리, 카이스 바스크, 빈센트 샤이브에게 감사드립니다.