Advertisement
  1. Code
  2. Effects

Erstellen Sie eine Rolling Score Counter-Klasse im Flipper-Stil

by
Read Time:11 minsLanguages:

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

Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Activetuts+. Dieses Tutorial wurde erstmals im Februar 2010 veröffentlicht.

In diesem Tutorial erstellen Sie eine wiederverwendbare Score-Klasse, die beim Hinzufügen von Punkten bis zur neuen Gesamtsumme zählt (anstatt zur neuen Punktzahl zu springen). Wir werden sowohl die Erstellung von Grafiken als auch den Code behandeln.


Vorschau des Endergebnisses

Wenn Sie in einigen Spielen Punkte sammeln, springt Ihre Punktzahl sofort auf die neue Summe. Ich denke, es ist viel cooler, wenn die Punktzahl eins nach dem anderen zählt, damit der Spieler "Punkte sammeln" kann. Das machen wir hier.

Hier ist ein Beispiel für die Score-Klasse in Aktion:

Die Hauptidee hinter diesem Tutorial ist es, Ihnen das Programmieren der "Counting-up" -Funktionalität beizubringen, aber ich werde Ihnen auch zeigen, wie Sie die coole LED-Anzeige erstellen, die in der Vorschau angezeigt wird. Wir beginnen mit der Gestaltung der Zahlen:


Schritt 1: Richten Sie Ihre Flash-Datei ein

Erstellen Sie eine neue Flash-Datei (ActionScript 3.0). Ihre Filmeinstellungen variieren je nach Spiel. Für diese Demo richte ich meinen Film auf 500x300, schwarzen Hintergrund und 30 fps ein.

Flash file setupFlash file setupFlash file setup

Schritt 2: Erstellen Sie das Ziffernsymbol

Erstellen Sie ein neues Movieclip-Symbol (Einfügen > Neues Symbol). Geben Sie diesem Symbol den Namen "digit".

TKTKTK

Schritt 3: Erstellen Sie das Ziffern-Textfeld

Verwenden Sie innerhalb des Ziffernfilms das Textwerkzeug, um dem Symbol eine Zahl 0 hinzuzufügen. Ich verwende eine Schriftart namens Digital Readout, aber jede LED-Schriftart sollte funktionieren.

