Schneller Tipp Erstellen Sie ein Simple Points-System mit AS3

In diesem Schnelltipp erfahren Sie, wie Sie ein einfaches Punktesystem erstellen, das Sie in Ihre eigenen Spiele integrieren können. Dieses Tutorial ist für Anfänger gedacht und in diesem Abschnitt erfahren Sie, wie Sie eine Reihe von Schaltflächen erstellen, auf die der Spieler klicken kann, um Punkte zu seiner Punktzahl hinzuzufügen oder von dieser zu entfernen. Einfach!

Obwohl dieses Tutorial für Anfänger der Flash-Programmierung gedacht ist, müssen Sie sich mit den Zeichenwerkzeugen in Flash Professional ein wenig auskennen. Wenn Sie lernen möchten, wie Sie die Zeichenwerkzeuge verwenden, lesen Sie diesen Artikel.


Endergebnisvorschau

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


Schritt 1: Einrichten der Flash-Datei

Öffnen Sie Flash und erstellen Sie ein neues Flash-Dokument. Legen Sie die Dokumentengröße auf 550x400px, die FPS (Frames per Second) auf 24 fest, und legen Sie die Dokumentenklasse auf fest Main.


Schritt 2: Erstellen der Grafik


Dies sind die Grafiken, die Sie erstellen müssen.

Verwenden Sie zum Erstellen der Grafiken das Oval-Tool, um vier Kreise mit einer # 000000 (Schwarz) -Umrisslinie und einer Konturgröße von 12,50 zu erstellen.

Jeder Kreis sollte eine andere Füllfarbe haben. Die Füllfarben sind wie folgt:

  • 10 Münze: # 993300
  • 50 Münze: # 999999
  • 100 Münze: # FFCC00
  • -30 Münze: # 990000

Verwenden Sie nach dem Erstellen der Münzen statische Textfelder, um die entsprechenden Werte wie in der Abbildung oben zu schreiben. Die Schriftart, die ich in diesem Lernprogramm verwenden werde, ist Futura LT Heavy mit einer Größe von 50. Sie können jedoch auch Ihre eigene Schriftart und Schriftgröße verwenden. Nach Abschluss des Unterrichts sollten Sie eine 10-Münze, eine 50-Münze, eine 100-Münze und eine -30-Münze haben.

Wir werden jetzt jede Münze in einen MovieClip konvertieren. Wählen Sie die 10-Münze aus und drücken Sie F8. Sie sollten einen Dialog wie diesen sehen:


Das Bild hat alles ausgefüllt. Stellen Sie sicher, dass Sie die gleichen Dinge in Ihrem Dialog aufschreiben.

Wiederholen Sie diesen Schritt für die 50-Münze, 100-Münze und die -30-Münze und geben Sie für jede Münze Folgendes in die Felder Name und Klasse ein:

  • 50 Münzen: Fünfzig Münzen
  • 100 Münzen: Hundert Münzen
  • -30 Münze: BadCoin

Wenn Sie aus allen Münzen MovieClips erstellt haben, wählen Sie sie alle aus und löschen Sie sie von der Bühne. Wir werden sie später mit Code wieder hinzufügen.

Um diesen Schritt abzuschließen, erstellen Sie ein statisches Textfeld mit dem Text "SCORE:" und positionieren Sie es mit einem X-Wert von 135 und einem Y-Wert von 327.


Schritt 3: Einrichten des Pakets und der Hauptklasse

In diesem Schritt werden wir unser Paket und die Hauptklasse einrichten.

Erstellen Sie eine neue ActionScript-Klasse und unter Klassenname Main. Nachdem Sie die Klasse erstellt haben, speichern Sie sie im selben Ordner wie Ihre Flash-Datei und stellen Sie sicher, dass sie als gespeichert wird Main.as.


Stellen Sie sicher, dass Ihr Dialog so aussieht.

Geben Sie den folgenden Code in Ihre Main.as-Datei ein und speichern Sie ihn.

 Paket // importiert die erforderlichen Klassen import flash.display.MovieClip import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldType; import flash.events.Event; public class Main erweitert MovieClip var tenCoin: TenCoin = new TenCoin (); // Erstellt eine neue Instanz der Zehn-Münze var fiftyCoin: FiftyCoin = new FiftyCoin (); // Erstellt eine neue Instanz der Fünfzig Münze var hundredCoin: HundredCoin = new HundredCoin (); // Erstellt eine neue Instanz der Hundert-Münze var badCoin: BadCoin = new BadCoin (); // Erzeugt eine neue Instanz der -30-Münze var score: Number = 0; // Setzt den Score auf Null var scoreText: TextField = new TextField (); // Erzeugt ein Textfeld zum Anzeigen der Partitur var scoreTextFormat: TextFormat = new TextFormat ("Futura LT Heavy", 50, 0x000000); // Erzeugt ein neues Format für das Textfeld "Score". Ersetzen Sie "Futura LT Heavy" durch die Schriftart, die Sie verwenden. Public function Main () displayObjects (); // Die Funktion, mit der die gesamte Grafik auf der Bühne angezeigt wird. SetUpEventListeners (); // Die Funktion, die wir verwenden werden, um unsere Ereignislistener hinzuzufügen.

Zuerst importieren wir die benötigten Klassen und richten dann unsere Dokumentenklasse ein. Wir erweitern dann die Hauptklasse von MovieClip. Wir könnten Sprite verwenden, aber das spielt keine Rolle. Danach deklarieren wir die von uns verwendeten Variablen und fügen unseren Code hinzu Main() Funktion (unsere "Konstruktorfunktion").

