L'API Pointer Lock a récemment été ajoutée à Chrome Canary et à la version en développement. Bonne nouvelle ! Attends, quoi ? Vous n'avez pas entendu parler de l'API Pointer Lock ? En résumé, l'API Pointer Lock permet de créer de bons jeux de tir à la première personne pour le Web.
L'implémentation de Chrome permet à une page Web en plein écran de vous demander l'autorisation de capturer le pointeur de la souris pour que vous ne puissiez pas le déplacer en dehors de la page. Cela permet aux développeurs Web de créer des applications et des jeux en 3D sans avoir à se soucier du déplacement du curseur de la souris en dehors de la page. Lorsque le pointeur est verrouillé, les attributs movementX et movementY des événements de déplacement du pointeur sont définis. Ils indiquent le niveau de déplacement de la souris depuis le dernier événement de déplacement. Comme d'habitude pour les API de pointe, ces attributs sont précédés du préfixe du fournisseur. Vous devez donc utiliser webkitMovementX et une instruction similaire.
Pour activer l'API de verrouillage du pointeur dans les versions actuelles de Chrome, le plus simple est d'accéder à about:flags et d'activer l'indicateur "Activer le verrouillage du pointeur". Vous pouvez également l'activer en démarrant Chrome à l'aide de l'indicateur de ligne de commande --enable-pointer-lock.
Il y a déjà quelques démos intéressantes qui tirent parti de cette fonctionnalité. Regardez la démonstration WebGL de Quake 3 de Brandon Jones et découvrez comment l'API Pointer Lock fait du jeu FPS WebGL une opportunité viable. Webgl Street Viewer est une autre démonstration intéressante.
Pour commencer à utiliser l'API Pointer Lock, voici un petit extrait extrait de 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>
Un exemple plus complet est disponible sur la page html5-demos.com. Pour en savoir plus, consultez la page suivante:
- Article de blog de Vincent Scheib (éditeur de spécifications)
- Documentation sur MN
- Spécification W3C