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

Erstellen Sie ein RPG-ähnliches Textsystem für Ihr nächstes Spiel

by
Read Time:14 minsLanguages:

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

In diesem Tutorial erstellen wir ein Textsystem, das dem ähnelt, was Sie in vielen Rollenspielen sehen. Unsere Klasse rendert dynamisch ein Symbol für die Zeichen, während sie sprechen, und gibt Buchstaben für Buchstaben jeden Textblock ein.

Vorschau des Ergebnisses

Hier ist ein Beispiel für das Textsystem, das wir erstellen werden:

Schritt 1: Richten Sie Ihre Flash-Datei ein

Erstellen Sie eine neue Flash-Datei (Actionscript 3). Ihre Filmeinstellungen variieren je nach Spiel. Für diese Demo richte ich meinen Film als 500x300 mit schwarzem Hintergrund und 30 fps ein.

Flash file setup

Schritt 2: Fügen Sie ein Hintergrundbild hinzu

Sie werden das Textmodul höchstwahrscheinlich über einem Bild oder einer Animation aus Ihrem Spiel anzeigen. Für diese Demo verwende ich nur ein Bild, das ich zusammen mit einigen Charakteren aus meinen Spielen, die auf einem Schneefeld stehen, geworfen habe.

Legen Sie Ihr Hintergrundbild auf eine Ebene namens "background".

Background image or animation

Schritt 3: Erstellen Sie den RPGText MovieClip

Erstellen Sie auf der Bühne einen neuen MovieClip (Einfügen > MovieClip) mit dem Namen "RPGText".

Aktivieren Sie in den Symboleigenschaften "Export für Actionscript" und setzen Sie den Klassennamen auf "RPGText". Wir werden diesen Klassennamen später verwenden, um Code mit diesem MovieClip zu verknüpfen.

RPGText Symbol Properties

Klicken Sie OK. Wenn Sie hier eine Warnung sehen, dass die Klassendefinition nicht gefunden wurde, ist das in Ordnung. Es bedeutet nur, dass es (noch) keinen Code gibt, der mit diesem Symbol verknüpft werden kann.

Geben Sie Ihrem MovieClip den Instanznamen "rpgText". Denken Sie daran, wenn ich über "RPGText"(Großbuchstaben) spreche, beziehe ich mich auf die Klasse (oder MovieClip). "rpgText" (Kleinbuchstaben) ist der Name einer Instanz dieser Klasse.

Schritt 4: Fügen Sie einen Textfeldhintergrund hinzu

Zeichnen Sie ein Rechteck in Ihren neuen RPGText MovieClip. Dies ist der Hintergrund für die Zeichensymbole und die Sprechblase. Gestalte es so, wie du willst, aber es sollte sich über die gesamte Breite deines Films erstrecken und kurz genug sein, damit es nicht zu viel von deinem Spiel abdeckt.

Ich habe meine 500px breit (passend zu meinem Film) und 100px hoch gemacht. Ich habe es mit einem Farbverlauf von #666666 bis #999999 (dunkelgrau bis hellgrau) gefüllt.

Background Rectangle

Kurztipp: Um ein Rechteck einer bestimmten Größe zu zeichnen, wählen Sie das Rechteck-Werkzeug und klicken Sie bei gedrückter Alt-Taste auf die Bühne. Sie erhalten ein Dialogfeld, in das Sie die Abmessungen Ihres Rechtecks eingeben können.

Schritt 5: Das Charaktersymbol MovieClip

Erstellen Sie im RPGText MovieClip eine neue Ebene mit dem Namen "icon". Erstellen Sie auf dieser Ebene einen neuen MovieClip mit dem Namen "characterIcon" und geben Sie ihm den Instanznamen "characterIcon".

Erstellen Sie im charakterIcon MovieClip zwei neue Ebenen: "icons" und "labels". Die Symbolebene enthält alle Zeichensymbole (jedes auf einem eigenen Keyframe), und die Beschriftungsebene enthält Rahmenbeschriftungen, mit denen die Zeichen zum richtigen Zeitpunkt angezeigt werden.