Stellen Sie die Textgröße auf 40 pt ein und machen Sie sie hell bernsteinfarben/orange (#F4C28B). Stellen Sie das Absatzformat auf zentriert ein.

TKTKTK

Schritt 4: Glühen hinzufügen

Fügen Sie Ihrem Textfeld zwei separate Glühfilter hinzu. Stellen Sie die Farbe für beide auf Rot (#FF0000) und die Stärke für beide auf 200%.

Aktivieren Sie das Kontrollkästchen Inner Glow und stellen Sie die Unschärfe auf 2px ein. Lassen Sie den anderen bei 5px Unschärfe.

TKTKTK

Sie können eine andere Farbe verwenden, wenn Sie möchten (blau oder grün würden beide cool aussehen). Der Trick, um es realistisch aussehen zu lassen, besteht darin, die Textfarbe ein wenig verwaschen zu machen und das Leuchten auf eine gesättigte Farbe einzustellen. Dadurch sieht es so aus, als würde es Licht emittieren.


Schritt 5: Fügen Sie weitere Nummern hinzu

Erstellen Sie Keyframes für die Frames 1-10 des Ziffernfilms. Eine einfache Möglichkeit, dies zu tun, besteht darin, die Bilder 1-10 auszuwählen (klicken Sie auf Bild 1 und dann bei gedrückter Umschalttaste auf Bild 10) und F6 zu drücken.

Sie sollten jetzt 10 Frames mit jeweils einem Keyframe mit Ihrem leuchtenden 0-Textfeld haben. Gehen Sie jeden Frame durch und ändern Sie die Zahlen, sodass Sie die Ziffern 0-9 haben. Bild 1 hat "0", Bild 2 hat "1", Bild 3 hat "2" usw.

TKTKTK

Nennen Sie diese Ebene "numbers".


Schritt 6: Fügen Sie den LED-Hintergrund hinzu

Wir fügen jetzt einen "Aus" -Status für die LED-Nummern hinzu, damit Sie die nicht beleuchteten Segmente der LED-Anzeige sehen können.

Kopieren Sie Ihre 8-stellige (in Bild 9). Erstellen Sie eine neue Ebene mit dem Namen "background". Wenn die neue Ebene ausgewählt ist, verwenden Sie Einfügen an Ort und Stelle (Bearbeiten > An Ort und Stelle einfügen), um die 8-stellige Stelle genau an der Position einzufügen, die wir kopiert haben.

Entfernen Sie das Leuchten von der neuen 8-stelligen Stelle und ändern Sie die Farbe in dunkelgrau (#333333). Fügen Sie einen Unschärfefilter hinzu, bei dem die Unschärfe auf 3 Pixel eingestellt ist. Verschieben Sie diese Ebene unter die Ebene "numbers".

TKTKTK

Jetzt können Sie durch die Rahmen scrubben und sehen, wie die nicht beleuchteten Segmente der LED hinter jeder Zahl angezeigt werden.


Schritt 7: Fügen Sie die Stop-Aktion hinzu

Erstellen Sie eine weitere neue Ebene mit dem Namen "actions". Öffnen Sie das Aktionsfenster und fügen Sie eine stop() - Aktion in Bild 1 hinzu.

TKTKTK

Dadurch bleibt auf dem Display '0', bis wir etwas anderes mitteilen.


Schritt 8: Warum Frames?

Warum setzen wir jede Ziffer manuell in einen eigenen Rahmen, anstatt ein dynamisches Textfeld zu verwenden? Gute Frage.

Der Hauptgrund ist, dass dies die Flexibilität erhöht, um die Grafiken später zu aktualisieren. Wenn Sie das Design ändern und Bitmaps für die Zahlen verwenden möchten oder jede Ziffer in einer anderen Schriftart oder Farbe anzeigen möchten, ist dies ganz einfach.

Wenn Designer und Entwickler gemeinsam an einem Projekt arbeiten, ist es am besten, Dinge so zu erstellen, dass Designer einfach auf so viele Grafiken wie möglich zugreifen können.
Ich denke, dieses Setup macht das mehr als die Verwendung von dynamischem Text.


Schritt 9: Erstellen Sie den Score Movie Clip

Erstellen Sie einen neuen Movieclip mit dem Namen "Score". Aktivieren Sie "Für ActionScript exportieren" und setzen Sie den Klassennamen ebenfalls auf "Score".

TKTKTK

Ziehen Sie den digitalen Filmclip aus der Bibliothek in den Score-Movieclip. Duplizieren Sie den Ziffernclip (Bearbeiten > Duplizieren) sechsmal (Sie haben also sieben Ziffern) und platzieren Sie sie gleichmäßig.

Da wir nur sieben Ziffern haben, können wir maximal 9.999.999 Punkte aneigen. Wenn Ihr Spiel höhere Punktzahlen berücksichtigen muss, fügen Sie dementsprechend weitere Ziffern hinzu.

Fügen Sie zwischen jeder dritten Ziffer etwas mehr Platz ein, um Komma-Trennzeichen zu berücksichtigen.

TK

Schritt 10: Benennen Sie die Ziffernclips

Wählen Sie den Filmclip ganz links aus und geben Sie ihm den Instanznamen "digit1". Nennen Sie den nächsten rechts "digit2", dann "digit3" und so weiter.

TK

Schritt 11: Kommas hinzufügen

Erstellen Sie eine neue Ebene mit dem Namen "commas".

Der einfachste Weg, um die Kommas genau wie die Zahlen aussehen zu lassen, besteht darin, in einen der Ziffernclips zu gehen und eines der Zahlentextfelder zu kopieren.
Fügen Sie das Textfeld wieder in die Komma-Ebene ein und ändern Sie die Zahl in ein Komma. Dupliziere es und verschiebe es so oft du brauchst.

TK

Schritt 12: Fügen Sie einen Hintergrund hinzu

Für den Score-Hintergrund fügen wir einfach ein einfaches abgerundetes Rechteck hinzu.

Erstellen Sie eine neue Ebene mit dem Namen "background" und platzieren Sie sie hinter den Ebenen für Zahlen und Kommas. Wählen Sie das Rechteck-Werkzeug und klicken Sie bei gedrückter Wahltaste (Alt-Klick) auf die Bühne. Machen Sie ein Rechteck 200px x 40px mit 3px Ecken (verlängern Sie Ihr Rechteck, wenn Sie mehr Ziffern haben). Machen Sie die Füllung schwarz und den Strich 1px grau (#666666).

TK

Aus irgendeinem Grund verzerrt Flash immer Striche auf abgerundeten Rechtecken. Um dies zu umgehen, wählen Sie den Strich aus und wählen Sie Ändern > Form > Linien in Füllungen konvertieren. Dadurch wird der Strich von einer Linie in eine gefüllte Form umgewandelt und nicht mehr verzerrt.

TKTKTK

Wenn Sie der Meinung sind, dass dies eine vollständige Problemumgehung für grundlegende Funktionen darstellt, die vor Jahren hätte behoben werden müssen, sollten Sie sich an Adobe wenden und diese informieren.


Schritt 13: Shine hinzufügen

Welche Grafik wäre komplett ohne einen iPhone-ähnlichen Glanz?

Erstellen Sie eine neue Ebene über allem, was "shine" genannt wird. Fügen Sie ein neues abgerundetes Rechteck hinzu, das etwas kleiner als das Hintergrundrechteck ist. Geben Sie diesmal keinen Strich und füllen Sie ihn mit einem weißen Farbverlauf von 20% Alpha bis 0% Alpha.

TKTKTK

Schritt 14: Erstellen Sie die Score-Klasse

Erstellen Sie eine neue Actionscript-Datei mit dem Namen "Score.as". Speichern Sie es im selben Verzeichnis wie Ihre Flash-Hauptdatei. Da der Name dieser Klasse und der Name der Exportklasse unseres Score-Movieclips identisch sind, werden sie von Flash automatisch verknüpft.

Fügen Sie diesen Code zur Datei Score.as hinzu:

Dies ist vorerst nur eine leere Hülle einer Klasse. Wir müssen die MovieClip-Klasse erweitern, da diese Klasse mit einem Movieclip in der Bibliothek verknüpft ist. Daher müssen wir auch die MovieClip-Klasse importieren. Wir werden das ENTER_FRAME-Ereignis verwenden, also importieren wir auch die Event-Klasse.


Schritt 15: Variablen und Konstanten hinzufügen

Fügen Sie diese beiden Zeilen der Score-Klasse direkt über der Konstruktorfunktion hinzu.

Dies sind zwei Konstanten - ähnliche Einsellungen für die Klasse.

  • Die erste, SPEED, steuert, wie schnell die Punktzahl zählt. Ich habe es so eingestellt, dass es eins nach dem anderen zählt, aber wenn Ihr Spiel höhere Punktzahlen verwendet, ist dies möglicherweise zu langsam. Sie können dies auf 5, 10 oder 50 ändern, um diese Schritte zu zählen.
  • Die zweite Konstante, NUM_DIGITS, definiert, wie viele Ziffern wir in unserem Score-Movieclip haben. Wenn Sie mehr (oder weniger) als 7 Ziffern hinzugefügt haben, müssen Sie dies ändern.

Fügen wir nun einige Variablen hinzu. Setzen Sie diese direkt unter die Konstanten:

Diese Variablen enthalten die zwei verschiedenen Versionen unserer Punktzahl. "_totalScore" ist die tatsächliche Punktzahl. "_displayScore" ist die aktuelle Nummer
wird auf dem LED-Display angezeigt. Wenn ich der Punktzahl 50 hinzufüge, ist der _totalScore sofort 50, aber der _displayScore ist 1, dann 2, dann 3, bis er 50 erreicht.

Wenn Sie jemals die tatsächliche Punktzahl kennen müssen (wie Sie sie an Ihre Highscore-Boards senden möchten), verwenden Sie _totalScore, da _displayScore möglicherweise nicht genau ist.

Ich verwende Unterstriche am Anfang der Variablennamen, um anzuzeigen, dass es sich um private Variablen handelt.


Schritt 16: Fügen Sie die totalScore Accessor-Methode hinzu

Wenn _totalScore eine private Variable ist, wie werden wir dann von außerhalb der Score-Klasse darauf zugreifen? Wir werden eine "accessor" oder "getter"-Methode verwenden.

Fügen Sie diese Methode unterhalb der Konstruktorfunktion hinzu:

Diese Methode gibt einfach den Wert der Variablen _totalScore zurück. Es gibt uns die Möglichkeit, auf diesen Wert zuzugreifen, ohne ihn als öffentliche Variable verfügbar machen zu müssen.


Schritt 17: Fügen Sie die add-Methode hinzu

Wir brauchen eine Möglichkeit, der Punktzahl Punkte hinzuzufügen. Fügen Sie diese Methode hinzu:

Diese Methode akzeptiert einen ganzzahligen "amount", den sie der Variablen _totalScore hinzufügt. Die zweite Zeile startet ein ENTER_FRAME-Ereignis, das für jeden Frame eine Methode namens updateScoreDisplay aufruft. Wir werden das als nächstes hinzufügen.


Schritt 18: Fügen Sie die updateScoreDisplay-Methode hinzu

Fügen Sie nun die updateScoreDisplay-Methode hinzu. Hier werden alle coolen Zählfunktionen ausgeführt. Es muss ein Ereignis akzeptieren, da es von einem ENTER_FRAME-Ereignis aufgerufen wird.

Fügen wir nun einige Funktionen hinzu. Das erste, was diese Methode bewirkt, ist, die Variable _displayScore um den Betrag zu erhöhen, den wir in unserer SPEED-Konstante festgelegt haben:

Hier gibt es jedoch ein potenzielles Problem. Was ist, wenn unsere Geschwindigkeit auf 10 eingestellt ist und wir versuchen, 5 zur Punktzahl hinzuzufügen? Der displayScore ist höher als der totalScore. Fügen wir ein paar Zeilen hinzu, um das zu beheben:

Dies prüft, ob der displayScore höher als der totalScore ist, und setzt in diesem Fall den displayScore so, dass er dem totalScore entspricht.

Als nächstes müssen wir die führenden Nullen zur Partitur hinzufügen. Dazu konvertieren wir den displayScore in einen String und fügen Nullen hinzu, bis die Länge der Anzahl der durch die NUM_DIGITS-Konstante definierten Stellen entspricht:

Um nun die Partitur tatsächlich anzuzeigen, werden wir jeden unserer Ziffernclips durchlaufen (denken Sie daran, dass wir dann "digit1", "digit2" usw. genannt haben) und die entsprechende Nummer aus der Score-Zeichenfolge verwenden, um die Frame-Nummer von festzulegen Clip:

Die charAt-Methode ruft das Zeichen an der angegebenen Position aus einem String ab. Auf diese Weise können wir Zeichen für Zeichen durch die Score-Zeichenfolge gehen.

Mit den Klammern in der nächsten Zeile können wir den Clipnamen dynamisch erstellen. Der Code, this["digit"+(i+1)], greift auf den Clip mit dem Namen "digit1" oder "digit2" usw. zu, abhängig vom Wert von i.

Wir verwenden "num+1" als Bildnummer, da die Bildnummern gegenüber den darin enthaltenen Ziffern um 1 versetzt sind (Bild 1 zeigt 0, Bild 2 zeigt 1 usw.)

Das letzte, was wir bei dieser Methode tun müssen, ist zu überprüfen, ob der displayScore und der totalScore gleich sind. In diesem Fall können wir den Listener entfernen und den Aufruf dieser Methode vorerst beenden.

Wenn Sie sich in diesem Schritt irgendwo verlaufen haben, können Sie die Quelldateien überprüfen, um die abgeschlossene Klasse zu sehen.


Schritt 19: Die verwendete Score-Klasse

Um diese Klasse zu verwenden, ziehen Sie den Score-Movieclip aus der Bibliothek auf die Bühne und geben Sie ihm den Instanznamen "myScore". Sie können Ihrer Punktzahl Punkte hinzufügen, indem Sie diese Zeile in Ihrer Dokumentklasse verwenden:

Ein Beispiel dafür finden Sie in den Quelldateien. Ich füge der Punktzahl hinzu, wenn auf die Stoßstangenschaltflächen geklickt wird, aber Sie rufen eher add() auf, wenn Ereignisse in Ihrem Spiel auftreten.

Wenn Sie die Punktzahl des Spielers kennen müssen, können Sie den totalScore erhalten, indem Sie Folgendes verwenden:

Dies ruft die Accessor-Methode auf und gibt de Wert von _totalScore zurück.


Abschluss

Sie haben jetzt eine wiederverwendbare Zähl-Score-Klasse, die Sie in jedem Ihrer Spiele verwenden können.

Ich finde den LED-Look cool, aber du solltest das Design auf jeden Fall ändern, um es an das Aussehen deines Spiels anzupassen. Hier sind einige Ideen für verschiedene Designs, um Ihnen den Einstieg zu erleichtern:

TKTKTK

Vielen Dank, dass Sie dieses Tutorial gelesen haben. Lass mich wissen was du denkst!

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.