7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Tastenkombinationen erkennen, der einfache Weg

Scroll to top
Read Time: 19 mins

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Waren Sie jemals erstaunt über die Vielzahl von Angriffen in Kampfspielen wie Mortal Kombat, Super Smash Bros, Soul Calibur und anderen? Jetzt können Sie lernen, wie Sie eine Engine erstellen, um Schlüsselkombinationen zu erkennen und Ihr eigenes Kampfspiel zu erstellen!


Endergebnis Vorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten werden:

Die Kombinationen in dieser Demo sind: ASDF, AAA und SSS. Tippen Sie sie ein!


Schritt 1: Einführung

Wollten Sie schon immer ein Kampfspiel (oder ein anderes Genre) mit vielen Combos bauen? In diesem Tutorial erstellen wir eine einfache Klasse, um Tastenkombinationen zu erkennen und uns mitzuteilen, wann der Benutzer eine Kombination erstellt hat. Wir werden auch eine sehr einfache grafische Oberfläche erstellen, mit der wir unsere Klasse testen können.


Schritt 2: Starten eines neuen Projekts

In diesem Tutorial verwenden wir das reine AS3-Projekt von FlashDevelop mit Preloader. Wir werden ein Projekt mit einem Preloader erstellen, um es Ihnen einfach zu machen, wenn Sie weiter am Endergebnis für ein Spiel arbeiten möchten. Beginnen wir mit dem Öffnen von FlashDevelop und der Auswahl unseres Projekts:

Starting a new project on FlashDevelopStarting a new project on FlashDevelopStarting a new project on FlashDevelop

Damit können wir anfangen, an unseren Klassen zu arbeiten.

Um die Grafiken zu verwenden, die wir in Flash Pro in unserem AS3-Projekt erstellen, müssen wir unsere Bilder aus der .fla-Datei in ein .swc-Format exportieren. Weitere Informationen zu diesem Format finden Sie in Option 2 dieses Handbuchs zu FlashDevelop. Erstellen Sie eine neue AS3-FLA in Flash Professional und ändern Sie dann die Einstellungen in unserer .fla-Datei, um deren Inhalt in ein .swc-Format zu exportieren: Gehen Sie zu Datei > Einstellungen veröffentlichen (oder drücken Sie Strg + Umschalt + F12) und aktivieren Sie die Option "SWC exportieren". Feld unter der Registerkarte "Flash".

Export to SWC optionExport to SWC optionExport to SWC option

Wenn Sie nicht über Flash Professional verfügen, machen Sie sich keine Sorgen. Ich habe die endgültige SWC-Datei in das Download-Paket für dieses Tutorial aufgenommen. Laden Sie es herunter und fahren Sie mit Schritt 6 fort.


Schritt 3: Die Grundform der Schaltfläche

Wir werden zuerst den gesamten grafischen Teil erstellen und uns später nur um den Code kümmern. Da es sich um Tastenkombinationen handelt, erstellen wir eine Schaltfläche mit einem Buchstaben, der einen Schlüssel darstellt. Unsere Schaltfläche wird sehr einfach sein: drei Kreise mit unterschiedlichen Farben und einigen Filtern. So habe ich meinen gebaut: einen großen grauen Kreis mit einem weißen Kreis darüber und einen roten Kreis über dem weißen. Danach habe ich einen Glüh- und zwei Schlagschattenfilter auf den roten Kreis angewendet, um das Endergebnis zu erhalten, das in den Quelldateien enthalten ist.

The button we will use

Weitere Informationen zum Aufbau der Schaltfläche finden Sie in den Quelldateien für dieses Tutorial.


Schritt 4: Bilder nach oben und unten

Jetzt müssen wir unserer Taste Bilder für "oben" und "unten" geben. Bevor wir das tun, müssen wir es in ein Symbol verwandeln. Lassen Sie uns es in ein Symbol konvertieren, ihm den Namen KeyButtonImage geben und es als "SWCAssets.KeyButtonImage" exportieren. Wir fügen das SWCAssets-Paket zu Organisationszwecken in den Klassennamen ein, wenn wir mit dem Codieren beginnen. Dies wird später klarer.

