Pointer Lock API พร้อมใช้งานใน Chrome Canary และเวอร์ชันที่กำลังพัฒนาเมื่อเร็วๆ นี้ ทุกคนต่างยินดี! เดี๋ยวนะ อะไรนะ ยังไม่เคยได้ยินเกี่ยวกับ Pointer Lock API เลยใช่ไหม กล่าวโดยสรุปคือ Pointer Lock API ช่วยให้สามารถเขียนเกมยิงมุมมองผู้เล่นที่เหมาะสมสำหรับเว็บ
การใช้งาน Chrome ทำให้หน้าเว็บแบบเต็มหน้าจอสามารถขอสิทธิ์จากคุณในการจับภาพเคอร์เซอร์เมาส์เพื่อที่คุณจะไม่สามารถเลื่อนหน้าเว็บนั้นไปนอกหน้าเว็บได้ ซึ่งช่วยให้นักพัฒนาเว็บเขียนเกมและแอปพลิเคชัน 3 มิติได้โดยไม่ต้องกังวลว่าเคอร์เซอร์ของเมาส์จะขยับออกไปนอกหน้าเว็บ เมื่อเคอร์เซอร์ล็อก เหตุการณ์การย้ายเคอร์เซอร์จะมีแอตทริบิวต์ movementX
และ movementY
ที่กำหนดไว้ซึ่งจะบอกปริมาณการเลื่อนเมาส์นับตั้งแต่เหตุการณ์การย้ายครั้งล่าสุด เช่นเดียวกันกับ API ของ Bleed Edge แอตทริบิวต์เหล่านี้จะขึ้นต้นด้วยผู้ให้บริการ ดังนั้นคุณจึงต้องใช้ webkitMovementX
และอื่นๆ
หากต้องการเปิดใช้ Pointer Lock API ใน Chrome บิลด์ปัจจุบัน วิธีที่ง่ายที่สุดคือไปที่ about:flags
และเปิดแฟล็ก "เปิดใช้การล็อกตัวชี้" นอกจากนี้คุณยังเปิดใช้ได้โดยเริ่มต้น Chrome โดยใช้แฟล็กบรรทัดคำสั่ง --enable-pointer-lock
ตอนนี้มีการสาธิตเจ๋งๆ บางส่วนที่ใช้ประโยชน์จากฟีเจอร์นี้แล้ว ลองดูการสาธิต Quake 3 WebGL โดย Brandon Jones เพื่อดูว่า Pointer Lock API ช่วยให้เกม WebGL เป็นเกมที่มีโอกาสประสบความสำเร็จได้อย่างไร การสาธิตสุดเจ๋งอีกอย่างหนึ่งคือ 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 สำหรับข้อมูลเพิ่มเติม โปรดดูที่
- บล็อกโพสต์ของ Vincent Scheib (เครื่องมือแก้ไขข้อกำหนด)
- เอกสารประกอบ MN
- การระบุ W3C