Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Games

Erweiterte Charakteranpassung für Flash-Spiele

by
Read Time:25 minsLanguages:

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

In diesem Tutorial werden wir uns mit der Charakteranpassung von Flash-Spielen befassen. Das Ergebnis kann verwendet werden, um Spielern die Möglichkeit zu geben, einen einzigartigen Charakter zu erstellen, der über die grundlegenden Anziehoptionen der meisten Spiele hinausgeht.

Wir haben diesen großartigen Autor dank FlashGameLicense.com gefunden, dem Ort zum Kaufen und Verkaufen von Flash-Spielen!

Wir werden lernen, wie der Benutzer verschiedene Teile unseres Charakters mit benutzerdefinierten Farben versehen kann, wie man der Kleidung des Charakters handgezeichnete Designs hinzufügt und wie man eine grundlegende Laufanimation ändert, die die Änderungen des Spielers verwendet.


Endergebnis Vorschau

Dies ist, was Sie am Ende des Tutorials erstellt haben:

Füllen Sie die Bereiche der Kleidung des Charakters mit einfarbigen Farben, fügen Sie Details mit dem Bleistift hinzu, drücken Sie dann auf "Spielen" und drücken Sie links und rechts, um ihn laufen zu sehen!


Schritt 1: Einrichten unseres Flash-Films

Erstellen Sie ein neues AS3-Flash-Dokument. Gehen Sie in das Eigenschaftenfenster und stellen Sie sicher, dass alle Einstellungen mit der folgenden Abbildung übereinstimmen:


Schritt 2: Einrichten unserer Hauptklasse

Als nächstes erstellen Sie eine neue .as-Datei namens CustomCharacter.as im Verzeichnis unseres Projekts. Dies wird unsere Hauptklasse sein. Geben Sie CustomCharacter in den Veröffentlichungseinstellungen als "Hauptklasse" ein. Stellen Sie sicher, dass Ihre CustomCharacter-Klasse wie folgt lautet.

(Schauen Sie sich diese kurze Einführung in die Dokumentenklasse an, wenn Sie sich nicht sicher sind, was wir in diesem Schritt tun.)


Schritt 3: Erstellen unseres Hauptcharakters

Jetzt beginnen wir mit dem Zeichnen unserer Hauptfigur. In diesem Tutorial ist es wichtig, dass wir jedes Körperteil in einem separaten MovieClip haben. Auf diese Weise können wir unsere Laufanimation auf Tweens aufbauen, was den Animationsprozess beschleunigt. Unser Charakter besteht aus den folgenden Objekten: einem Kopf, Haaren, einem Hemd, zwei Beinen und zwei Armen. Sie finden den in diesem Tutorial verwendeten Hauptcharakter in der Quell-FLA (der Download-Link befindet sich oben im Tutorial).

Um den Spieler zu ermutigen, den Charakter anzupassen, beschränken wir die Farben der Körperteile des Charakters vorerst auf Grau mit schwarzen Umrissen. Wählen Sie den gesamten Text aus, drücken Sie F8, um ihn in einen einzelnen MovieClip zu verwandeln und nennen Sie ihn Player. Stellen Sie sicher, dass Sie den Registrierungspunkt jedes Körperteils auf die obere linke Ecke setzen. Klicken Sie nun auf den neuen Player-Movieclip auf der Bühne und legen Sie den Instanznamen auf Player fest.

Da haben Sie es, wir haben gerade unseren Player-Charakter erstellt!


Schritt 4: Erstellen eines ColorPickers

Um zu beginnen, müssen wir die ColorPicker-Komponente zu unserer Bibliothek hinzufügen. Gehen Sie in das Komponentenfenster, indem Sie zu Fenster > Komponenten gehen. Suchen Sie die ColorPicker-Klasse und ziehen Sie sie in das Bibliotheksfenster.

Als nächstes müssen wir die gesamte ActionScript-Arbeit erledigen. So wird unsere CustomCharacter-Klasse nach unseren neuen Änderungen aussehen.

Lassen Sie uns dies Schritt für Schritt durchgehen, beginnend mit der Konstruktorfunktion. Zuerst erstellen wir eine neue Variable namens myColorPicker. Wir teilen ihm dann mit, dass es sich um eine Instanz der ColorPicker-Klasse handelt, indem wir = new ColorPicker() aufrufen. Als nächstes teilen wir unserem ColorPicker mit, dass er veränderbar und unsichtbar sein soll, damit wir ihn anzeigen können, wenn wir auf den Player klicken. Dann fügen wir der Bühne die ColorPicker-Klasse hinzu, obwohl sie nicht sichtbar ist.

