HTML5: So blenden Sie mit der Pointer-Lock-API den Mauszeiger bei Bedarf einfach aus

Kein Beitragsbild

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Der Browser wird mehr und mehr zum Ort für Spiele. Dank HTML5 und den neuen JavaScript-APIs lassen sich komplexe und anspruchsvolle Anwendungen realisieren. Dabei ist der Mauszeiger nicht immer der richtige Begleiter. Vor allem, wenn die Steuerung per Tastatur erfolgt, stört der Mauszeiger in der Regel. Daher sorgt die neue Pointer-Lock-API dafür, dass er bei Bedarf einfach ausgeblendet werden kann.

pointer-lock-api

Pointer-Lock-API: Einfaches Aus- und Einblenden per Klick-Event

Mit der Methode „requestPointerLock()“, die einem beliebigen Element zugewiesen werden kann, wird der Browser aufgefordert, den Mauszeiger auszublenden. Der Browser kommt dieser Aufforderung jedoch nur dann nach, wenn sie durch eine Aktion des Nutzers erfolgt. Das bedeutet, es ist nicht möglich, den Mauszeiger bereits beim Laden einer Seite auszublenden. Daher bietet es sich an, per „click“-Event die Methode auszuführen.

document.getElementsByTagName("canvas")[0].addEventListener("click", function() {
  this.requestPointerLock();
}, false);

Im Beispiel wird per Klick auf ein „<canvas>“-Element der Mauszeiger ausgeblendet. Ähnlich wie bei der Fullscreen-API, die den Vollbildmodus des Browsers einschaltet, wird auch bei der Pointer-Lock-API automatisch ein Hinweis eingeblendet, welcher darauf aufmerksam macht, dass der Mauszeiger deaktiviert wurde. Das Fenster weist ebenfalls darauf hin, dass per Drücken der Escape-Taste der Mauszeiger wieder eingeblendet werden kann.

pointer-lock-api_hinweisfenster
Hinweis im Chrome

Während der Mauszeiger deaktiviert ist, bleibt er dort stehen, wo er zuletzt sichtbar war. Bewegungen mit der Maus bleiben also unberücksichtigt. Das heißt auch, dass es nicht möglich ist, den deaktivierten Mauszeiger aus dem Browserfenster zu bewegen. Mausklicks hingegen werden weiterhin berücksichtigt.

Um den Mauszeiger wieder einzublenden, wird die Methode „exitPointerLock()“ aufgerufen. Zusammen mit der Eigenschaft „pointerLockElement“ kann per Klick auf ein Element der Mauszeiger aus- und wieder eingeblendet werden. Ist der Mauszeiger ausgeblendet, besitzt „pointerLockElement“ als Wert das DOM-Element, auf welches die Pointer-Lock-API angewendet wurde. Andernfalls ist der Wert „null“. Per „pointerLockElement.nodeName“ ist es beispielsweise möglich, den Elementnamen des Pointer-Lock-Elements abzufragen – in diesem Fall würde „CANVAS“ als Wert wiedergegeben.

document.getElementsByTagName("canvas")[0].addEventListener("click", function() {
  if (document.pointerLockElement == null) {
    this.requestPointerLock();
  } else {
    document.exitPointerLock();
  }
}, false);

Im Beispiel wird abgefragt, ob „pointerLockElement“ den Wert „null“ hat. Dadurch wird festgestellt, ob der Mauszeiger aktiviert oder deaktiviert ist. Entsprechend werden „requestPointerLock()“ oder „exitPointerLock()“ ausgeführt. Anders als „requestPointerLock()“ ist für das Ausführen von „exitPointerLock()“ keine Aktion des Nutzers nötig. Die Methode muss also nicht zwingend per „click“-Event starten.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Während die Methode „requestPointerLock()“ einem beliebigen Element zugewiesen werden kann, muss „exitPointerLock()“ immer „document“ zugewiesen sein. Da die Pointer-Lock-API noch recht neu ist, sollte der jeweilige Browser-Präfix vorangestellt werden – also etwa „webkitRequestPointerLock()“ und „webkitExitPointerLock()“.

Pointer-Lock-API Advanced: Bewegung des Mauszeigers abfragen