Importieren (oder zeichnen Sie in Flash) ein Symbol für jeden der Charaktere in Ihrem Spiel, die sprechen werden. Für diese Demo habe ich für jeden meiner Charaktere ein JPG mit 75 x 75 Pixel erstellt. Fügen Sie die Symbole zur Symbolebene hinzu und erstellen Sie für jedes Zeichen einen neuen Keyframe. Die Reihenfolge, in der sie angezeigt werden, ist nicht wichtig. Stellen Sie jedoch sicher, dass jedes Symbol auf x:0, y:0 platziert ist, damit sie beim Wechseln der Zeichen nicht herumspringen.

Character Keyframes

Schritt 6: Fügen Sie Rahmenbeschriftungen hinzu

Erstellen Sie nun auf jedem Frame Ihrer Beschriftungsebene einen neuen Keyframe. Eine schnelle Möglichkeit, dies zu tun, besteht darin, alle Frames auszuwählen und F6 zu drücken.

Wählen Sie jeden Beschriftungsschlüsselrahmen einzeln aus und fügen Sie eine Rahmenbeschriftung hinzu, die dem Namen des Zeichens entspricht, das in diesem Rahmen angezeigt wird. Wenn Sie ein paar leere Frames (F5) zwischen Ihre Keyframes einfügen, wird das Lesen der Frame-Beschriftungen erleichtert. Stellen Sie lediglich sicher, dass Ihre Beschriftungs-Keyframes mit den Keyframes Ihrer Symbole ausgerichtet sind.

Adding Frame Labels

Stellen Sie sicher, dass jedes Ihrer Etiketten einen eindeutigen Namen hat. Wenn Sie zwei Zeichen mit demselben Namen haben, müssen Sie sie irgendwie unterscheiden (z. B. 'John_L' und 'John_K').

Schritt 7: Zeichnen Sie die Sprechblase

Kehren Sie zum RPGText MovieClip zurück und erstellen Sie eine neue Ebene mit dem Namen "textBackground".

Zeichnen Sie eine Sprechblase. Ich habe eine einfache Blase mit quadratischen Ecken gezeichnet, aber Sie können Ihre Blase so aussehen lassen, wie Se möchten. Machen Sie es groß genug, dass es den größten Teil des Hintergrundrechtecks ausfüllt und gut neben Ihren Charaktersymbolen sitzt.

Wählen Sie Ihre Sprechblase aus und konvertieren Sie sie in einen MovieClip (Ändern > In Symbol konvertieren). Jetzt, da es sich um einen MovieClip handelt, können wir einen Schlagschattenfilter hinzufügen. Ich habe meine auf Schwarz, 50% Stärke, 5px Unschärfe und 1px Abstand eingestellt.

Speech Bubble Graphic

Schritt 8: Fügen Sie das dynamische Textfeld hinzu

Erstellen Sie im RPGText MovieClip eine neue Ebene mit dem Namen "text". Verwenden Sie das Textwerkzeug, um ein Textfeld zu zeichnen. Passen Sie es genau in die Ränder der Sprechblasengrafik ein.

Machen Sie es zu einem mehrzeiligen dynamischen Textfeld mit dem Instanznamen "txt". Denken Sie daran, die Schriftart einzubetten, wenn Sie keinen Systemtext verwenden. Ich benutze 13pt Courier.

Dynamic Text Field Properties

Schritt 9: Fügen Sie die Schaltfläche Weiter hinzu

Wir brauchen eine Möglichkeit für den Spieler, zum nächsten Textblock zu gelangen, wenn der Spieler mit dem Lesen fertig ist. Fügen wir in der Ecke einen kleinen "Weiter"-Button hinzu.

Erstellen Sie im RPGText MovieClip eine neue Ebene mit dem Namen "button". Fügen Sie ein neues Schaltflächensymbol mit dem Namen "b_next" hinzu. Entwerfen Sie die vier Zustände Ihrer Schaltfläche, wie Sie möchten. Ich habe einen kleinen Abwärtspfeil als Schaltflächensymbol verwendet, weil ich das in vielen Spielen sehe und davon ausgehe, dass die Spieler damit vertraut sind.

Platzieren Sie Ihren Knopf in der unteren rechten Ecke oben auf Ihrer Sprechblase. Machen Sie sich keine Sorgen, wenn Sie ihm einen Instanznamen geben. Ich werde später erklären, warum.

Complete RPGText MovieClip

Schritt 10: Erstellen Sie die Dokumentklasse

Erstellen Sie eine neue Actionscript-Datei mit dem Namen "Main.as" und fügen Sie diesen Code hinzu, um die leere Shell für die Klasse zu erstellen:

