Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Game Development
  2. Games
Gamedevelopment

Vereinfachte Spielereingabe

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Stellen Sie sich eine Spielfigur namens "Bob the Butcher" vor, die alleine in einem abgedunkelten Raum steht, während Horden mutierter Wurstzombies durch Türen und zerbrochene Fenster hereinströmen. An diesem Punkt wäre es eine gute Idee für Bob, die Wurstzombies in winzige Fleischstücke zu sprengen, aber wie wird Bob das in einem plattformübergreifenden Spiel tun? Muss der Spieler eine oder mehrere Tasten auf einer Tastatur drücken, mit der Maus klicken, auf den Bildschirm tippen oder eine Taste auf einem Gamepad drücken?

Wenn Sie ein plattformübergreifendes Spiel programmieren, ist dies die Art von Dingen, mit denen Sie wahrscheinlich viel Zeit verbringen werden, wenn Sie nicht darauf vorbereitet sind. Wenn Sie nicht aufpassen, können Sie massive, spaghettiartige if-Anweisungen oder switch-Anweisungen erhalten, um mit all den verschiedenen Eingabegeräten umzugehen.

In diesem Tutorial werden wir die Dinge viel einfacher machen, indem wir eine einzelne Klasse erstellen, die mehrere Eingabegeräte vereint. Jede Instanz der Klasse repräsentiert eine bestimmte Spielaktion oder ein bestimmtes Spielverhalten (z. B. "Schießen", "Ausführen" oder "Springen") und kann angewiesen werden, verschiedene Tasten, Schaltflächen und Zeiger auf mehreren Eingabegeräten anzuhören.

Hinweis: In diesem Lernprogramm verwendeten wir Programmiersprache JavaScript. Die Technik zur Vereinheitlichung mehrerer Eingabegeräte kann jedoch problemlos auf jede andere plattformübergreifende Programmiersprache übertragen werden, die APIs für Eingabegeräte bereitstellt.

Würstchen schießen

Bevor wir mit dem Schreiben des Codes für die Klasse beginnen, die wir in diesem Lernprogramm erstellen, werfen wir einen kurzen Blick darauf, wie die Klasse tatsächlich verwendet werden kann.

GameInput ist die Klasse, die wir erstellen werden, und Sie können sehen, wie viel einfacher es die Dinge machen wird. Die Eigenschaft shot.value ist eine Zahl und ein positiver Wert, wenn die Leertaste auf einer Tastatur oder der rechte Auslöser auf einem Gamepad gedrückt wird. Wenn weder die Leertaste noch der rechte Auslöser gedrückt werden, ist der Wert Null.

Anfangen

Als erstes müssen wir einen Funktionsabschluss für die GameInput-Klasse erstellen. Der größte Teil des Codes, den wir schreiben, ist nicht Teil der Klasse, aber er muss innerhalb der Klasse zugänglich sein und vor allem anderen verborgen bleiben. Ein Funktionsabschluss ermöglicht es uns, dies in JavaScript zu tun.

