Denis Potschien 30. September 2014

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

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.

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

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück