이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

François Beaufort

가속된 움직임은 마우스나 트랙패드를 사용하여 화면에서 포인터를 이동할 때의 인체공학적 기능입니다. 천천히 움직여 정확한 움직임을 허용하면서도 빠르고 짧은 모션으로 포인터가 전체 화면을 가로지르도록 허용합니다. 구체적으로 마우스를 이동하는 동일한 실제 거리에 대해 이동 거리가 더 빨랐다면 화면의 포인터가 더 멀리 이동합니다.

운영체제는 기본적으로 마우스 가속을 사용 설정합니다. 일부 퍼스트 파티 관점 게임 (일반적으로 FPS)에서는 가속 조정 없이 카메라 회전을 제어하는 데 원시 마우스 입력 데이터가 사용됩니다. 느리거나 빠르거나 동일한 물리적 모션을 사용하면 동일한 회전이 발생합니다. 이에 따라 전문 게이머에 따르면 게임 환경이 개선되고 정확성이 높아졌습니다.

Windows 10 설정의 포인터 모션 제어 스크린샷 — Windows 10 설정의 포인터 모션 컨트롤

Chrome 88부터 웹 앱은 업데이트된 포인터 잠금 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에서 지원됩니다. Linux는 그다음에 지원될 예정입니다.

샘플

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

유용한 링크

감사의 말씀

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