Legen Sie Main als Dokumentklasse in Ihrer Flash-Datei fest. Wenn Sie eine kurze Auffrischung zur Verwendung einer Document-Klasse wünschen, ist dieser Quick-Tipp von Michael Williams eine der besten Erklärungen, die ich gesehen habe.

Schritt 11: Fügen Sie die Textblöcke hinzu

Wenn Sie dies in einem Spiel verwenden, werden Sie es an einer anderen Stelle ablegen, aber im Moment werden wir es der Dokumentklasse hinzufügen. Fügen Sie diesen Code der Konstruktorfunktion in der Main klasse hinzu:

Hier erstellen wir ein zweidimensionales Array (ein Array, das andere Arrays enthält), um das Skript für unsere Szene aufzunehmen. Bevor Sie etwas ändern, schauen Sie sich an, wie es strukturiert ist. Jedes Array ist ein separater Textblock, der zwei Elemente enthält. Der erste ist der Name des Charakters und der zweite ist der Text, den er sprechen wird. Die Textblöcke werden in der Reihenfolge aufgelistet, in der sie in der Szene angezeigt werden.

In der letzten Zeile wird nur das textBlocks-Array an den rpgText MovieClip gesendet (denken Sie daran, dass "rpgText" der Instanzname des RPGText MovieClip auf der Bühne ist). Dazu später mehr.

Bearbeiten Sie diesen Abschnitt entsprechend Ihrer Szene. Achten Sie besonders darauf, dass die Charakternamen genau den Namen entsprechen, die Sie für die Rahmenbeschriftungen im CharacterIcon MovieClip verwendet haben.

Schritt 12: Erstellen Sie die RPGText-Klasse

Wir sind endlich bereit, den Code für die RPGText-Klasse zu schreiben.

Erstellen Sie eine neue Actionscript-Datei mit dem Namen "RPGText.as" und fügen Sie diesen Code hinzu:

Dies ist nur eine grundlegende Shell für die Klasse. Es macht noch nichts, aber schauen wir uns an, was da ist:

  • In den ersten Zeilen werden nur einige der Klassen importiert, die wir benötigen werden.
  • In der Klassendeklaration erweitern wir die MovieClip-Klasse. Wir müssen dies tun, da diese Klasse mit dem RPGText MovieClip in der Bibliothek verknüpft ist (siehe Schritt 3).
  • Als nächstes haben wir zwei Konstanten, SPEAKER und TEXT, die wir verwenden, um den Sprechernamen und den Text aus dem textBlocks-Array abzurufen, das wir im vorherigen Schritt eingerichtet haben.
  • Die Variable _currentTextBlockIndex verfolgt, welchen Textblock wir gerade anzeigen.
  • _currentTextBlock enthält den eigentlichen Text.
  • _textBlocks enthält das gesamte Array von Textblöcken.
  • Schließlich gibt es den leeren Klassenkonstruktor.

(Hinweis: Ich verwende den Unterstrich in meinen Variablennamen, um private Variablen anzugeben.)

Schritt 13: Die textBlocks Setter-Funktion

Da unsere Variable _textBlocks privat ist, benötigen wir eine Möglichkeit, über die Main klasse, in der wir die Textblöcke einrichten, auf diese Variable zuzugreifen. Dazu erstellen wir eine "Setter" -Funktion. Fügen Sie dies der RPGText-Klasse direkt unter der Konstruktorfunktion hinzu:

Das Coole an Setzern in Flash ist, dass wir auf diese Funktion zugreifen können, als wäre sie eine öffentliche Eigenschaft der RPGText-Klasse. Genau das haben wir in Zeile 11 der Hauptklasse in Schritt 11 getan:

Schritt 14: Fügen Sie die updateText-Funktion hinzu

Fügen Sie diese Funktion der RPGText-Klasse hinzu:

Das ist die Kernfunktionalität der Klasse, in der die buchstabenweise Eingabe erfolgt. Schauen wir uns genauer an, was hier passiert:

  • Zeile 27: Diese Funktion akzeptiert ein Ereignis als Parameter, da wir es mit einem ENTER_FRAME-Ereignis aufrufen.
  • Zeile 28: Wir vergleichen die Länge (Anzahl der Zeichen), die sich derzeit im Textfeld txt befindet, mit der Anzahl der Zeichen in der Zeichenfolge _currentTextBlock.
  • Zeile 29: Wenn das Textfeld weniger Zeichen enthält, verwenden wir die substr-Methode, um alle Zeichen vom Anfang von _currentTextBlock bis zu einem Zeichen mehr als die Anzahl der Zeichen im Textfeld abzurufen. Wir fügen alle diese Zeichen in das Textfeld ein, wodurch am Ende des Textes im Textfeld ein weiteres Zeichen hinzugefügt wird.
  • Zeile 31: Wenn das Textfeld dieselbe Anzahl von Zeichen enthält wie die Zeichenfolge _currentTextBlock, entfernen Sie das Ereignis ENTER_FRAME, das diese Funktion aufruft.
  • Zeile 32: Rufen Sie die Funktion fillText auf. Wir werden diese Funktion im nächsten Schritt schreiben.

Schritt 15: Fügen Sie die Funktion fillText hinzu

Fügen Sie diese Funktion der RPGText-Klasse hinzu:

Der Hauptzweck dieser Funktion besteht darin, das Textfeld txt mit dem Text aus dem _currentTextBlock (Zeile 37) zu füllen. Wenn wir die Animation durchspielen lassen, sollte sich die updateText-Funktion darum kümmern, aber es ist gut sicherzustellen, dass nichts schief gelaufen ist. Wir können diese Funktion auch mit unserer Schaltfläche "Weiter" verbinden, damit die Spieler die Textanimation überspringen und das Textfeld sofort mit dem gesamten Textblock füllen können.

Beachten Sie, dass diese Funktion ein MouseEvent als Argument akzeptiert, den Standardwert jedoch auf null setzt. Das hilft uns, diese Funktion mit einem MouseEvent-Listener zu verwenden, da er das Ereignis akzeptiert. Da wir dem Ereignis einen Standardwert geben, können wir die Funktion auch aufrufen, ohne ein Ereignis zu senden, wie dies am Ende der Funktion updateText der Fall ist.

Nachdem wir das Textfeld ausgefüllt haben, überprüfen wir, ob dies der letzte Textblock im Array ist (wenn der _currentBlockIndex kleiner als die Anzahl der Elemente im _textBlock-Array ist). Wenn nicht, fügen wir einen CLICK-Listener hinzu, um eine Funktion namens nextTextBlock auszulösen, die wir als nächstes schreiben werden.

Schritt 16: Über Click Listener

Erinnern Sie sich, als wir die Schaltfläche "Weiter" erstellt haben und ich sagte, ich solle mir keine Sorgen machen, ihm einen Instanznamen zu geben? Haben Sie im letzten Schritt bemerkt, dass wir den CLICK-Listener anstelle der Schaltfläche an den gesamten RPGText MovieClip angehängt haben? Dadurch kann der Player auf eine beliebige Stelle im MovieClip klicken, um den Text voranzutreiben. Wir brauchen den Button wirklich nicht einmal, aber ich mag es, einen einzufügen, damit es einen Hinweis darauf gibt, dass Sie klicken, um den Text voranzutreiben.

Natürlich ist dies nur eine persönliche Präferenz von mir. Wenn Sie möchten, können Sie der Schaltfläche einen Instanznamen geben und stattdessen den CLICK-Listener an die Schaltfläche anhängen. Ich finde nur, dass der größere Trefferbereich einfacher zu bedienen ist.

Schritt 17: Fügen Sie die nextTextBlock-Funktion hinzu

Zurück zum Geschäftlichen. Fügen Sie diese Funktion der RPGText-Klasse hinzu:

Die ersten drei Zeilen sind ziemlich einfach. Entfernen Sie den MouseEvent-Listener, löschen Sie das Textfeld und erhöhen Sie die Variable _currentTextBlockIndex, um auf den nächsten Textblock zu verweisen.

Zeile 47 verwendet die TEXT-Konstante, um die aktuelle Textzeichenfolge aus dem _textBlocks-Array abzurufen und _currentTextBlock zuzuweisen.

Danach verwenden wir die SPEAKER-Konstante, um den Namen des Zeichens zu erhalten. Da die Charakternamen mit den Frame-Beschriftungen in unserem characterIcon MovieClip übereinstimmen, können wir gotoAndStop verwenden, um den characterIcon MovieClip an den Frame zu senden, der dieses Zeichensymbol anzeigt.

Schließlich fügen wir einen Ereignis-Listener hinzu, um mit der Eingabe der neuen Textzeichenfolge zu beginnen, und fügen dann einen CLICK-Listener hinzu, um fillText auszuführen, wenn auf MovieClip geklickt wird.

