Pointer Lock API นำเกม FPS มาไว้ในเบราว์เซอร์

Pointer Lock API เพิ่งเปิดตัวใน Chrome Canary และเวอร์ชันที่กำลังพัฒนา ยินดีด้วยทุกคน เดี๋ยว อะไรนะ คุณไม่เคยได้ยินเกี่ยวกับ Pointer Lock API ใช่ไหม กล่าวโดยย่อคือ Pointer Lock API ช่วยให้เขียนเกมยิงมุมมองบุคคลที่หนึ่งบนเว็บได้อย่างเหมาะสม

การใช้งาน Chrome ช่วยให้หน้าเว็บแบบเต็มหน้าจอขอสิทธิ์จับภาพเคอร์เซอร์เมาส์ได้ เพื่อไม่ให้คุณย้ายเคอร์เซอร์ออกนอกหน้าเว็บได้ ซึ่งช่วยให้นักพัฒนาเว็บเขียนเกมและแอปพลิเคชัน 3 มิติได้โดยไม่ต้องกังวลว่าเคอร์เซอร์ของเมาส์จะเลื่อนออกไปนอกหน้า เมื่อล็อกเคอร์เซอร์ไว้ เหตุการณ์การเลื่อนเคอร์เซอร์จะมีการกำหนดแอตทริบิวต์ movementX และ movementY ซึ่งจะบอกระยะทางที่เคอร์เซอร์เลื่อนตั้งแต่เหตุการณ์การเลื่อนครั้งล่าสุด ตามปกติแล้ว แอตทริบิวต์เหล่านี้จะมีคำนำหน้าของผู้ให้บริการ คุณจึงต้องใช้ webkitMovementX และอื่นๆ

หากต้องการเปิดใช้ Pointer Lock API ใน Chrome เวอร์ชันปัจจุบัน วิธีที่ง่ายที่สุดคือไปที่ about:flags แล้วเปิด Flag "เปิดใช้ Pointer Lock" นอกจากนี้ คุณยังเปิดใช้ได้โดยเริ่ม Chrome โดยใช้แฟล็กบรรทัดคำสั่ง --enable-pointer-lock

เรามีตัวอย่างเจ๋งๆ 2-3 รายการที่ใช้ประโยชน์จากฟีเจอร์นี้อยู่แล้ว ดูการสาธิต Quake 3 WebGL โดย Brandon Jones เพื่อดูว่า Pointer Lock API ทําให้เกม FPS บน WebGL มีโอกาสเติบโตได้อย่างไร การสาธิตที่น่าสนใจอีกอย่างหนึ่งคือ WebGL Street Viewer

ต่อไปนี้เป็นตัวอย่างข้อมูลสั้นๆ จาก MDN เพื่อช่วยในการเริ่มต้นใช้งาน Pointer Lock API

<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>