마우스 가속을 사용 중지하여 더 나은 FPS 게임 환경을 제공합니다.

이제 웹 앱에서 포인터 이벤트를 캡처할 때 마우스 가속을 사용 중지할 수 있습니다.

François Beaufort

가속된 움직임은 마우스나 트랙패드를 사용하여 화면에서 포인터를 이동할 때의 인체공학적 기능입니다. 천천히 움직이면서 포인터가 빠른 짧은 동작으로 전체 화면을 가로지르도록 하여 정밀한 이동을 가능하게 합니다. 특히 마우스를 움직이는 것과 동일한 물리적 거리의 경우 거리가 더 빠르게 이동하면 화면의 포인터가 더 멀리 이동합니다.

운영체제는 기본적으로 마우스 가속을 사용 설정합니다. 일부 퍼스트 파티 관점 게임(일반적으로 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");
});

마우스 가속 사용 중지

{ unadjustedMovement: true }를 사용하여 requestPointerLock()를 호출하여 마우스 가속의 OS 수준 조정을 사용 중지하고 원시 마우스 입력에 액세스합니다. 이렇게 하면 포인터가 잠겨 있을 때 mousemove 이벤트의 마우스 이동 데이터에 마우스 가속이 포함되지 않습니다.

requestPointerLock()에서 반환된 새 Promise를 사용하여 요청이 성공했는지 확인합니다.

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는 브라우저에서 잘 지원됩니다. 그러나 2020년 10월 현재 마우스 가속의 OS 수준 조정 사용 중지를 지원하는 브라우저는 Chromium 기반 브라우저(예: Chrome, Edge 등)뿐입니다. 업데이트된 내용은 MDN의 브라우저 호환성 표를 참고하세요.

운영체제 지원

마우스 가속에 대한 OS 수준 조정을 사용 중지하는 기능은 ChromeOS, macOS Catalina 10.15.1, Windows에서 지원됩니다. 리눅스도 그 뒤를 따를 것입니다.

샘플

Glitch에서 샘플을 실행하여 Pointer Lock API를 사용해 볼 수 있습니다. 소스 코드를 확인해야 합니다.

유용한 링크

• 설명 자료
• 사양 PR
• GitHub 저장소
• ChromeStatus 항목
• Chrome 추적 버그
• 발송 예정
• Mozilla의 입장
• WebKit의 위치

감사의 말씀

이 도움말을 검토해 주신 제임스 홀리어, 토마스 슈타이너, 조 메들리, 케이스 바스케스, 빈센트 셰이브님께 감사드립니다.