Außerdem fügen wir zwei Ereignis-Listener hinzu. Eine, wenn Sie auf den Player klicken, die die Sichtbarkeit des ColorPickers umschaltet und ihn beim Klicken an die Mausposition verschiebt, und die zweite, um zu überprüfen, ob der Benutzer eine neue Farbe ausgewählt hat, damit wir den ColorPicker erstellen können wieder unsichtbar!


Schritt 5: Unterscheiden zwischen Körperteilen

Leider können wir den ColorPicker nicht einfach verwenden und die Farbe eines Objekts ändern. Zuerst muss der ColorPicker unterscheiden, auf welches Objekt Sie klicken, damit er bestimmen kann, welches Objekt geändert werden soll. Dies erfordert die Verwendung einer der leistungsstarken MouseEvent-Funktionen von AS3.

Innerhalb der showPicker-Funktion können wir einfach e.target verwenden, um auf den MovieClip zu zielen, auf den wirklich geklickt wird. Wir können das Alpha des angeklickten Objekts herunterfahren, um zu bestätigen, mit welchem Objekt wir es zu tun haben. Fügen Sie einfach den folgenden Code zur Funktion showPicker() hinzu.


Schritt 6: Vorbereitung für die Farbe!

Wir sind fast bereit, unsere Objekte zu färben. Bevor wir beginnen, müssen wir sicherstellen, dass wir die Umrisse unserer Körperteile beibehalten können. Dazu müssen wir den Bereich identifizieren, der eine Farbänderung benötigt. Wir müssen für jeden Körperteil in den MovieClip gehen und den grauen Füllbereich innerhalb des Umrisses auswählen.

Drücken Sie als Nächstes F8, um einen neuen MovieClip dieser grauen Füllung zu erstellen und ihn "______Color" zu nennen (für den Arm-Movieclip nennen wir ihn also ArmColor). Setzen Sie schließlich den Instanznamen jedes dieser ____Color-Objekte auf color. Jetzt sollte jedes Körperteil einen farbigen MovieClip enthalten.


Schritt 7: Los Colores (die Farben)

Wir fügen unserer Anwendung endlich Farbe hinzu. So sollte Ihr Projekt am Ende dieses Schrittes aussehen:

Anwendungs-Screenshot

In Ordung! Lassen Sie uns das Schritt für Schritt durchgehen. Zunächst erstellen wir eine neue MovieClip-Variable, myChangedObject, auf die unser Programm zugreifen kann. Auf diese Weise kann unsere Funktion showPicker() unserer Funktion colorChanged() mitteilen, auf welchen MovieClip zuletzt geklickt wurde.

Da dies nicht im Weg ist, schauen wir uns unsere showPicker()-Funktion an. Wie Sie sehen, haben wir einen kleinen Checker hinzugefügt, um zu sehen, ob der Name des angeklickten Objekts "Farbe" ist. Dies ist nur eine Überprüfung, ob der Benutzer tatsächlich auf die Umrisse des Spielers, die Schuhe oder etwas anderes geklickt hat, das nicht geändert werden soll.

Als nächstes ändern wir unsere neue myChangedObject-Variable so, dass sie dem angeklickten Objekt, e.target, entspricht, damit unsere colorChanged()-Funktion die letzten Änderungen vornehmen kann. Schließlich sagen wir unserem ColorPicker (myColorPicker) um die zuvor ausgewählte Farbe vorgewählt zu haben. Wenn keine vorhanden ist, wird standardmäßig schwarz angezeigt.

Lassen Sie uns diesen kleinen Code analysieren. Zuallererst ist es wichtig zu wissen, dass die ColorPicker-Klasse eine .selectedColor-Variable hat, um eine vorausgewählte Farbe zu haben. Dies ist eine Nummer, die ein 6-stelliges Int(0xRRGGBB) erhalten kann. Im zweiten Teil wandeln wir die Daten in Klammern in eine uint um, die an den ColorPicker übergeben wird.

