브라우저에 FPS 게임을 제공하는 Pointer Lock API

Ilmari Heikkinen

Pointer Lock API가 최근 Chrome Canary 및 개발자 채널에 출시되었습니다. 잠깐, 뭐라고요? Pointer Lock API에 대해 들어보셨나요? 간단히 말해 Pointer Lock API를 사용하면 웹용으로 적절한 FPS 게임을 작성할 수 있습니다.

Chrome 구현을 사용하면 전체 화면 웹페이지에서 마우스 포인터를 캡처할 권한을 요청할 수 있으므로 페이지 외부로 마우스 포인터를 이동할 수 없습니다. 이를 통해 웹 개발자는 마우스 커서가 페이지 외부로 이동하는 것을 걱정하지 않고 3D 게임과 애플리케이션을 작성할 수 있습니다. 포인터가 잠겨 있으면 포인터 이동 이벤트에 마지막 이동 이벤트 이후 마우스가 이동한 거리를 나타내는 movementXmovementY 속성이 정의됩니다. 최신 API와 마찬가지로 이러한 속성에는 공급업체 접두사가 있으므로 webkitMovementX 등을 사용해야 합니다.

현재 Chrome 빌드에서 Pointer Lock API를 사용 설정하는 가장 쉬운 방법은 about:flags로 이동하여 'Enable Pointer Lock' 플래그를 사용 설정하는 것입니다. --enable-pointer-lock 명령줄 플래그를 사용하여 Chrome을 시작하여 사용 설정할 수도 있습니다.

이 기능을 활용한 멋진 데모가 이미 몇 개 있습니다. 브랜든 존스의 Quake 3 WebGL 데모를 확인하여 Pointer Lock API를 통해 WebGL FPS 게임을 실현할 수 있는 방법을 알아보세요. 또 다른 멋진 데모는 Webgl Street Viewer입니다.

Pointer Lock API를 시작하려면 다음과 같이 MDN에서 가져온 작은 스니펫을 참고하세요.

<button onclick="document.body.webkitRequestFullScreen();">No, you lock it up!</button>
<script>
navigator.pointer = navigator.pointer || navigator.webkitPointer;

var onError = function() {
    console.log("Mouse lock was not successful.");
};

document.addEventListener('webkitfullscreenchange', function(e) {
    if (document.webkitIsFullScreen) {
    navigator.pointer.lock(document.body, function() {
        // Locked and ready to play.
    }, onError);
    }
}, false);

document.body.addEventListener('webkitpointerlocklost', function(e) {
    console.log('Pointer lock lost!');
}, false);

document.body.addEventListener('mousemove', function(e) {
    if (navigator.pointer.isLocked) { // got a locked pointer
    var movementX = e.movementX || e.webkitMovementX;
    var movementY = e.movementY || e.webkitMovementY;
    }
}, false);
</script>