Meine Werkzeuge
Namensräume
Varianten

WebGL Jumpstart/Input im Browser

Aus indiedev
Wechseln zu: Navigation, Suche
WebGL Jumpstart
Input im Browser
Thumbnail WebGL Jumpstart 06.png
Autor Astrorenales
Programmier­sprache JavaScript
Kategorie WebGL
Diskussion Thread im Forum
Lizenz indiedev article license


Hinweis Dieser Artikel wird gerade geschrieben bzw. bearbeitet und erfüllt noch nicht die Qualitätsstandards von indiedev.
Bitte bearbeite diesen Artikel nur, wenn du kleine Fehler korrigieren möchtest oder der Autor bist.

Inhaltsverzeichnis

Das Inhaltsverzeichnis

Einleitung

In den bisherigen Tutorials wurde auf Grafik mit WebGL und Audio eingegangen. Doch was wäre ein Spiel ohne Input? In diesem Teil der WebGL-Reihe erkläre ich euch die einzelnen Input-Möglichkeiten im Browser und die Kompatibilität dieser.

Maus

Die Maus ist neben der Tastatur eine der ältesten Eingabegeräte für den Computer. Aus diesem Grund gibt es, zumindest was die Knöpfe und Bewegung angeht, eine einheitliche Methode über alle Browser diese abzufragen. Für das Mausrad sieht es leider schon etwas chaotischer aus. Aber nun erst einmal unser Code:


var mousePositionX = 0;
var mousePositionY = 0;
var mouseWheel = 0;
var buttons = new Array(5);
for (var i = 0; i < buttons.length; i++) {
  buttons[i] = false;
}

function setupMouseInput() {
  surface.onmousedown = function(e) {
    if (e.button !== -1) {
      buttons[e.button] = true;
    }
    mousePositionX = e.clientX - window.pageXOffset - surface.offsetLeft;
    mousePositionY = e.clientY - window.pageYOffset - surface.offsetTop;
  }

  document.onmouseup = function(e) {
    if (e.button !== -1) {
      buttons[e.button] = false;
    }
    mousePositionX = e.clientX - window.pageXOffset - surface.offsetLeft;
    mousePositionY = e.clientY - window.pageYOffset - surface.offsetTop;
  }

  document.onmousemove = function(e) {
    mousePositionX = e.clientX - window.pageXOffset - surface.offsetLeft;
    mousePositionY = e.clientY - window.pageYOffset - surface.offsetTop;
  }

  function mouseWheelHandler(e) {
    var ev = window.event || e;
    var delta = Math.max(-1, Math.min(1, (ev.wheelDelta || -ev.detail)));
    mouseWheel += delta;
    e.preventDefault();
    return false;
  }

  if (surface.addEventListener) {
    // IE9, Chrome, Safari, Opera
    surface.addEventListener('mousewheel', mouseWheelHandler, false);
    // Firefox
    surface.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
  }
  else {
    // IE 6/7/8
    surface.attachEvent('onmousewheel', mouseWheelHandler);
  }
}

Zuerst werden die Variablen deklariert, welche unseren aktuellen Mausstatus darstellen sollen. Hierfür haben wir eine x- und y-Variable für unsere Mausposition, einen Wert für unser Mausrad und dann ein Array für die Buttons. Da die meisten Mäuse heutzutage bereits 5 Tasten haben (3 Standard- und 2 Seitentasten), erlauben wir auch entsprechend 5 Einträge im Array. Natürlich sind alle Buttons erst einmal nicht gedrückt, weshalb wir das Array mit false-Werten initialisieren. Nun zum abfangen der Maus-Events. Als erstes wollen wir mitbekommen, wenn ein Button gedrückt wird. Dies geschieht über die Callback-Methode "onmousedown" unseres surface-Elements. Wenn also ein Button auf unserem Surface gedrückt wird, ruft die DOM unsere Methode auf. Das übergebene Event hat dabei 3 Eigenschaften, die für uns von Interesse sind. Die "button"-Eigenschaft gibt den Index des gedrückten Buttons an (Näheres dazu hier [1]). Wenn ein legitimer Index übergeben wurde, setzten wir den entsprechenden Array-Eintrag auf true. Desweiteren interessieren uns die beiden Eigenschaften clientX und clientY des Events. Diese geben die Position der Maus zur Zeit des Events wieder. Diese Koordinaten sind allerdings noch nicht ganz korrekt, da unser Surface nicht ganz oben links in der Ecke positioniert ist. Aus diesem Grund subtrahieren wir noch die Werte "offsetLeft"/"offsetTop" von den Koordinaten ab. Desweiteren kann in Html die Seite selber noch einen Offset aufweisen. Diesen müssen wir also ebenfalls noch subtrahieren. Der Offset ist dabei über "window.pageXOffset" und "window.pageYOffset" zu erreichen.

Nun wissen wir, wann ein Knopf gedrückt wird. Doch irgendwann lässt der Spieler den Button auch los. Passend zu "onmousedown" gibt es dafür die Callback-Methode "onmouseup". Doch aufgepasst, auf welches Element wir den Callback definieren. Setzen wir einen Callback für unser Surface und der Benutzer drückt den Button auf diesem ist noch alles in Ordnung. Doch wenn er dann im gedrückten Zustand die Maus aus dem Element bewegt und erst dann loslässt, würden wir dies nicht mehr mitbekommen. Aus diesem Grund definieren wir unsere Callback-Methode direkt auf dem "document"-Element. So stellen wir sicher, auch wirklich immer das Up-Event zu erhalten. Der Rest ist analog zum Down-Event, nur dass wir diesmal den Array-Eintrag auf false setzen.

Bisher haben wir die Mausposition während der Button-Events abgefragt. Doch die Maus kann auch ohne das drücken eines Buttons bewegt werden. Deshalb definieren wir nun die Callback-Methode "onmousemove" auf unserem "document"-Element. Dieses Event wird jedes mal gefeuert, wenn die Maus bewegt wird und das übergebene Objekt hat wie auch eben die Eigenschaften "clientX" und "clientY".

Touch

Tastatur


var keys = {};

function setupKeyboardInput() {
  document.onkeydown = function(e) {
    keys[e.keyCode] = true;
  };
  document.onkeyup = function(e) {
    keys[e.keyCode] = false;
  };
}

GamePad

Kompatibilität

Navigation
Tutorials und Artikel
Community Project
Werkzeuge