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

Ilmari Heikkinen
X 홈페이지

최근 Chrome Canary와 개발자 채널에 도입된 Pointer Lock API는 기쁜 소식을 전합니다. 잠깐, 뭐지? Pointer Lock API에 대해 들어본 적이 있으신가요? 간단히 말해 Pointer Lock API를 사용하면 웹에 적합한 1인칭 슈팅 게임을 작성할 수 있습니다.

Chrome을 구현하면 전체 화면 웹페이지에서 마우스 포인터를 캡처할 권한을 요청하여 페이지 외부로 이동할 수 없습니다. 따라서 웹 개발자는 마우스 커서가 페이지 밖으로 이동하는 것을 걱정할 필요 없이 3D 게임과 애플리케이션을 작성할 수 있습니다. 포인터가 잠겨 있으면 포인터 이동 이벤트에는 마지막 이동 이벤트 이후 마우스가 얼마나 움직였는지 알려주는 movementX 및 movementY 속성이 정의되어 있습니다. 최첨단 API와 마찬가지로 이러한 속성은 공급업체 접두사로 지정되므로 webkitMovementX 등을 사용해야 합니다.

현재 Chrome 빌드에서 Pointer Lock API를 사용 설정하려면 about:flags로 이동하여 '포인터 잠금 사용 설정' 플래그를 사용 설정하는 것이 가장 쉽습니다. --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>

html5-demos.com에서 전체 예를 확인할 수 있습니다. 자세한 내용은 다음을 확인하세요.