Hier ist der Schlüssel, wir gehen im Wesentlichen in unseren ausgewählten MovieClip myChangedObject, gehen in seinen Transformationsbereich (in dem unsere Daten gespeichert sind), gehen in die colorTransform-Daten der Transformationsdaten und ziehen die Farbe-Variable heraus, die unseren RGB-Code enthält (der übergeben wir dann als ausgewählte Farbe des Farbwählers). Betrachten Sie es wie ein Verzeichnis:

myChangedObject/Transform Data/Color Transform Data/Color Data (RGB)

Wir sind immer noch nicht fertig! Als nächstes schauen wir uns unsere colorChanged() Funktion an. Hier erstellen wir eine neue Instanz der ColorTransform-Klasse. Wir setzen dann die Farbe-Variable in der ColorTransform-Klasse auf die Farbe, die der Benutzer mit der Farbauswahl ausgewählt hat.

Wir müssen jedoch der gewählten Farbe des ColorPickers (e.target.hexValue) ein "0x" hinzufügen, um die vollständige Variable zu bilden, die wir an unsere ColorTransform weitergeben können. Das liegt daran, dass hexValue Farben im String-Format "RRGGBB" liefert und wir sie im Integer-Format 0xRRGGBB benötigen. Wie zuvor konvertieren wir alle hinzugefügten Daten in ein neues uint(), das ColorTransform erkennen kann.

SCHLIESSLICH gehen wir zurück zu: myChangedObject.transform.colorTransform außer dieses Mal ändern wir TATSÄCHLICH die Variable colorTransform in die new ColorTransform-Variable, die wir gerade erstellt haben.

Puh, das war verwirrend, aber jetzt, da dieser Teil vorbei ist, können wir damit beginnen, unserem Programm neue Funktionen hinzuzufügen.


Schritt 8: Wechseln zwischen Bleistift und Farbeimer

Nachdem wir nun eine funktionale Farb-App haben, fügen wir weitere Funktionen hinzu.

Als nächstes werden wir versuchen, das Programm direkt auf die Körperteile des Spielers zeichnen zu lassen, damit der Benutzer einige coole Designs für seinen Charakter zeichnen kann. Wie Sie oben sehen können, habe ich ein Panel mit zwei Werkzeugen zusammengestellt. Zuerst haben wir einen Zeichenstift und als nächstes ein Farbeimerwerkzeug. Der Zweck dieses Tutorials besteht nicht darin, die Benutzeroberfläche zusammenzustellen, aber ich habe sie in die Quelle aufgenommen. Sie können die Grafiken sezieren, wenn Sie wissen möchten, wie sie erstellt wurden.

Außerdem ist dies eine Art Erweiterung aus diesem Tutorial von Carlos Yanez, das hervorragend erklärt, wie eine Zeichenanwendung erstellt wird.

Genau wie in diesem Tutorial habe ich eine Benutzeroberfläche, die aus zwei Farbeimern und zwei Bleistiftbildern besteht. Einer ist grau und der andere ist farbig. Das graue macht das bunte Bild sichtbar, um anzuzeigen, dass das Werkzeug aktiviert wurde.

Sobald ein Werkzeug aktiviert ist, wird das andere deaktiviert. In diesem Schritt arbeiten wir nur daran, zwischen den Werkzeugen zu wechseln. In den folgenden Schritten erfahren Sie, wie Sie das Stiftwerkzeug zum Laufen bringen. So sollte unser Code aussehen:

Zuerst sehen Sie, dass wir die Ereignislistener showPicker und colorChanged entfernt haben und sie jetzt nur noch sein werden hinzugefügt, wenn wir die Farbeimeroptionen auswählen. Stattdessen haben wir für jede Schaltfläche zwei Ereignis-Listener hinzugefügt, die auf zwei Funktionen verweisen, die das angeklickte Tool aktivieren. Die Funktionen fügen ihre eigenen Ereignis-Listener hinzu und entfernen die Ereignis-Listener aus dem anderen Tool. Sie machen auch die richtigen Interface-Elemente sichtbar und unsichtbar.

Unsere neue Anwendung


Schritt 9: Verwenden eines Farbwählers für Bleistift

Wir haben die Schnittstelle eingerichtet, aber eine Frage bleibt. Wie können wir auswählen, mit welcher Farbe für das Bleistiftwerkzeug gezeichnet werden soll? Die Antwort ist einfach. Wir können unseren Farbwähler einfach so neu positionieren, dass er neben dem Stiftwerkzeug steht. Es ist auch ganz einfach. Fügen Sie dies einfach am Ende der enablePencil()-Funktion hinzu:

Um sicherzustellen, dass der Player bei der Auswahl des Bucket-Tools nicht den ColorPicker verwendet, können wir dies einfach zur enableBucket()-Funktion hinzufügen:


Schritt 10: Eine Reihe von Körperteilen

Wir kommen unserem Charakter immer näher, aber wir haben noch einiges zu tun. Bald werden wir damit beginnen, unsere Zeichnungen zu Filmclips innerhalb der Figur zu maskieren, damit sie innerhalb der Konturen der Figur bleiben. Dazu müssen wir zunächst eine Liste der zu maskierenden Objekte erstellen. Wir können dies in Form eines Arrays tun.

Im Gegensatz zu zuvor müssen wir jedem Körperteil einen Instanznamen zuweisen. Gehen Sie also zurück in den Player-Movieclip und wählen Sie jedes Objekt nacheinander aus. Geben Sie jedem Objekt einen Namen ("Arm1", "Bein2", "Haar" usw.). Wenn Sie damit fertig sind, erstellen Sie im CustomCharacter()-Konstruktor ein Array wie folgt:

Das funktioniert leider nicht wie geplant.

Dies liegt daran, dass wir versuchen, auf den Player-Movieclip zu verweisen, bevor er erstellt wird. Um dies zu lösen, müssen wir auch im Konstruktor darauf verweisen.

Grundsätzlich teilen wir die Variable in zwei Teile auf. Der erste Teil befindet sich vor dem Konstruktor, wenn wir das Array erstellen, damit es in der gesamten Klasse zugänglich ist. Die zweite ist INNERHALB des Konstruktors, wenn wir ihm einen Wert zuweisen können.

Hier ein Ausschnitt unserer Klasse:


Schritt 11: Erstellen einer Leinwand zum Zeichnen

Um in ein Objekt zeichnen zu können, müssen wir die Shape-Klasse verwenden. Fügen Sie zunächst die Import-Anweisung zu den anderen  am Anfang unserer Main-Klasse hinzu.

Folgendes müssen Sie am Ende Ihrer CustomCharacter()-Konstruktorfunktion hinzufügen:

Hier ist eine kurze Erklärung, was wir tun. Wir erstellen im Grunde eine for-Schleife, die für jedes der Elemente in unserem Array einmal ausgelöst wird. In der Schleife erstellen wir eine neue Instanz der Shape-Klasse.

Die nächsten vier Zeilen sind nur für Debug-Tests, ähnlich wie Box2D-Debug-Draw. Grundsätzlich werden lila Kästchen um die Körperteile des Charakters angezeigt. Das einzige, was Sie beachten sollten, ist, dass wir die Breite und Höhe jedes Körperteils mit 3 multiplizieren, um die Breite und Höhe unserer violetten Testbox zu erhalten, damit wir wissen, dass jede dieser "Leinwände" groß genug ist, um sie zu zeichnen auf. Als nächstes weisen wir jeder erstellten Form den Namen "Formen" zu und fügen sie dem aktuellen Element des drawableParts-Arrays hinzu.


Schritt 11: Maskieren unserer Formen

Zu Beginn müssen wir unseren Formen auch eine zu maskierende Oberfläche geben. Wir können sie nicht einfach mit unserem Körperteil MovieClip verknüpfen, denn dann werden diese unsichtbar. Das können wir stattdessen tun.

Gehen Sie in den Haar-MovieClip. Klicken Sie mit der rechten Maustaste auf unseren Farb-MovieClip und klicken Sie auf "Kopieren". Klicken Sie dann mit der rechten Maustaste auf einen leeren Bereich in unserem Haar-MovieClip und klicken Sie auf "Einfügen". Gehen Sie nun in die Eigenschaften unseres neuen MovieClips und setzen Sie den Instanznamen auf maskclip. Gehen Sie nun zurück zu unserem Player MovieClip und wiederholen Sie dies für jedes Objekt.

Als nächstes können wir diesen Code am Ende unserer for-Schleife hinzufügen:

Testen Sie den Film noch einmal und wie von Zauberhand wird unser Player lila, da nur der schattierte Bereich des Players unsere Debug-Boxen zeigt. Das bedeutet, dass unsere Zeichnungen auf der Oberfläche bleiben, auf der wir zeichnen.


