Obecnie tworzę 3D strzelankę FPS w przeglądarce za pomocą WebGL. Jak mógłbym wdrożyć taką grę dla mouselook / free look ?
Obecnie tworzę 3D strzelankę FPS w przeglądarce za pomocą WebGL. Jak mógłbym wdrożyć taką grę dla mouselook / free look ?
Odpowiedzi:
Mouselook jest teraz obsługiwany w Chrome i Firefox przez specyfikację blokady wskaźnika W3C . Głównie:
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;
Dobry artykuł na samouczek to Blokada wskaźnika i Sterowanie FPS w HTML5Rocks.
Przechwytuj mousemove
zdarzenia i użyj właściwości screenX
i screenY
obiektu zdarzenia, aby zaktualizować pozycję kamery (użyj delty do ostatniej screenX
i screenY
pozycji, aby uzyskać ilość ruchu).
Jeśli masz scenariusz , możesz zbudować konfigurację węzła w następujący sposób:
CameraNode (Scene Node)
|
+- YawNode (Scene Node)
|
+- PitchNode (Scene Node)
|
+- Camera (actual Camera Object)
Ruch w osi X obraca węzeł YawNode, a ruch w osi Y obraca węzeł PitchNode. CameraNode zostanie przesunięty, gdy gracz się poruszy.
To dość proste i wymaga tylko dwóch rzeczy.
Oto przykładowy kod źródłowy do obsługi obsługi zdarzeń. Moduł systemu (który obsługuje wszystkie interakcje przeglądarki <--> w grze) śledzi dwie zmienne: lastMousePosition
i lastMouseDelta
.
Aby śledzić kamerę za pomocą myszy, wystarczy, lastMouseDelta
że będziesz wiedzieć, ile stopni obrócić klatka po klatce.
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];
};
Oto przykładowy kod do obsługi obrotu kamery. Biorąc pod uwagę liczbę pikseli, które myszka przesunęła w kierunku X lub Y, obróć kamerę o tyle stopni.
/**
* 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]);
}
Później, kiedy faktycznie zaczniesz renderować swój świat, po prostu wygeneruj matrycę widoku modelu z kamery. (Przekształcając pozycję kamery, odchylenie, pochylenie i rolowanie w wektory, które możesz przekazać do gluLookAt.) I powinieneś być dobry.