Das Main() Diese Funktion zeigt alle Münzen an, die wir auf der Bühne erstellt haben, und fügt die Ereignis-Listener hinzu, die wir verwenden müssen.

Hinweis: Sie müssen die Schriftart in Ihre FLA einbetten, damit sie in dynamischen Textfeldern angezeigt wird, wenn die Schriftart nicht bei Ihrem Benutzer installiert ist. Ich habe das hier nicht getan, um die Dinge einfach zu halten.


Schritt 4: Codierung der displayObjects () Funktion

Das displayObjects () Funktion wird vom aufgerufen Main() Funktion. Der Zweck dieser Funktion besteht darin, die Münzen und das Notentextfeld der Bühne hinzuzufügen und sie an ihrem richtigen Ort zu positionieren.

 function displayObjects () // Legt die Position der Zehnmünze fest tenCoin.x = 72; tenCoin.y = 200; // Legt die Position der fünfzig Münze fest fünfzig Münze.x = 207; fiftyCoin.y = 200; // Legt die Position der Hundert-Münze fest hundertCoin.x = 342; hundertCoin.y = 200; // Legt die Position der -30-Münze fest badCoin.x = 477; badCoin.y = 200; // Positioniert das Textfeld "Score" und setzt seinen Typ auf "Dynamisch", sodass er durch Code geändert werden kann scoreText.type = TextFieldType.DYNAMIC; scoreText.x = 305; scoreText.y = 327; scoreText.width = 300; // Legt das Format der Score-Textbox fest. ScoreText.defaultTextFormat = scoreTextFormat; // Fügt der Bühne alles hinzu addChild (tenCoin); addChild (fünfzig Münzen); addChild (hundredCoin); addChild (badCoin); addChild (scoreText); 

Schritt 4: Codierung der setUpEventListeners () Funktion und die Event-Handler

Nachdem wir nun Objekte zur Bühne hinzugefügt haben, müssen Sie Event-Handler-Funktionen erstellen, die beim Klicken auf die Münzen ausgelöst werden. Wir brauchen auch eine updateScore () Funktion, die verwendet wird, damit die Partitur aktualisiert wird und nicht gleich bleibt.

 function setUpEventListeners () // Ändert alle MovieClips in Buttons tenCoin.buttonMode = true; fiftyCoin.buttonMode = true; hundredCoin.buttonMode = true; badCoin.buttonMode = true; // Fügt die Ereignis-Listener hinzu, um Punkte zur Punktzahl hinzuzufügen tenCoin.addEventListener (MouseEvent.CLICK, addTenPoints); fiftyCoin.addEventListener (MouseEvent.CLICK, addFiftyPoints); hundredCoin.addEventListener (MouseEvent.CLICK, addHundredPoints); badCoin.addEventListener (MouseEvent.CLICK, removeThirtyPoints); // Fügt die Aktualisierungsfunktion hinzu, um die Bewertung zu aktualisieren stage.addEventListener (Event.ENTER_FRAME, updateScore); 

Jetzt müssen wir die Funktionen kodieren, die die Partitur ändern und aktualisieren.

 Funktion addTenPoints (evt: MouseEvent) score + = 10; // Fügt dem Score 10 Punkte hinzu Funktion addFiftyPoints (evt: MouseEvent) score + = 50; // Fügt der Bewertung 50 Punkte hinzu Funktion addHundredPoints (evt: MouseEvent) score + = 100; // Fügt der Partitur 100 Punkte hinzu. RemoveThirtyPoints (evt: MouseEvent) score - = 30; // Subtrahiert 30 Punkte von der Punktzahl // Diese if-Anweisung lässt die Punktzahl nicht unter null gehen, wenn (Punktzahl < 10)  score -= score;   function updateScore(evt:Event) scoreText.text = String(score); //This converts the score variable from a number to a string, because our score textbox can only display strings   //Closes the class  //Closes the package

Ihr Code ist jetzt zum Testen bereit. Drücken Sie STRG + Eingabetaste (CMD + Eingabe auf einem Mac) und beobachten Sie, wie Ihr Punktesystem zum Leben erweckt wird!


Rezension

Jetzt denken Sie vielleicht: "Ich habe meine Zeit verschwendet, dieses Tutorial hat mich gelehrt, einige Schaltflächen zu erstellen, die Ihnen Punkte geben, wenn Sie darauf klicken" - aber Sie haben mehr gelernt.

Betrachten Sie dies als Grundlage für ein fortgeschritteneres Punktesystem. Sie haben gelernt, wie Sie + = und - = verwenden, um eine Zahl hinzuzufügen oder von ihr abzuziehen, Sie haben gelernt, wie Ereignis-Listener verwendet werden. Sie haben gelernt, wie Sie eine Funktion zum Aktualisieren von Objekten erstellen, während die SWF ausgeführt wird. Außerdem haben Sie erfahren, wie Sie eine Zahl ändern zu einem String und zeigen Sie ihn in einem dynamischen Textfeld an, das Sie vollständig durch Code erstellt haben!


Fazit

Dieses Punktesystem kann leicht zu eigenen Spielen erweitert werden. Versuchen Sie für diejenigen unter Ihnen, die mehr Erfahrung mit Flash haben, ein Spiel zu erstellen, das eine hitTestObject-Funktion verwendet und Punkte hinzufügt, wenn Sie ein Objekt treffen.

Ich hoffe, Sie haben heute etwas Neues gelernt. Danke fürs Lesen!