Schritt 12: Zugriff auf unsere Leinwand

Jetzt kommt die Frage: "Wie greife ich auf die Leinwand myShape jedes Körperteils zu?" Leider ist die Antwort nicht so einfach. Ich kann Sie jedoch Schritt für Schritt durchgehen. Dieses Snippet führt uns direkt zurück zu unserem myShape, wenn wir es in ein MouseEvent einfügen. Warum? Naja, lies einfach weiter.

Lassen Sie uns das Schritt für Schritt durchgehen. Dieser Prozess ist wie eine Maus (ja, eine echte), die versucht, ihren Käse (unsere Leinwand) zu finden, weil Wir müssen eine Reihe von Drehungen und Wendungen durchlaufen, um zu finden, wonach wir suchen.

  • Zuerst gehen wir zum Ziel des MouseEvents. Dies kann das Objekt sein, auf das die Maus geklickt, losgelassen, über das sie bewegt wurde usw.
  • Als nächstes gehen wir zum übergeordneten Objekt dieses Objekts. Dies ist zwangsläufig ein Körperteil-MovieClip (wie der Arm), da die einzigen anklickbaren Objekte entweder der Umriss oder die Füllung des Players sind (wir werden später sicherstellen, dass es sich um die Füllung handelt).
  • Da wir uns nun beim Hauptteil MovieClip befinden, können wir getChildByName("Object Name Here") verwenden, um auf das Objekt mit dem angegebenen Namen zuzugreifen.

Da wir zuvor alle unsere Shape-Objekte als Shapes bezeichnet haben, erhalten wir durch den Aufruf von getChildByName("shapes") Zugriff auf sie.


Schritt 13: Schwarz-Weiß-Färbung

Jetzt können wir anfangen, den Spieler schwarz auf weiß zu zeichnen.

So sollte unsere Hauptklasse am Ende des Tutorials aussehen. Ich habe alle Änderungen, die ich vorgenommen habe, mit Kommentaren versehen.

Der Zweck dieses Tutorials besteht nicht darin, das Zeichnen auf Shape-Objekten zu behandeln. Das wird vollständig von Carlos' Tutorial behandelt. Im Moment lernen wir nur die Techniken zum Zeichnen auf das richtige Objekt. Wenn Sie nicht wissen, wie wir auf das richtige Formobjekt zugreifen, lesen Sie bitte Schritt 12 erneut, um die vollständige Erklärung zu erhalten.


Schritt 14: Zeichnen mit Farbe

Jetzt können wir mit einer aus dem ColorPicker ausgewählten Farbe zum Zeichnen übergehen. Dies ist dem Prozess, den wir für das Füll-Werkzeug verwendet haben, ziemlich ähnlich.

Beginnen wir mit dem Hinzufügen einer neuen Variablen außerhalb aller Funktionen, aber innerhalb der Klasse. Dies ist, was unser Programm verwendet, um die aktuelle Farbe des Bleistifts zu speichern.

Kommen wir nun zu unserer drawOnPlayer()-Funktion. Konzentrieren Sie Ihre Aufmerksamkeit auf die Linie, die den lineStyle() der Form festlegt, auf der wir zeichnen. Der zweite Parameter in der Funktion sollte "0x000000" sein. Ändern Sie NUR diesen Parameter in:

Dies bedeutet im Grunde genommen, dass es den RBG-Code unseres ColorPicker verwenden soll, während das "0x" hinzugefügt wird, das zum Vervollständigen der Farbe erforderlich ist.

So sollte die Codezeile jetzt aussehen:

Schließlich müssen wir die Funktion colorChangedPencil() vervollständigen, die aufgerufen wird, wenn eine neue Bleistiftfarbe ausgewählt wird. Gehen Sie dorthin und fügen Sie diese Codezeile hinzu:

Dies ist einfach die Zuweisung des hexValue- oder RBG-Codes unseres ColorPickers an unsere PencilColor-Variable.


Schritt 15: Erweitern des Tastenfelds

Im nächsten Schritt werden wir daran arbeiten, unserem Spiel ein neues Feature hinzuzufügen. Leider können wir innerhalb des Panels nicht viel Platz für Platzhalter lassen, falls wir zufällig eine weitere Funktion hinzufügen. Sie können dies als schnelle und schmutzige Möglichkeit verwenden, um das Bedienfeld zu erweitern, um mehr Platz für andere Tasten und Werkzeuge für unsere Anwendung zu schaffen.

