Pointer Lock API가 최근 Chrome Canary 및 개발자 채널에 출시되었습니다. 잠깐, 뭐라고요? Pointer Lock API에 대해 들어보셨나요? 간단히 말해 Pointer Lock API를 사용하면 웹용으로 적절한 FPS 게임을 작성할 수 있습니다.
Chrome 구현을 사용하면 전체 화면 웹페이지에서 마우스 포인터를 캡처할 권한을 요청할 수 있으므로 페이지 외부로 마우스 포인터를 이동할 수 없습니다. 이를 통해 웹 개발자는 마우스 커서가 페이지 외부로 이동하는 것을 걱정하지 않고 3D 게임과 애플리케이션을 작성할 수 있습니다. 포인터가 잠겨 있으면 포인터 이동 이벤트에 마지막 이동 이벤트 이후 마우스가 이동한 거리를 나타내는 movementX 및 movementY 속성이 정의됩니다. 최신 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>