Die Pointer-Lock-API bringt zwei neue Eigenschaften mit, welche die Bewegung der Maus abfragen. Bisher ließen sich bereits mit den Event-Eigenschaften  „clientX“ und „clientY“ die Koordinaten des Mauszeigers innerhalb des Browserfensters ermitteln. Die neuen Eigenschaften „movementX“ und „movementY“ ermitteln die Bewegung des Mauszeigers.

document.addEventListener("mousemove", function(e) {
  document.title = e.clientX + " " + e.movementX;
}

Im Beispiel wird per „mousemove“-Event eine Funktion ausgeführt, welche die jeweiligen Werte für „clientX“ und „movementX“ in den Dokumententitel schreibt. Während „clientX“ die jeweilige Mausposition ausgibt, gibt „movementX“ die Bewegung der Maus auf der X-Achse in Relation zum letzten Ausführen der Funktion aus. Je schneller die Maus auf der X-Achse bewegt wird, desto größer ist der Wert für „movementX“. Während Bewegungen nach rechts (für „movementX“) und unten (für „movementY“) jeweils eine positive Zahl ergeben, wird bei Bewegungen nach links und oben jeweils eine negative Zahl ausgegeben. Wird die Maus gar nicht bewegt, wird 0 wiedergegeben.

Da sich die Position des ausgeblendeten Mauszeigers nicht ändert, bleiben auch die Werte für „clientX“ und „clientY“ unverändert. Sie behalten die Werte, die sie zu dem Zeitpunkt hatten, als der Mauszeiger deaktiviert wurde. Die Eigenschaften „movementX“ und „movementY“ können losgelöst von der Pointer-Lock-API eingesetzt werden – also bei sichtbarem Mauszeiger.

Auch bei den neuen Eigenschaften sollten die ensprechenden Vendor-Präfixe vorangestellt werden – etwa „webkitMovementX“ und „webkitMovementY“.

Pointer-Lock-API for Runaways: auf Statusänderungen und Fehler reagieren

Für die Pointer-Lock-API gibt es zwei Event-Listener. Der Listener „pointerlockchange“ führt immer dann eine Funktion aus, wenn der Mauszeiger aus- oder eingeblendet wird.

document.addEventListener("pointerlockchange", function() {
  if (document.pointerLockElement == null) {
    alert("Der Mauszeiger wurde eingeblendet.");
  } else {
    alert("Der Mauszeiger wurde ausgeblendet.");
  }
}, false);

Im Beispiel wird bei jedem Aus- beziehungsweise Einblenden ein Dialogfenster ausgegeben. Mit der Eigenschaft „pointerLockElement“ stellen wir fest, welcher Status gerade eingetreten ist. Je nach Status erfolgt eine entsprechende Meldung.

Mit dem zweiten Event-Listener „pointerlockerror“ können wir auf einen Fehler beim Aus- oder Einblenden des Mauszeigers reagieren. Wie anfangs bereits erwähnt, blendet der Browser den Mauszeiger nur dann aus, wenn die Methode „requestPointerLock()“ per „click“-Event ausgeführt wird. Rufen wir „requestPointerLock()“ hingegen per „load“-Event auf, verweigert der Browser das Ausblenden. In eben diesem Fall wird das Event „pointerlockerror“ aufgerufen.

document.addEventListener("pointerlockerror", function() {
  alert("Der Mauszeiger konnte nicht ausgeblendet werden.");
}, false);

Auch für „pointerlockchange“ und „pointerlockerror“ gibt es entsprechende Vendor-Varianten – so etwa „webkitpointerlockchange“ und „webkitpointerlockerror“.

Browserunterstützung

Die Pointer-Lock-API wird derzeit von den Desktop-Versionen des Chrome und Firefox unterstützt. Mobile Browser unterstützen die API bislang überhaupt nicht, auch nicht die mobilen Versionen des Chrome und des Firefox. Da die API hauptsächlich im HTML5 Gaming zum Einsatz kommen dürfte, wiegen diese Einschränkungen nicht allzu schwer. Die Bereitschaft, einen bestimmten Browser für das gewünschte Spiel verwenden, darf wohl als recht hoch eingeschätzt werden.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.