Schritt 1: Wählen Sie

Wählen Sie alle Objekte in unserem Optionen MovieClip aus.

Schritt 2: Umschalten

Halten Sie die Umschalt-Taste gedrückt und drücken Sie die linke Taste, um den MovieClip nach links zu schieben.

Schritt 3: Dehnen

Verwenden Sie das Mauswerkzeug und strecken Sie die Ecken unserer Panelfüllung (die graue Farbe) sowie unsere Umrisse über den Bildschirm.

Schritt 4: Neu einstellen

Stellen Sie sicher, dass Sie alle koordinatenbasierten Objekte ändern. Zum Beispiel müssen wir jetzt die Position des ColorPicker des Bleistifts ändern, weil sich unsere Bleistiftwerkzeug-Schaltfläche verschoben hat.


Schritt 16: Zurücksetzen unserer Daten

Wie bei jedem guten Zeichenprogramm müssen wir dem Spieler die Möglichkeit geben, sein Projekt neu zu starten. Was gibt es Besseres als eine Neustart-Schaltfläche für Benutzer, die keine perfekten Zeichenentscheidungen treffen können? Beginnen wir damit, einen neuen Button namens Restart zu erstellen und ihn unserem Werkzeuge-Panel hinzuzufügen.

Ich werde diese Schaltfläche verwenden (sie befindet sich in der FLA):

Platzieren Sie einen auf dem Movieclip der Werkzeuge und geben Sie ihm den Instanznamen "reset". Als nächstes fügen Sie unserer Konstruktorfunktion den folgenden Ereignis-Listener hinzu:

Fügen Sie nun diese Event-Handler-Funktion zu unserer Klasse hinzu:

Lesen Sie die Kommentare in der Funktion, um Schritt für Schritt zu erklären, was wir tun


Schritt 17: Animation integrieren

Wenn Sie sich vom Anfang des Tutorials erinnern, war das Ziel dieses Tutorials kein Ankleidespiel, sondern eine erweiterte Ankleidekomponente, die in Spielen verwendet werden kann. Bisher haben wir dem ansonsten statischen Charakter eine dynamische Anziehkomponente hinzugefügt. Als nächstes ist es unser Ziel, eine einfache Laufanimation in unsere Spieleranpassung zu integrieren.

Dies ist nur eine Demo, um Ihnen zu zeigen, wie einfach Sie diese Anpassungen in einem echten Spiel verwenden können.

Zu Beginn habe ich eine einfache Animation mit Tweens erstellt. Ich habe im Grunde genommen die MovieClips des Körperteils getweened, damit der Spieler so aussieht, als würde er gehen. Sie können die Animation unten sehen. Denken Sie daran, dass der Zweck dieses Tutorials nicht darin besteht, die eigentliche Animation zu entwerfen, sondern zu lernen, wie Sie sie in die bereits erstellte Anwendung integrieren. Die Animation ist jedoch wie die anderen Elemente der App im Quellcode enthalten.

Hier sehen Sie die Timeline des Players MovieClip.

Testen Sie jetzt den Film! Der Spieler sollte animiert sein. Sie können versuchen, auf den Beinen des Spielers zu zeichnen, und wenn Sie die Anweisungen richtig befolgt haben, sollte die Zeichnung beim Zeichnen auf den Beinen des Spielers haften und mit ihnen animiert werden. Warum das so ist, erkläre ich später im Detail.


Schritt 18: Zeichnen > Animationsworkflow

Wenn Sie früher versucht haben, auf dem Player zu zeichnen, hatten Sie möglicherweise Schwierigkeiten, auf den beweglichen Teilen zu zeichnen (DUH!). Dies liegt daran, dass wir noch keinen echten Workflow oder keine Schnittstelle implementiert haben. In diesem Schritt werden wir all dies tun, um unsere Anwendung vollständig nutzbar zu machen.

Um zu beginnen, fügen wir unserem Konstruktor eine Codezeile hinzu, um die Animation des Players zu stoppen:

Als nächstes müssen wir unser Panel wieder erweitern. Folgen Sie einfach Schritt 15 und machen Sie das Panel etwas länger