Creating a symbol to hold our button's imageCreating a symbol to hold our button's imageCreating a symbol to hold our button's image

Erstellen Sie auf unserem KeyButtonImage-Symbol einen weiteren Keyframe mit demselben Bild wie das erste und kehren Sie dann den Winkel der Filter um, die wir für den roten Kreis verwenden. Wir müssen auch unsere Frames beschriften, um sie in unserem Code zu identifizieren. Beschriften Sie daher den ersten Frame als "Up" und den zweiten Frame als "Down". Das Bild unten sollte folgendermaßen aussehen:

Down image of our button

Schritt 5: Generieren der SWC-Datei

Nachdem wir unser Schaltflächenbild fertig haben, ist es Zeit, unsere SWC-Datei zu generieren und sie unserem FlashDevelop-Projekt hinzuzufügen. Drücken Sie zum Veröffentlichen Alt + Shit + F12. Sie werden feststellen, dass eine SWC-Datei im selben Verzeichnis wie die Flash-Datei erstellt wurde. Kopieren Sie diese Datei und legen Sie sie im Ordner "lib" unseres FlashDevelop-Projekts ab. Klicken Sie mit der rechten Maustaste darauf und wählen Sie "Zur Bibliothek hinzufügen", damit FlashDevelop die Datei erkennt. Der Name der Datei wird blau, sobald sie der Bibliothek hinzugefügt wird.

Generating the .swc fileGenerating the .swc fileGenerating the .swc file
Adding the .swc file to library

FlashDevelop ist jetzt bereit, unser Schaltflächenbild zu verwenden!


Schritt 6: Unsere KeyButton-Klasse

Unser Image ist fertig, daher müssen wir eine Klasse erstellen, um das Image zu speichern und Funktionen hinzuzufügen. Fügen Sie in FlashDevelop eine neue Klasse in den Ordner src ein, nennen Sie sie KeyButton und geben Sie flash.display.Sprite als Basisklasse ein.

Creating the KeyButton classCreating the KeyButton classCreating the KeyButton class

Schritt 7: Hinzufügen des Bildes

Da unsere KeyButton-Klasse von der Sprite-Klasse erbt, kann sie Bilder zu ihrer untergeordneten Anzeigeliste hinzufügen. In diesem Schritt fügen wir das Bild unserer Klasse hinzu und fügen den Buchstabentext ein. Lassen Sie uns zum Code springen:

In den Zeilen 11 und 13 deklarieren wir Variablen, die das Bild unserer Schaltfläche bzw. den Text des Buchstabens enthalten. Im Konstruktor unserer Klasse (Zeile 15) fragen wir nach einer Zeichenfolge, die der Buchstabe ist, den unsere Schaltfläche darstellt.

Da unser KeyButtonImage zwei Frames hat, rufen wir in Zeile 18 die stop()-Methode auf, um zu verhindern, dass sie diese durchlaufen. Wir werden bestimmte Momente für das Bild definieren, um später die Frames zu wechseln. Zeile 20 fügt das Bild der untergeordneten Liste der Schaltfläche hinzu.

Von Zeile 22 bis Zeile 30 erstellen wir unser Textfeld, das einen Buchstaben enthält, positionieren ihn und deaktivieren ihn für Mausereignisse (nicht erforderlich, aber gut zu tun, wenn Ihr Textfeld nur den Text anzeigen soll). Zeile 32 fügt den Text in die untergeordnete Liste der Schaltfläche ein.


Schritt 8: Erstellen der Bildobjekte

Unsere KeyButton-Klasse kann bereits ein Bild anzeigen und einen Buchstaben darstellen. In diesem Schritt fügen wir daher einige Schaltflächen auf dem Bildschirm hinzu. Da wir nur ein Beispiel erstellen, um unsere Klasse zu testen, werden wir nicht alle Buchstaben in das Beispiel einfügen. Stattdessen werden wir nur mit 4 Buchstaben arbeiten (aber unsere Klasse kann Combos mit beliebigen Tasten erkennen!): A, S, D und F. Wir werden sie jetzt unserem Bildschirm hinzufügen:

Zeile 1 erstellt ein Array, das alle Schaltflächen in unserem Bildschirm enthält. Dies wird später sehr nützlich sein, da wir so das Array durchlaufen können, anstatt Knopf für Knopf zu prüfen. Zeile 2 definiert nur, mit welchen Tasten wir arbeiten werden (wie gesagt, A, S, D und F). Die Zeilen 12-16 befinden sich in einer Schleife, in der die 4 Schaltflächen erstellt und auf dem Bildschirm positioniert werden.

Sie können jetzt das Projekt kompilieren und die Schaltflächen auf dem Bildschirm sehen:

The buttons on the screenThe buttons on the screenThe buttons on the screen

Schritt 9: Erstellen der ComboHandler-Klasse

Wir sind jetzt bereit, an der Erkennung von Combos zu arbeiten. Dafür erstellen wir eine ComboHandler-Klasse. Befolgen Sie einfach die gleichen Schritte wie beim Erstellen der KeyCombo-Klasse. Diesmal verfügt unsere ComboHandler-Klasse jedoch nicht über eine Basisklasse.

Was sollte der erste Teil der ComboHandler-Klasse sein? Nun, wir müssen zuerst erkennen, wann eine Taste gedrückt wurde. Dazu müssen wir der Bühne einen Ereignis-Listener hinzufügen (denken Sie daran: Wie in der ActionScript 3-Referenz vorgeschlagen, sollten sie der Bühne hinzugefügt werden, damit sie global auf KeyboardEvent-Ereignis-Listener warten können!

Dieser Code erstellt nur die Grundstruktur der ComboHandler-Klasse. Viel mehr wird später hinzugefügt! Beachten Sie, dass wir nur statische Methoden verwendet haben. Das liegt daran, dass wir in unserem Beispiel nur eine ComboHandler-Klasse haben. Einige Vorschläge zur Verbesserung dieser Klasse sind im Abschlussschritt verfügbar.

Unsere ComboHandler-Klasse muss mit der Methode initialize() initialisiert werden, damit der Listener zur Bühne hinzugefügt wird. In unserer Main-Klasse sollten wir die Klasse initialisieren, bevor wir damit arbeiten. Gehen wir zu Main.as und machen das:


Schritt 10: Combos registrieren

Wir haben die Grundstruktur der ComboHandler-Klasse erstellt, daher müssen wir jetzt Dinge hinzufügen. Das erste, was Sie tun müssen, ist, Combos in der Klasse zu registrieren, damit eine Combo erkannt werden kann.

Wie werden wir nun die Combos in dieser Klasse speichern? Möglicherweise haben Sie von der Dictionary-Klasse gehört. Diese Klasse kann einen beliebigen Wert basierend auf einem Schlüssel enthalten. In unserer Klasse sind die Schlüssel die Kombinationsnamen, und der Wert ist ein Array, wobei jeder Index ein Schlüssel aus der Kombination ist. Der Code dafür (unten erklärt):

In Zeile 1 erstellen wir das Wörterbuch, über das wir gesprochen haben. Zeile 5 initialisiert es und die Funktion registerCombo() registriert eine Kombination im Wörterbuch. Diese Funktion gibt true zurück, wenn die Combo erfolgreich registriert wurde, oder false, wenn bereits eine Combo mit diesem Namen in der Klasse vorhanden war (in diesem Fall müssen Sie möglicherweise die alte Combo entfernen - siehe Schritt 19 dazu!).


Schritt 11: Registrieren einer gedrückten Taste und Einrichten der Intervallzeit

Eine andere Sache, die unsere Klasse haben sollte, ist eine maximale Intervallzeit zwischen jedem Tastendruck. In einigen Spielen mit Combos haben Sie wahrscheinlich bemerkt, dass beim Drücken der Taste A, beispielsweise eine Sekunde warten und die Taste B drücken (vorausgesetzt, es gibt die Kombination "AB"), keine Combo erkannt wird, da Sie ebenfalls gewartet haben viel, um die B-Taste zu drücken. Dies liegt daran, dass zwischen jedem Tastendruck eine maximale Intervallzeit liegt. Genau das werden wir in unserer Klasse tun. Also, in der ComboHandler-Klasse:

In Zeile 1 erstellen wir ein Array mit dem Namen pressKeys. Dieses Array enthält alle vom Benutzer gedrückten Tasten, wobei die Intervallzeit zwischen zwei Tasten kleiner als das maximale Intervall ist.

Die Zeilen 3 und 4 definieren eine MAX_INTERVAL-Konstante, die unser maximales Intervall darstellt, und die interval-Variable, mit deren Hilfe wir die Intervallzeit zwischen zwei Tastendrücken berechnen können.

Die Funktion onKeyDown() ist jetzt fast fertig: Darin erkennen wir zunächst, ob die Intervallzeit zwischen dem aktuellen Tastendruck und dem letzten Tastendruck höher als das maximale Intervall ist. Wenn dies der Fall ist, setzen wir unser pressedKeys-Array zurück, um alle darin enthaltenen Schlüssel zu löschen. Danach aktualisieren wir die Intervallvariable auf die aktuelle Zeit (weitere Informationen zur Berechnung des Intervalls finden Sie in der Dokumentation von getTimer()) und push() die aktuelle Taste auf das pressedKeys-Array.


Schritt 12: Überprüfen, ob eine Combo ausgeführt wurde oder nicht

Eine letzte Sache fehlt in der onKeyDown()-Funktion unseres ComboHandlers: Die Möglichkeit zu überprüfen, ob der Benutzer nach dem Drücken einer Taste eine Combo ausgeführt hat. Das werden wir jetzt tun:

Zeile 12 ist die einzige Änderung, die wir an unserer Funktion onKeyDown() vorgenommen haben: Rufen Sie die Funktion checkForCombo() auf. Dadurch wird überprüft, ob eine Kombination ausgeführt wurde oder nicht.

Die Art und Weise, wie wir prüfen, ob eine Combo ausgeführt wurde, ist sehr interessant: Wir arbeiten mit Strings. In diesem Fall können wir mit Strings arbeiten, um Dinge zu erkennen, die ohne die Arbeit mit Strings schwieriger gewesen wären. Stellen Sie sich zum Beispiel vor, wir hätten eine Kombination mit den Tasten ASDF, aber das PressedKeys-Array hat die folgende Tastenfolge: ASFDASDF. Obwohl der Benutzer die ersten vier Tasten ("ASFD", die keiner Combo entsprechen) innerhalb des Zeitlimits gedrückt hat, sollte dies nichts an der Tatsache ändern, dass der Benutzer eine Combo ausgeführt hat, wie in den letzten 4 angegeben Schlüssel ("ASDF"). Ohne Schnüre hätte unsere Arbeit viel länger dauern können.

Die Idee, mit Strings zu arbeiten, ist folgende: Wir setzen alle Tasten in pressKeys in einen String, trennen jeden Index durch ein Leerzeichen (also den Funktionsaufruf pressKeys.join(" ")) und prüfen dann, ob sich darin ein bestimmter Teilstring befindet . Diese spezielle Teilzeichenfolge ist eine Zeichenfolge, die aus den Schlüsseln einer Kombination besteht, wobei jeder Schlüssel durch ein Leerzeichen getrennt ist. Wenn dieser Teilstring gefunden wird, bedeutet dies, dass eine Kombination ausgeführt wurde.

Sie können dies selbst mit einem Code wie dem folgenden testen:

... obwohl Sie auch einen temporären trace(comboFound) Aufruf in checkForCombo() hinzufügen möchten, um das Ergebnis anzuzeigen.

Beachten Sie jedoch, dass diese Methode nicht in allen Fällen funktioniert. Es wird nicht funktionieren, wenn wir beispielsweise anstelle eines Arrays von Strings ein Array von Objekten hatten. Wenn wir ein Array von Object hätten, würde die Standardfunktion toString(), die beim Aufruf von join() aufgerufen wird, "[object Object]" ausgeben, und daher wären alle unsere Objekte im Array in der erstellten Zeichenfolge "gleich" . Wenn Sie dies dennoch tun möchten, überschreiben Sie einfach die Standardfunktion toString() und fügen Sie dort einen benutzerdefinierten Text ein. In Schritt 14 werden wir das in der ComboEvent-Klasse tun - sehen Sie es sich als Referenz an!

Jetzt konzentrieren wir uns nicht mehr auf die ComboHandler-Klasse und arbeiten erneut an den von uns erstellten Schaltflächen. (Entfernen Sie den soeben hinzugefügten Testcode.)


Schritt 13: Unsere Schaltflächen auf ein Schlüsselereignis einwirken lassen

Derzeit werden unsere Schaltflächen auf dem Bildschirm angezeigt, sie zeigen uns jedoch nichts an. Sie erinnern sich vielleicht, dass wir zwei Schaltflächenbilder erstellt haben: eines, wenn die Schaltfläche nicht gedrückt wird, und eines, wenn sie gedrückt wird. In diesem Schritt verhalten sich unsere Tasten, wenn eine Taste gedrückt wurde. Gehen wir zu unserer KeyButton-Klasse:

Beachten Sie, dass dieser Code nur die Rahmen des Bilds der Schaltfläche ändert. Wir müssen sie noch anrufen, wenn die entsprechende Taste gedrückt wurde. Wir machen das in Main.as:

Die Zeilen 18 und 19 sind die einzigen Ergänzungen zur Funktion init(). Sie fügen weitere Ereignis-Listener auf der Bühne hinzu, um zu erkennen, wann eine Taste gedrückt und wann eine Taste losgelassen wurde. Wir werden diese beiden Listener verwenden, um unseren Tasten mitzuteilen, ob sie oben oder unten sein sollen.

Das einzige, was Sie in den Funktionen onKeyDown() und onKeyUp() möglicherweise noch nie gesehen haben, ist die Funktion String.fromCharCode(). Diese Funktion gibt eine Zeichenfolge mit den Zeichencodes zurück, die Sie als Argumente übergeben. Da wir nur einen Zeichencode übergeben, gibt diese Funktion eine Zeichenfolge mit nur einem Zeichen zurück. Wenn sie mit den Zeichenfolgen im Schlüsselarray übereinstimmt, sollten wir die entsprechende Schaltfläche anweisen, zu handeln.

Sie können jetzt die Tasten testen, die auf und ab gehen!


Schritt 14: Erstellen eines benutzerdefinierten Kombinationsereignisses

Derzeit erkennt unsere ComboHandler-Klasse Tastendrücke, verarbeitet Intervallzeiten und überprüft, wann Combos ausgeführt wurden. Sie funktioniert jedoch immer noch nicht, wenn eine Combo ausgeführt wurde. Wie kann es anderen Dingen sagen, dass eine Combo gemacht wurde? Damit werden wir hier beginnen. Da Flash über ein sehr starkes Ereignissystem verfügt, senden wir ein Ereignis aus, wenn eine Kombination erkannt wurde, und lassen andere Objekte diese Ereignisse empfangen.

Weitere Informationen zu benutzerdefinierten Ereignissen finden Sie unter diesem Link auf 8bitrocket. Erstellen Sie die ComboEvent-Klasse mit diesem Code:

In Zeile 9 deklarieren wir die params-Variable. Es enthält Informationen über die ausgeführte Combo (in diesem Beispiel geben wir nur den Namen ein, aber Sie können eingeben, was Sie wollen). Beachten Sie die clone()-Funktion in der Klasse. Es wurde erstellt, damit redispatchierte Ereignisse dieselben Informationen wie das ursprüngliche Ereignis enthalten können. Weitere Informationen dazu finden Sie in diesem Blogbeitrag zu Bit 101


Schritt 15: Auslösen eines Ereignisses, wenn eine Combo ausgeführt wurde

In unserer ComboHandler-Klasse ist es jetzt an der Zeit zu handeln, wenn eine Combo ausgeführt wurde. Dazu müssen wir ein ComboEvent versenden. Ereignisse können nur von Objekten ausgelöst werden, die von EventDispatcher erben, ComboHandler jedoch nicht von EventDispatcher. Anstatt es von EventDispatcher erben zu lassen (dies würde uns zwingen, eine Instanz von ComboHandler zu haben, die wir für die Zwecke dieses Tutorials nicht benötigen), werden wir ein EventDispatcher-Objekt in der Klasse erstellen und dieses Objekt auslösen. Darüber hinaus überwachen andere Klassen dieses Objekt auf Ereignisse. In unserer ComboHandler.as-Datei:

Importieren Sie dies:

Und fügen Sie diesen Code hinzu:

In Zeile 1 deklarieren wir unser Dispatcher-Objekt. In Zeile 9 initialisieren wir es. In Zeile 34 versenden wir ein ComboEvent. Und das war's für die ComboHandler-Klasse. Jetzt müssen wir auf das Ereignis warten, das ausgelöst wird.


Schritt 16: Suchen nach einem Ereignis in Main

Das Suchen nach benutzerdefinierten Ereignissen erfolgt auf die gleiche Weise wie bei jedem anderen Ereignis in AS3: Fügen Sie dem Dispatcher einen Listener hinzu und erstellen Sie eine Funktion, um etwas zu tun, wenn der Listener ein Ereignis empfängt. Unsere Main-Klasse sollte diejenige sein, die das Ereignis empfängt, da es etwas auf dem Bildschirm anzeigt, wenn eine Kombination erkannt wird.

In der hervorgehobenen Zeile fügen wir den Listener zum dispatcher von ComboHandler hinzu.


Schritt 17: Tun Sie etwas, wenn eine Combo ausgeführt wurde

In diesem Tutorial wird nur Text mit dem Namen der ausgeführten Kombination auf dem Bildschirm angezeigt. Wir benötigen ein Textfeld auf dem Bildschirm und müssen den Namen der ausgeführten Combo abrufen.

Zeile 1 enthält die Deklaration des Textfelds, das wir verwenden werden. Die Zeilen 20-27 enthalten die Initialisierung des Textfeldes. In unserer Funktion onComboComplete() setzen wir nur den Kombinationsnamen in den Text des Textfelds. Das ist es! Jetzt müssen Sie nur noch einige Combos registrieren und die Klasse testen!


Schritt 18: Combos registrieren und testen

Lassen Sie uns in der Datei Main.as einige Combos registrieren: Ich werde die "AAA Combo", "SSS Combo" und "ASDF Combo" registrieren. Sie können so viele Combos registrieren, wie Sie möchten!

Kompilieren Sie das Projekt und Sie erhalten Folgendes:


Schritt 19: Entfernen einer Combo aus der Combos-Liste

Was wäre, wenn wir eine registrierte Combo entfernen wollten? Die folgende Funktion kann in der Datei ComboHandler.as hinzugefügt werden, um die Position des Combos-Wörterbuchs auf die Standardeinstellung zurückzusetzen. Es wird true zurückgegeben, wenn die Combo entfernt wurde, und false, wenn dies nicht der Fall war (es wurde keine Combo mit diesem Namen registriert).


Schlussfolgerung

Herzlichen Glückwunsch zum Abschluss dieses Tutorials! Sie können jetzt einen einfachen Combo-Handler für Ihre Spiele implementieren!

Ein einfacher Combo-Handler passt jedoch nicht zu allen Spielen. Was wäre, wenn Sie ein Spiel mit unterschiedlichen Charakteren verwenden wollten und jeder Charakter seine Combos hatte und Sie mehr Kontrolle über die Handler benötigen? Sie können dies problemlos tun, wenn Sie die Instanziierung der ComboHandler-Klasse zulassen, was für Sie weiterhin eine Herausforderung darstellt.

Sie können diese Klasse auch in einen Singleton verwandeln, anstatt nur statische Funktionen zu haben. Es gibt viele andere kreative Verwendungszwecke, einschließlich der Registrierung von Wörtern als Kombination und der Überprüfung, ob jemand ein Wort eingegeben hat oder nicht.

Hatten Sie eine kreative Verwendung für diese Klasse? Teilen Sie es mit uns in den Kommentaren!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.