Share
In diesem Tutorial erstellen wir ein Textsystem, das dem ähnelt, was Sie in vielen Rollenspielen sehen. Unsere Klasse zeigt dynamisch ein Symbol für die Zeichen an, während sie sprechen, und schreibt jeden Textblock Buchstaben für Buchstaben.
Hier ist ein Beispiel für das Textsystem, das wir erstellen werden:
Erstellen Sie eine neue Flash-Datei (Actionscript 3). Ihre Filmeinstellungen variieren je nach Spiel. Für diese Demo stelle ich meinen Film als 500x300 mit schwarzem Hintergrund und 30 Bildern pro Sekunde ein.
Wahrscheinlich zeigen Sie das Textmodul über ein Bild oder eine Animation aus Ihrem Spiel. Für diese Demo verwende ich nur ein Bild, das ich zusammen mit einigen Charakteren meiner Spiele in einem Schneefeld geworfen habe.
Lege dein Hintergrundbild auf eine Ebene namens "Hintergrund".
Erstellen Sie auf der Bühne einen neuen MovieClip (Einfügen> MovieClip) mit dem Namen "RPGText".
Aktivieren Sie in den Symboleigenschaften "Export for Actionscript" und setzen Sie den Klassennamen auf "RPGText". Wir werden diesen Klassennamen später verwenden, um Code mit diesem MovieClip zu verknüpfen.
OK klicken. Wenn Sie hier eine Warnung sehen, dass die Klassendefinition nicht gefunden wurde, ist dies in Ordnung. Es bedeutet nur, dass noch kein Code zu diesem Symbol verlinkt ist..
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 eines Beispiel dieser Klasse.
Zeichnen Sie ein Rechteck in Ihr neues RPGText Filmausschnitt. Dies ist der Hintergrund für die Zeichensymbole und die Sprechblase. Gestalten Sie es nach Ihren Wünschen, aber es sollte sich über die gesamte Breite Ihres Films erstrecken und so kurz sein, dass es nicht zu viel von Ihrem Spiel abdeckt.
Ich habe meinen 500px (passend zu meinem Film) und 100px hoch gemacht. Ich füllte es mit einem Farbverlauf von # 666666 bis # 999999 (dunkelgrau bis hellgrau).
Kurzer Tipp: Um ein Rechteck mit einer bestimmten Größe zu zeichnen, wählen Sie das Rechteckwerkzeug aus und klicken Sie mit der rechten Maustaste auf die Bühne. Sie erhalten ein Dialogfeld, in dem Sie die Abmessungen Ihres Rechtecks eingeben können.
Erstellen Sie eine neue Ebene im RPGText MovieClip namens "Symbol". Erstellen Sie auf dieser Ebene einen neuen MovieClip mit dem Namen "characterIcon" und geben Sie dem Instanznamen "characterIcon".
In der characterIcon MovieClip erstellt zwei neue Ebenen: "Symbole" und "Beschriftungen". Die Symbolebene enthält alle Ihre Zeichensymbole (jedes auf einem eigenen Keyframe), und die Beschriftungsebene enthält Rahmenbeschriftungen, mit denen wir die Zeichen zur richtigen Zeit anzeigen.
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 einen 75x75px JPG gemacht. Fügen Sie die Symbole zum hinzu Symbole Ebene, so dass für jedes Zeichen ein neuer Keyframe erstellt wird. Die Reihenfolge, in der sie angezeigt werden, ist nicht wichtig, aber stellen Sie sicher, dass jedes Symbol in x: 0, y: 0 steht, damit sie beim Wechseln der Zeichen nicht springen.
Erstellen Sie nun in jedem Frame Ihres neuen einen neuen Keyframe Etiketten Schicht. Um dies schnell zu tun, wählen Sie alle Bilder aus und drücken Sie F6.
Wählen Sie die einzelnen Label-Keyframes nacheinander aus und fügen Sie eine Bildbezeichnung hinzu, die dem Namen des in diesem Frame angezeigten Zeichens entspricht. Wenn Sie ein paar leere Bilder (F5) zwischen Ihren Keyframes hinzufügen, können Sie die Beschriftungen der Bilder leichter lesen Etiketten Keyframes bleiben mit Ihrem Symbole Keyframes.
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 ('John_L' und 'John_K' zum Beispiel).
Gehe zurück zum RPGText MovieClip und erstelle eine neue Ebene namens "textBackground".
Zeichne eine Sprechblase. Ich habe eine einfache Blase mit eckigen Ecken gezeichnet, aber Sie können Ihre aussehen lassen, wie Sie möchten. Machen Sie es groß genug, dass es den Großteil des Hintergrundrechtecks ausfüllt und sich schön neben Ihren Charaktersymbolen befindet.
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 Schattenfilter hinzufügen. Ich habe meine Einstellung auf Schwarz, 50% Stärke, 5 Pixel Unschärfe und 1 Pixel Abstand gesetzt.
Erstellen Sie eine neue Ebene in der RPGText MovieClip namens "Text". Verwenden Sie das Textwerkzeug, um ein Textfeld zu zeichnen. Machen Sie es gerade innerhalb der Ränder der Sprechblasengrafik.
Machen Sie es zu einem mehrzeiligen dynamischen Textfeld mit dem Instanznamen "txt". Denken Sie daran, die Schrift einzubetten, wenn Sie keinen Systemtext verwenden. Ich verwende 13pt Courier.
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 Sie in der Ecke einen kleinen "nächsten" Button hinzu.
Erstellen Sie eine neue Ebene in der RPGText MovieClip "Schaltfläche" genannt. Fügen Sie ein neues Schaltflächensymbol mit dem Namen "b_next" hinzu. Gestalten Sie die vier Zustände Ihrer Schaltfläche, wie Sie möchten. Ich habe einen kleinen Abwärtspfeil als Tastensymbol verwendet, weil ich in vielen Spielen sehe und davon ausgehe, dass die Spieler damit vertraut sind.
Platzieren Sie Ihren Knopf in der rechten unteren Ecke über Ihrer Sprechblase. Machen Sie sich keine Sorgen, wenn Sie ihm einen Instanznamen geben. Ich erkläre später warum.
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:
package import flash.display.MovieClip; public class Main erweitert MovieClip // CONSTRUCTOR öffentliche Funktion Main ()
Legen Sie in Ihrer Flash-Datei Main als Dokumentklasse fest. Wenn Sie sich kurz über die Verwendung einer Document-Klasse informieren möchten, ist dieser Quick Tip von Michael Williams eine der besten Erklärungen, die ich gesehen habe.
Wenn Sie dies in einem Spiel verwenden, entscheiden Sie sich wahrscheinlich, es an einer anderen Stelle zu platzieren, aber jetzt fügen wir es der Dokumentenklasse hinzu. Fügen Sie diesen Code der Konstruktorfunktion in hinzu Main Klasse:
var textBlocks: Array = new Array (["Kid", "Guck mal, ein Roboter!"], ["Abe", "BLEEP-BLOOP. Ich bin ein autonomer Botanical Engineer. Sie können mich ABE nennen."], [" Kid "," Hi Abe. Treffen Sie Frosty den Schneemann. "], [" Frosty "," Happy Birthday! "], [" Abe "," BEEP-BIP. Hallo, Frosty. "], [" Abe "," Gehört dieser Frosch Ihnen? "], [" Frosch "," Ribbit ... "], [" Kid "," Nein, ich habe ihn noch nie gesehen. Sind Sie nicht ein kalter Frosch? "], [" Frosch " , "Ribbit…"]); rpgText.textBlocks = TextBlocks;
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, sehen Sie sich die Struktur an. 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 aufgeführt, in der sie in der Szene erscheinen.
Die letzte Zeile sendet nur die textBlocks Array zum rpgText MovieClip (Denken Sie daran, dass "rpgText" der Instanzname des RPGText MovieClip auf der Bühne ist). Mehr dazu später.
Bearbeiten Sie diesen Abschnitt entsprechend Ihrer Szene. Achten Sie besonders darauf, dass die Namen der Zeichen genau den Namen entsprechen, die Sie für die Bildbezeichnungen im characterIcon MovieClip verwendet haben.
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:
package import flash.events.Event; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.media.Sound; public class RPGText erweitert MovieClip private const SPEAKER: int = 0; private const TEXT: int = 1; private var _currentTextBlockIndex: int = 0; private var _currentTextBlock: String; private var _textBlocks: Array; // CONSTRUCTOR öffentliche Funktion RPGText ()
Dies ist nur eine grundlegende Shell für die Klasse. Es tut noch nichts, aber schauen wir uns an, was da ist:
(Hinweis: Ich benutze den Unterstrich in meinen Variablennamen, um private Variablen anzuzeigen.)
Seit unserem _textBlocks Variable ist privat. Wir brauchen eine Möglichkeit, auf diese Variable von der Main Klasse, wo wir die Textblöcke einrichten. Wir machen das, indem wir eine "Setter" -Funktion erstellen. Fügen Sie dies der RPGText-Klasse direkt unter der Konstruktorfunktion hinzu:
public function set textBlocks (txt: Array): void _textBlocks = txt;
Das Coole an Setters 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:
rpgText.textBlocks = TextBlocks;
Fügen Sie der RPGText-Klasse diese Funktion hinzu:
private Funktion updateText (e: Event): void if (txt.text.length.) < _currentTextBlock.length) txt.text = _currentTextBlock.substr(0, txt.text.length+1); else removeEventListener(Event.ENTER_FRAME, updateText); fillText();
Dies ist die Kernfunktionalität der Klasse, in der die Eingabe Buchstabe für Buchstabe erfolgt. Schauen wir uns das an, was hier passiert:
Fügen Sie der RPGText-Klasse diese Funktion hinzu:
private Funktion fillText (e: MouseEvent = null): void txt.text = _currentTextBlock; if (_currentTextBlockIndex < _textBlocks.length-1) addEventListener(MouseEvent.CLICK, nextTextBlock);
Der Hauptzweck dieser Funktion ist das Ausfüllen von TXT Textfeld mit dem Text aus der _currentTextBlock (Zeile 37). Wenn wir die Animation abspielen lassen, die updateText Die Funktion sollte sich darum kümmern, aber es ist gut sicherzustellen, dass nichts schief geht. Wir können diese Funktion auch an die Schaltfläche "Weiter" anschließen, 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, wir setzen jedoch den Standardwert auf null. Dies ermöglicht uns die Verwendung dieser Funktion mit einem MouseEvent-Listener, da das Ereignis akzeptiert wird. Da wir dem Ereignis einen Standardwert geben, können Sie die Funktion auch ohne Senden eines Ereignisses aufrufen, wie am Ende des updateText Funktion.
Nachdem wir das Textfeld ausgefüllt haben, überprüfen wir, ob dies der letzte Textblock im Array ist (wenn der Text angezeigt wird) _currentBlockIndex ist weniger als die Anzahl der Elemente in _Textblock Array). Wenn nicht, fügen wir einen CLICK-Listener hinzu, um eine aufgerufene Funktion auszulösen nextTextBlock was wir als nächstes schreiben werden.
Erinnern Sie sich noch daran, als wir den "next" -Button erstellt haben und ich sagte, ich solle mir keine Sorgen machen, wenn ich ihm einen Instanznamen gebe? Haben Sie im letzten Schritt festgestellt, wie wir den CLICK-Listener an den gesamten RPGText MovieClip angeschlossen haben, anstatt den Button? Dadurch kann der Player auf eine beliebige Stelle des MovieClips klicken, um den Text vorzustellen. Wir brauchen den Button wirklich nicht, aber ich setze gerne einen ein, so dass es Anzeichen dafür gibt, dass Sie klicken, um den Text vorzustellen.
Natürlich ist das 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, dass der größere Trefferbereich einfacher zu verwenden ist.
Zurück zum Geschäftlichen. Fügen Sie der RPGText-Klasse diese Funktion hinzu:
private Funktion nextTextBlock (e: MouseEvent): void removeEventListener (MouseEvent.CLICK, nextTextBlock); txt.text = ""; // den Text löschen _currentTextBlockIndex ++; _currentTextBlock = _textBlocks [_currentTextBlockIndex] [TEXT]; // setze den Text characterIcon.gotoAndStop (_textBlocks [_currentTextBlockIndex] [SPEAKER]); // das Zeichensymbol setzen addEventListener (Event.ENTER_FRAME, updateText); // Aktualisierung des Textes beginnen addEventListener (MouseEvent.CLICK, fillText);
Die ersten drei Zeilen sind ziemlich einfach. Entfernen Sie den MouseEvent-Listener, löschen Sie das Textfeld und erhöhen Sie den Wert _currentTextBlockIndex var, um auf den nächsten Textblock zu zeigen.
Zeile 47 verwendet die TEXT Konstante, um die aktuelle Textzeichenfolge aus der _textBlocks Array und ordnen Sie es zu _currentTextBlock.
Als nächstes benutzen wir die REDNER Konstante, um den Namen des Zeichens zu erhalten. Da stimmen die Charakternamen mit den Rahmenbeschriftungen in unserem überein characterIcon MovieClip können wir verwenden gotoAndStop das senden characterIcon MovieClip zu dem Bild, das 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 zum Ausführen hinzu fillText wenn der MovieClip angeklickt wird.
Wir sind fast fertig, wir müssen lediglich eine Funktion hinzufügen, mit der alles beginnen kann. Wir machen das mit einer öffentlichen Funktion namens "startText". Da dies eine öffentliche Funktion ist, setzen wir sie an die Spitze der RPGText-Klasse, direkt unter der textBlocks Setter:
öffentliche Funktion startText (): void _currentTextBlock = _textBlocks [_currentTextBlockIndex] [TEXT]; characterIcon.gotoAndStop (_textBlocks [_currentTextBlockIndex] [SPEAKER]); addEventListener (Event.ENTER_FRAME, updateText); addEventListener (MouseEvent.CLICK, fillText);
Ähnlich aussehend? Dieser Code macht fast dasselbe wie der nextTextBlock Funktion. Es legt das aktuelle Symbol für Text und Zeichen fest und fügt die Ereignis-Listener hinzu updateText und fillText. Da diese Funktion nur beim Start des Textes ausgeführt wird, müssen Sie sich nicht darum kümmern, das Textfeld zu löschen oder das Textfeld zu erhöhen _currentTextBlockIndex wie wir es gemacht haben nextTextBlock.
Nun haben wir eine öffentlich zugängliche Möglichkeit, den Text zu starten. Lass es uns verwenden.
Fügen Sie diese Zeile am unteren Rand der Konstruktorfunktion Main-Klasse hinzu:
rpgText.startText ();
Dies ist nur der Aufruf der startText-Funktion innerhalb der RPGText-Klasse. Das sollte alles in Gang bringen.
Sie sollten jetzt in der Lage sein, Ihren Film zu testen und zu sehen, wie alles funktioniert. Es fehlt jedoch nur eine Sache: Sound.
Finden (oder erstellen) Sie einen Sound, der abgespielt werden soll, während der Text eingegeben wird. Halten Sie sich bei der Auswahl eines Sounds dafür sehr kurz, da dieser Sound immer wieder abgespielt wird, wenn der Text eingeschaltet 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".
Damit dieser Sound abgespielt werden kann, müssen der RPGText-Klasse nur zwei Zeilen hinzugefügt werden. Zuerst müssen wir den Sound instanziieren. Fügen Sie diese Zeile oben in der Klasse unter den drei anderen privaten Variablen ein:
private var _typingSound: Sound = new TypingSound ();
Springen Sie nun zur updateText-Funktion und fügen Sie eine Zeile hinzu, die den Sound bei jeder Textaktualisierung wiedergibt (Zeile 38 ist neu):
private Funktion updateText (e: Event): void if (txt.text.length.) < _currentTextBlock.length) txt.text = _currentTextBlock.substr(0, txt.text.length+1); _typingSound.play(); else removeEventListener(Event.ENTER_FRAME, updateText); fillText();
Das war es für die Demo. An diesem Punkt sollte alles funktionieren, aber wenn Sie dies in ein Spiel integrieren möchten, haben Sie noch einiges zu tun.
Zuerst möchten Sie, je nachdem, wie Ihr Spiel eingerichtet ist, die Textblöcke aus der Dokumentenklasse ziehen. Möglicherweise verfügen Sie über eine Scene-Klasse, mit der Sie die einzelnen Konversationen Ihres Spiels einrichten, oder eine Strings-Klasse, die den gesamten Text für jede Konversation enthält.
Zweitens sollten Sie darüber nachdenken, wie und wann das Textmodul in Ihrem Spiel erscheint. Möglicherweise möchten Sie eine Tween-Animation hinzufügen, die bewirkt, dass sie von unten nach unten und unten verschoben wird, wenn eine Konversation beginnt und endet. Sie möchten auch auf das Ende der Konversation achten, um entweder das Textmodul auszublenden oder die nächste Konversation zu beginnen.
Da wird bereits geprüft, ob der letzte Textblock im Textfeld erreicht wurde fillText Funktion, können Sie leicht etwas hinzufügen, das das Ende der Konversation erledigt.
Ich füge diese Themen nicht in das Tutorial ein, da die Art und Weise, wie Sie diese Dinge angehen, sehr spezifisch für Ihr Spiel ist. Dies sollte ausreichen, um den Einstieg zu erleichtern.
Ich hoffe, es hat euch gefallen! Schreibe einen Kommentar und lass mich wissen, was du denkst.
Accentsconagua