Jetzt müssen wir eine Schaltfläche "Animation abspielen" hinzufügen. Genau wie die anderen UI-Elemente ist meine Schaltfläche wie ein Schalter. Wenn Sie darauf klicken, wird die Sichtbarkeit eines anderen MovieClips umgeschaltet, um der Schaltfläche den Anschein zu erwecken, als würde sie aufleuchten. Der Instanzname der Schaltfläche ist playgame, während der leuchtende Instanzname des MovieClip abgespielt wird. Sehen Sie sich die FLA oder die SWF-Vorschau an, um zu sehen, wie diese zusammenpassen.

Hier ist der Code, den wir hinzufügen müssen, damit dies funktioniert ... Fügen Sie dies zuerst unserem Konstruktor hinzu, um den Beleuchtungseffekt zu deaktivieren:

Als nächstes fügen Sie diesen EventListener zu unserem Konstruktor hinzu:

Lassen Sie uns schließlich diese Funktion in unserer Klasse erstellen. Im Moment macht diese nur zwei Dinge. Erstens, sie schaltet die Sichtbarkeit unseres abspielenden MovieClips um. Anschließend wird überprüft, ob der MovieClip sichtbar ist. Wenn dies der Fall ist, wird die Animation unseres Spielers gestartet. Andernfalls stoppt es die Animation beim ersten Frame.

Herzlichen Glückwunsch, Sie haben jetzt eine grundlegende Animations-Engine in unser Customizing-Programm implementiert.


Schritt 19: Einige einfache Spiellogik

Alles sieht gut aus, aber welchen Spaß macht ein Spiel ohne Benutzerinteraktivität? In diesem Schritt werden wir unserem Spiel eine einfache Interaktivität hinzufügen. Laden Sie zunächst die KeyObject-Klasse von Senocular hier herunter. Dadurch wird unsere Logik viel einfacher zu schreiben.

Wir müssen die Klasse schnell ändern. Öffne es. Ersetzen Sie in der ersten Zeile das:

mit:

Jetzt können wir mit dem Importieren der Klasse beginnen. Denken Sie daran, es in das Verzeichnis unserer Hauptklasse zu legen. Fügen Sie diese Importanweisung neben den anderen hinzu:

So richten Sie die KeyObject-Klasse ein. Erstellen Sie einfach einen neuen Variablen-Schlüssel wie folgt:

Und weisen Sie es einer neuen Instanz der KeyObject-Klasse zu, während Sie die Stage-Eigenschaft hinzufügen, wie folgt:

Fügen Sie diese Codezeile entweder in den Konstruktor ein, oder fügen Sie, wenn das nicht funktioniert, diese Zeile zum Konstruktor hinzu:

...und fügen Sie dann eine neue Funktion hinzu, um dieses Ereignis zu behandeln:

Wenn Sie dies nicht tun, ist es möglich, dass die Stufe an dem Punkt, an dem Sie sie verwenden müssen, auf nichts verweist.

Als nächstes müssen wir einen ENTER_FRAME-Ereignis-Listener erstellen. Wir sollten es jedoch entfernen, wenn wir fertig sind. Fügen Sie diesen Code zu Ihrer enableGame()-Funktion hinzu:

Die Bedeutung dieses Codes sollte für Sie ziemlich klar sein, sodass Sie nicht wirklich erklärt werden müssen.

Hier ist nun unsere enterFrame()-Funktion:

Testen Sie Ihre SWF, indem Sie die linke und rechte Pfeiltaste drücken.


Schritt 20: ColorPicker-Popups reparieren!

Wie Sie vielleicht bemerkt haben, öffnet sich unser ColorPicker weiter, wenn wir das Stiftwerkzeug aktiv haben und den Spieler bewegen. Hier ist eine schnelle und schmutzige Lösung dafür! Nehmen Sie einfach die kommentierten Änderungen an Ihrer enableGame()-Funktion vor:

Mit dem Füll-Werkzeug müssen wir nichts machen, da es den ColorPicker bereits an die Position der Maus verschiebt.


Abschluss

Wie Sie sehen, ist es nicht so schwer, ein einzigartiges Anpassungserlebnis zu schaffen. Tatsächlich ist es eine sehr gute Möglichkeit, den Spieler seinen Avatar oder Charakter zu "seinem" machen zu lassen. Wirklich, wir haben nur die Oberfläche der in Flash verfügbaren Anpassungsoptionen überflogen. Sehen Sie, was Ihnen noch einfällt!

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.