Schritt 18: Fügen Sie die Funktion startText hinzu

Wir sind fast fertig, wir müssen nur eine Funktion hinzufügen, mit der alles beginnt. Wir machen das mit einer öffentlichen Funktion namens "startText". Da dies eine öffentliche Funktion ist, platzieren wir sie am oberen Rand der RPGText-Klasse direkt unter dem textBlocks-Setter:

Ähnlich aussehend? Dieser Code macht fast genau das Gleiche wie die nextTextBlock-Funktion. Es legt das aktuelle Text- und Zeichensymbol fest und fügt die Ereignis-Listener für updateText und fillText hinzu. Da diese Funktion nur ausgeführt wird, wenn der Text zum ersten Mal gestartet wird, müssen wir uns nicht darum kümmern, das Textfeld zu löschen oder den _currentTextBlockIndex zu erhöhen, wie wir es in nextTextBlock getan haben.

Schritt 19: Rufen Sie die Funktion startText auf

Jetzt haben wir eine öffentlich zugängliche Möglichkeit, den Text zu starten. Lassen Sie es uns nutzen.

Fügen Sie diese Zeile am Ende der Konstruktorfunktion der Hauptklasse hinzu:

Dies ruft nur die Funktion startText innerhalb der RPGText-Klasse auf. Das sollte alles in Gang bringen.

Schritt 20: Sound hinzufügen

Sie sollten jetzt in der Lage sein, Ihren Film zu testen und zu sehen, wie alles funktioniert. Es fehlt jedoch nur eines: Ton.

Suchen (oder erstellen) Sie einen Sound, der abgespielt werden soll, während der Text eingegeben wird. Wenn Sie einen Sound dafür auswählen, halten Sie ihn sehr kurz, da dieser Sound während der Texttypen immer wieder abgespielt wird. Ein kleiner "Boop" oder Knopfdruck funktioniert am besten für diesen Effekt.

Importieren Sie den Sound in die Bibliothek in Ihrer Flash-Datei, aktivieren Sie "Export for Actionscript" und geben Sie ihm den Klassennamen "TypingSound".

Sound Export Settings

Damit dieser Sound abgespielt werden kann, müssen der RPGText-Klasse nur zwei Zeilen hinzugefügt werden. Zuerst müssen wir den Ton instanziieren. Fügen Sie diese Zeile oben in der Klasse unter den drei anderen privaten Variablen hinzu:

Fahren Sie nun mit der Funktion updateText fort und fügen Sie eine Zeile hinzu, die den Sound jedes Mal wiedergibt, wenn der Text aktualisiert wird (Zeile 38 ist neu):

Schritt 21: Weiter gehen

Das war's für die Demo. An diesem Punkt sollte alles funktionieren, aber wenn Sie dies in ein Spiel integrieren möchten, haben Sie noch etwas Arbeit vor sich.

Je nachdem, wie Ihr Spiel eingerichtet ist, möchten Sie wahrscheinlich zuerst die Textblöcke aus der Dokumentklasse ziehen. Möglicherweise haben Sie eine Szenenklasse, mit der Sie die einzelnen Konversationen einrichten, die in Ihrem Spiel stattfinden, oder eine Strings-Klasse, die den gesamten Text für jede Konversation enthält.

Zweitens möchten Sie darüber nachdenken, wie und wann das Textmodul in Ihrem Spiel angezeigt wird. Möglicherweise möchten Sie eine Tween-Animation hinzufügen, mit der sie beim Starten und Beenden einer Konversation von unten nach unten verschoben werden kann. Sie sollten auch darauf achten, wenn die Konversation beendet ist, um entweder das Textmodul auszublenden oder die nächste Konversation zu starten.

Da wir bereits prüfen, ob der letzte Textblock in der Funktion fillText erreicht wurde, können Sie dort leicht etwas hinzufügen, das das Ende der Konversation behandelt.

Ich nehme diese Themen nicht in das Tutorial auf, da die Art und Weise, wie Sie mit diesen Dingen umgehen, sehr spezifisch für Ihr Spiel ist. Dies sollte jedoch ausreichen, um Ihnen den Einstieg zu erleichtern.

Ich hoffe, es hat euch gefallen! Schreiben Sie einen Kommentar und teilen Sie mir Ihre Meinung mit.

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.