Je suis en train de créer un jeu de tir 3D à la première personne dans le navigateur à l'aide de WebGL. Comment implémenter mouselook / free look pour un tel jeu?
Je suis en train de créer un jeu de tir 3D à la première personne dans le navigateur à l'aide de WebGL. Comment implémenter mouselook / free look pour un tel jeu?
Réponses:
Mouselook est désormais pris en charge dans Chrome et Firefox via la spécification W3C Pointer Lock . Essentiellement:
document.onmousemove = function (e) {
document.body.innerHTML = "<div>dx: " +
(e.movementX || e.mozMovementX || e.webkitMovementX || 0);
}
document.body.onclick = document.body.requestPointerLock ||
document.body.mozRequestPointerLock ||
document.body.webkitRequestPointerLock;
Un bon article de didacticiel est Pointer Lock et First Person Shooter Controls on HTML5Rocks.
Capturez des mousemove
événements et utilisez les propriétés screenX
et screenY
de l'objet événement pour mettre à jour la position de la caméra (utilisez le delta jusqu'au dernier screenX
et la screenY
position pour obtenir la quantité de mouvement).
Si vous avez une sorte de scénario , vous pouvez créer une configuration de nœud comme celle-ci:
CameraNode (Scene Node)
|
+- YawNode (Scene Node)
|
+- PitchNode (Scene Node)
|
+- Camera (actual Camera Object)
Le mouvement dans l'axe X fait tourner le YawNode et le mouvement dans l'axe Y fait pivoter le PitchNode. Le CameraNode sera déplacé lorsque le joueur se déplace.
C'est assez simple et ne prend que deux choses.
Voici quelques exemples de code source pour la gestion des événements. Le module système (qui gère toutes les interactions du navigateur <--> du jeu) garde une trace de deux variables: lastMousePosition
et lastMouseDelta
.
Pour suivre la caméra avec la souris, il vous suffit de lastMouseDelta
savoir comment vous saurez combien de degrés pour faire pivoter image par image.
var canvas = /* WebGL rendering context */
canvas.onmousedown = function (event) { me.handleMouseDown(event); };
canvas.onmouseup = function (event) { me.handleMouseUp(event); };
canvas.onmousemove = function (event) { me.handleMouseMove(event); };
// snip
engine.SystemModule.prototype.handleMouseMove = function(event) {
this.lastMouseDelta = [event.clientX - this.lastMousePosition[0],
event.clientY - this.lastMousePosition[1]];
this.lastMousePosition = [event.clientX, event.clientY];
};
Voici un exemple de code pour gérer la rotation de la caméra. Compte tenu du nombre de pixels que la souris a déplacés dans la direction X ou Y, faites pivoter la caméra de ce nombre de degrés.
/**
* degrees/pixel
* @const
*/
var cameraMouseRotation = 0.5;
// Mouse movement for camera angle.
if (sys.isMouseDown()) {
var positionChange = sys.getLastMousePositionDelta();
camera.rotateYDegs(cameraMouseRotation * positionChange[0]);
camera.rotateXDegs(-cameraMouseRotation * positionChange[1]);
}
Plus tard, lorsque vous allez réellement rendre votre monde, générez simplement une matrice de vue modèle à partir de votre caméra. (En convertissant la position, le lacet, le tangage et le roulis de la caméra en vecteurs, vous pouvez passer à gluLookAt.) Et vous devriez être prêt à partir.