(In einer Programmiersprache wie ActionScript oder C# können Sie einfach private Klassenmitglieder verwenden, aber das ist leider kein Luxus, den wir in JavaScript haben.)

Der Rest des Codes in diesem Tutorial ersetzt den Kommentar "Code geht hierher".

Die Variablen

Der Code benötigt nur eine Handvoll Variablen, die außerhalb von Funktionen definiert werden müssen. Diese Variablen lauten wie folgt.

Die konstanten Werte KEYBOARD, POINTER, GAMEPAD, DEVICE und CODE werden zum Definieren von Eingabegerätekanälen wie GameInput.KEYBOARD_SPACE verwendet. Ihre Verwendung wird später im Lernprogramm erläutert.

Das __pointer-Objekt enthält Eigenschaften, die für Maus- und Touchscreen-Eingabegeräte relevant sind, und das __keyboard-Objekt wird verwendet, um die Tastaturtastenzustände zu verfolgen. Die Arrays __inputs und __channels werden zum Speichern von GameInput-Instanzen und allen diesen Instanzen hinzugefügten Eingabekanälen verwendet. Schließlich zeigen __mouseDetected und __touchDetected an, ob eine Maus oder ein Touchscreen erkannt wurde.

Hinweis: Den Variablen müssen keine zwei Unterstriche vorangestellt werden. Das ist einfach die Codierungskonvention, die ich für den Code in diesem Tutorial gewählt habe. Es hilft, sie von Variablen zu trennen, die in Funktionen definiert sind.

Die Funktionen

Hier kommt der Großteil des Codes, also möchten Sie vielleicht einen Kaffee oder etwas anderes trinken, bevor Sie mit dem Lesen dieses Teils beginnen!

Diese Funktionen werden nach den Variablen im vorherigen Abschnitt dieses Lernprogramms definiert und in der Reihenfolge ihres Erscheinungsbilds definiert.

Die main() - Funktion wird am Ende des Codes aufgerufen, dh am Ende des zuvor erstellten Funktionsabschlusses. Es macht das, was es verspricht, und bringt alles zum Laufen, damit die GameInput-Klasse verwendet werden kann.

Eine Sache, auf die ich Sie aufmerksam machen sollte, ist die Verwendung der Funktion requestAnimationFrame(), die Teil der W3C Animation Timing-Spezifikation ist. Moderne Spiele und Anwendungen verwenden diese Funktion, um ihre Aktualisierungs- oder Rendering-Schleifen auszuführen, da sie in den meisten Webbrowsern für diesen Zweck stark optimiert wurden.

Die Funktion update() durchläuft die Liste der aktiven GameInput-Instanzen und aktualisiert die aktivierten. Die folgende updateInput() -Funktion ist ziemlich lang, daher werde ich den Code hier nicht hinzufügen. Sie können den Code vollständig anzeigen, indem Sie die Quelldateien herunterladen.

Die Funktion updateInput() überprüft die Eingabegerätekanäle, die einer GameInput-Instanz hinzugefügt wurden, und ermittelt, auf welche value-Eigenschaft der GameInput-Instanz festgelegt werden soll. Wie im Beispielcode Shooting the Sausages zu sehen ist, gibt die value-Eigenschaft an, ob ein Eingabegerätekanal ausgelöst wird, und ermöglicht es einem Spiel, entsprechend zu reagieren, indem Bob möglicherweise angewiesen wird, die mutierten Wurstzombies zu schießen.

Die Funktion updateValue() bestimmt, ob die value-Eigenschaft einer GameInput-Instanz aktualisiert werden soll. Der threshold wird hauptsächlich verwendet, um zu verhindern, dass analoge Geräteeingangskanäle wie Gamepad-Tasten und -Sticks, die sich nicht ordnungsgemäß zurücksetzen, ständig eine GameInput-Instanz auslösen. Dies passiert ziemlich oft bei fehlerhaften oder schmuddeligen Gamepads.

Wie die Funktion updateInput() ist die folgende Funktion updatePointer() ziemlich lang, daher werde ich den Code hier nicht hinzufügen. Sie können den Code vollständig anzeigen, indem Sie die Quelldateien herunterladen.

Die Funktion updatePointer() aktualisiert die Eigenschaften im __pointer-Objekt. Kurz gesagt, die Funktion klemmt die Position des Zeigers, um sicherzustellen, dass das Fensterfenster des Webbrowsers nicht verlassen wird, und berechnet die Entfernung, um die sich der Zeiger seit der letzten Aktualisierung bewegt hat.

Die Funktionen mouseDetected() und touchDetected() weisen den Code an, das eine oder andere Eingabegerät zu ignorieren. Wenn eine Maus vor einem Touchscreen erkannt wird, wird der Touchscreen ignoriert. Wenn vor einer Maus ein Touchscreen erkannt wird, wird die Maus ignoriert.

Die Funktionen pointerPressed(), pointerReleased() und pointerMoved() verarbeiten Eingaben von einer Maus oder einem Touchscreen. Alle drei Funktionen aktualisieren einfach die Eigenschaften im __pointer-Objekt.

Nach diesen drei Funktionen haben wir eine Handvoll Standardfunktionen zur Behandlung von JavaScript-Ereignissen. Die Funktionen sind selbsterklärend, daher werde ich den Code hier nicht hinzufügen. Sie können den Code vollständig anzeigen, indem Sie die Quelldateien herunterladen.

Die Funktionen inputAdd(), inputRemove() und inputReset() werden von einer GameInput-Instanz aufgerufen (siehe unten). Die Funktionen ändern die Arrays __inputs und __channels je nachdem, was zu tun ist.

Eine GameInput-Instanz wird als aktiv betrachtet und dem __inputs-Array hinzugefügt, wenn der GameInput-Instanz ein Eingabegerätekanal hinzugefügt wurde. Wenn bei einer aktiven GameInput-Instanz alle Kanäle des Eingabegeräts entfernt wurden, wird die GameInput-Instanz als inaktiv betrachtet und aus dem Array __inputs entfernt.

Jetzt kommen wir zur GameInput-Klasse.

Ja, das ist alles, was es gibt - es ist eine superleichte Klasse, die im Wesentlichen als Schnittstelle zum Hauptcode fungiert. Die value-Eigenschaft ist eine Zahl, die von 0 (Null) bis 1 (Eins) reicht. Wenn der Wert 0 ist, bedeutet dies, dass die GameInput-Instanz nichts von den hinzugefügten Eingabegerätekanälen empfängt.

Die GameInput-Klasse hat einige statische Eigenschaften, daher werden wir diese jetzt hinzufügen.

Tastaturgerätekanäle:

Zeigergerätekanäle:

Gamepad-Gerätekanäle:

Um den Code fertigzustellen, müssen wir einfach die Funktion main() aufrufen.

Und das ist der ganze Code. Auch hier ist alles in den Quelldateien verfügbar.

Renn weg!

Bevor wir das Tutorial mit einer Schlussfolgerung abschließen, werfen wir einen Blick auf ein weiteres Beispiel, wie die GameInput-Klasse verwendet werden kann. Dieses Mal geben wir Bob die Möglichkeit, sich zu bewegen und zu springen, da die Horden mutierter Wurstzombies möglicherweise zu viel werden, als dass er sie alleine handhaben könnte.

Schön und leicht. Beachten Sie, dass die value-Eigenschaft von GameInput-Instanzen zwischen 0 und 1 liegt. Sie können also zum Beispiel die Bewegungsgeschwindigkeit von Bob mit dieses Werts ändern, wenn einer der aktiven Eingabegerätekanäle analog ist.

Haben Sie viel Spaß!

Abschluss

Plattformübergreifende Spiele haben alle eines gemeinsam: Sie müssen sich alle mit einer Vielzahl von Spieleingabegeräten (Controllern) befassen, und der Umgang mit diesen Eingabegeräten kann zu einer entmutigenden Aufgabe werden. In diesem Lernprogramm wurde eine Möglichkeit aufgezeigt, mit mehreren Eingabegeräten mithilfe einer einfachen, einheitlichen API umzugehen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.