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

Erstellung eines Minigolfspieles mit ActionScript 3.0

by
Read Time:20 minsLanguages:

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

In diesem Tutorial zeige ich Ihnen, wie Sie mit ActionScript 3.0 ein schönes Minigolfspiel erstellen. Wir werden mit Event-Handlern, Funktionen und auch dem Timer-Objekt arbeiten, was eine wirklich coole Funktion in AS3 ist.

Einführung

Sie werden feststellen, dass mit diesem Projekt viel gezeichnet ist. Wenn Sie das alles lieber nicht selbst tun möchten, laden Sie einfach die Datei programmeGolf.fla herunter und fahren Sie mit Schritt 19 fort, in dem der Programmierteil beginnt.

Schritt 1: Neue Datei

Beginnen wir mit dem Öffnen einer neuen ActionScript 3.0-Flash-Datei.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 2: Dokumenteinstellungen

Ändern Sie die Abmessungen im Eigenschaftenfenster (600x400 Pixel) und stellen Sie die Bildrate auf 30 fps ein.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 3: Erstellen des Hintergrunds

Jetzt bereiten wir einige Grafiken vor. Erstellen Sie ein Rechteck (600 x 400 Pixel) und platzieren Sie es auf den Koordinaten 0, 0. Füllen Sie das Rechteck mit einem Farbverlauf (#0066FF bis #FFFFFF).

Mini golf flash gameMini golf flash gameMini golf flash game

Wählen Sie das Objekt aus und drücken Sie F8. Wählen Sie Movieclip und nennen Sie es "background".

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 4: Hinzufügen von Wolken und Bäumen

Gehen Sie in das Hintergrundobjekt (doppelklicken Sie darauf) und fügen Sie einige Grafiken hinzu. Ich fügte Wolken und Bäume hinzu, indem ich einfach das Pinselwerkzeug auswählte und einige einfache Formen zeichnete. Tun Sie dies auf einer neuen Ebene, um die Dinge organisiert zu halten. Für die Wolken habe ich eine hellblaue Farbe (#8FBBE8) verwendet, für Bäume eine hellviolette Farbe (#8DA5C7). Schließlich habe ich die Wolken und Bäume auf meiner Bühne abgeschnitten.

Wolken

Mini golf flash gameMini golf flash gameMini golf flash game

Bäume

Mini golf flash gameMini golf flash gameMini golf flash game

Endergebnis

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 5: Boden

Erstellen Sie in der Hauptszene ein Rechteck (600x50 Pixel) und platzieren Sie es auf den Koordinaten 0, 350. Füllen Sie das Rechteck mit einem Farbverlauf (#543201 bis #985B01).

Mini golf flash gameMini golf flash gameMini golf flash game

Wählen Sie das Objekt aus und drücken Sie F8. Wählen Sie Movieclip und nennen Sie es "grou"nd. Ändern Sie die Registrierung nach links und exportieren Sie das Objekt für ActionScript. OK klicken.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 6: Gras

Gehen Sie in das Bodenobjekt (doppelklicken Sie darauf) und erstellen Sie eine neue Ebene. Wählen Sie das Rechteck-Grundwerkzeug (R), zeichnen Sie eine Form (10 x 20 Pixel) und platzieren Sie sie an den Koordinaten 0, -35. Stellen Sie den Eckenradius auf 4px ein.

Mini golf flash gameMini golf flash gameMini golf flash game

Kopieren Sie diese Rechtecke über die gesamte Szenenlänge. Wählen Sie nun alle aus, bearbeiten Sie sie (Strg + B) und füllen Sie sie mit einem Farbverlauf (#009900 bis #35FD35).

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 7: Loch

Jetzt erstellen wir eine Form, die unseren Boden und unser Gras maskiert. Farbe spielt also keine Rolle. Erstellen Sie ein Rechteck (900 x 70 Pixel) und platzieren Sie es an den Koordinaten -300, -40.

Mini golf flash gameMini golf flash gameMini golf flash game

Erstellen Sie mit dem Oval und dem Rechteck-Werkzeug eine "hole" -Form (20 x 40 Pixel) und platzieren Sie sie an den Koordinaten 300, -40. Stellen Sie nun sicher, dass sich Ihre Lochform auf derselben Ebene befindet wie unser zuvor erstelltes blaues Rechteck. Wenn ja, wählen Sie es aus und löschen Sie es. Sie sollten die endgültige Form der Maske erhalten.

Mini golf flash gameMini golf flash gameMini golf flash game

Drücken Sie F8 und konvertieren Sie es in einen Movieclip. Ändern Sie den Registrierungspunkt nach links und nennen Sie ihn "grassMask". Geben Sie Ihrem Movieclip nach dem Erstellen einen Instanznamen "grassMask".

Mini golf flash gameMini golf flash gameMini golf flash game

Jetzt sollten wir die Maskierung einstellen. Doppelklicken Sie auf die Ebene, auf der sich Ihr Bodenobjekt befindet, und wählen Sie die Option "masked". Machen Sie dasselbe mit der Grasschicht. Wählen Sie in der Ebene, die Ihr "grassMask" -Objekt enthält, die Option "mask". Jetzt können Sie das "ground" -Objekt verlassen und zur Hauptbühne zurückkehren.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 8: Markieren

Wählen Sie das Pinselwerkzeug (B) und zeichnen Sie ein Einsatzobjekt (#C25C00). Wählen Sie nun das Rechteck-Werkzeug (R) und zeichnen Sie ein Flag-Objekt (#FFDCDC). Wählen Sie beide Objekte aus und drücken Sie F8. Wählen Sie Movieclip und nennen Sie es "flag". Ändern Sie den Registrierungspunkt und exportieren Sie ihn für ActionScript.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 9: Charakter

Jetzt beginnt der schlimmste Teil :) Zeichnen eines Charakters. Normalerweise zeichne ich etwas von Hand und zeichne es dann in Flash neu. Verwenden wir also mein handgezeichnetes gescanntes Bild. Laden Sie es hier herunter und importieren Sie es in die Bibliothek (Datei > Importieren > In Bibliothek importieren...). Erstellen Sie einen neuen Movieclip (Strg + F8) und nennen Sie ihn "bearMC". Ziehen Sie den Bären aus der Bibliothek auf die Bühne, sperren Sie die Ebene mit der Bitmap und erstellen Sie eine neue Ebene. Wir müssen Körperteile trennen, damit sich jedes Teil in einer anderen Schicht befindet.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 10: Körperteile

Beginnen wir mit einem Kopf. Wähle das Pinselwerkzeug (B). Wählen Sie die größte Kreisform und braune Farbe (#432801). Zeichnen Sie die Umrisse des Kopfes. Schließlich können Sie das Farbeimer-Werkzeug (K) auswählen und den Kopf mit Farben füllen. Gut, nicht wahr? :) Machen Sie dasselbe mit Armen, Körper, Beinen und Golfschläger. Vergessen Sie nicht, jedes Teil in separate Schichten zu legen.

Mini golf flash gameMini golf flash gameMini golf flash game
Mini golf flash gameMini golf flash gameMini golf flash game
Mini golf flash gameMini golf flash gameMini golf flash game
Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 11: Einstellen der Körperteile

Jetzt sollten wir einige Änderungen vornehmen. Löschen Sie zunächst die Ebene mit Ihrer Bären-Bitmap (wir sollten auch die Bären-Bitmap aus der Bibliothek löschen). Wählen Sie nun den gesamten Charakter in allen Ebenen aus. Da wir das Zeichen mithilfe von ActionScript dynamisch laden, benötigen wir die richtige Skalierung. Wähle das freie Transformationswerkzeug (Q) und verkleinere den Bären (ca. 80 Pixel breit).

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 12: Konvertieren von Körperteilen in Movieclips

Klicken Sie auf das erste Bild Ihrer Kopfebene. Der ganze Kopf sollte jetzt ausgewählt werden. Drücken Sie F8 und nennen Sie es "Kopf". Exportieren Sie es auch für ActionScript. Machen Sie genau das Gleiche mit Körper ("body"), Armen ("arms") und Stock ("stick").

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 13: Anpassen der Drehpunkte

Jedes Objekt in Flash dreht sich um einen Drehpunkt, daher müssen wir die Drehpunkte unseres Sticks und unserer Arme anpassen. Verstecken Sie Ihre Kopf- und Körperschicht und wählen Sie die Stock- und Armschicht aus. Sie sollten die Drehpunkte unserer Objekte sehen.

Mini golf flash gameMini golf flash gameMini golf flash game

Erstellen Sie eine Art Markierung auf einer separaten Ebene, auf der sich die Drehpunkte (zwischen den Schultern) befinden sollten, um eine ordnungsgemäße Drehung zu ermöglichen.

Mini golf flash gameMini golf flash gameMini golf flash game

Nehmen Sie nun eines der Objekte und ziehen Sie es auf die Markierung (Drehpunkt sollte auf der Markierung liegen). Machen Sie dasselbe mit dem zweiten Objekt.

Mini golf flash gameMini golf flash gameMini golf flash game

Blenden Sie nun alle Ebenen ein und löschen Sie die zuvor vorgenommene Markierung. Gehen Sie in das Waffenobjekt (doppelklicken Sie darauf), damit Sie die Arme in die richtige Position bringen können.

Mini golf flash gameMini golf flash gameMini golf flash game

Lassen Sie das Armobjekt und machen Sie dasselbe mit dem Stock.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 14: Positionieren des Bären

Gehen Sie zur Hauptszene und erstellen Sie eine neue Ebene, nennen Sie sie "bear". Nehmen Sie "bearMC" aus der Bibliothek und ziehen Sie es auf die Hauptbühne. Drücken Sie bei ausgewähltem "bearMC" Strg + B. Jetzt können Sie "bearMC" aus der Bibliothek löschen.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 15: Apfel

Drücken Sie Strg + F8 und erstellen Sie einen neuen Movieclip. Nennen Sie es "apple" und exportieren Sie es für ActionScript. Verwende das Pinselwerkzeug (B) und zeichne eine Apfelform. Sie können auch Blatt und Stiel hinzufügen, wenn Sie möchten. Wählen Sie nun das gesamte Objekt aus und verkleinern Sie es mit dem Free Transform Tool(Q), das maximal 20 Pixel breit ist.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 16: Apfel Animation

Wählen Sie das gesamte Objekt erneut aus und drücken Sie F8. Nennen Sie es "appleFall". Der Registrierungspunkt sollte in der Mitte liegen. Geben Sie ihm im Eigenschaftenfenster den Instanznamen "appleFall".

Mini golf flash gameMini golf flash gameMini golf flash game

Gehen Sie in das Objekt "appleFall" (doppelklicken Sie darauf). Erstellen Sie eine neue Ebene und nennen Sie sie "action". Gehen Sie zu Frame 7 und erstellen Sie einen neuen Keyframe (F6). Gehen Sie dann zum Aktionsfenster (F9) und geben Sie Folgendes ein:

Wählen Sie das erste Bild aus und machen Sie dasselbe.

Mini golf flash gameMini golf flash gameMini golf flash game

Fügen Sie nun Keyframes (F6) in das zweite, vierte, sechste und siebte Frame der Ebene "apple" ein. Wählen Sie das zweite bis sechste Bild aus und erstellen Sie ein Bewegungs-Tween (Rechtsklick > Bewegungs-Tween erstellen).

Mini golf flash gameMini golf flash gameMini golf flash game

Positionieren Sie nun die Äpfel in den Keyframes ungefähr an den im Bild unten gezeigten Positionen.

Mini golf flash gameMini golf flash gameMini golf flash game

Wenn alles in Ordnung ist, können Sie zur Hauptszene zurückkehren und ein "apple"-Objekt aus der Bibliothek auf die Bühne ziehen.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 17: Textfeld

Erstellen Sie eine neue Ebene und nennen Sie sie "messages". Wählen Sie ein Textwerkzeug (T) und erstellen Sie ein neues Textfeld in der Mitte der Bühne (ich habe eine blaue Arial-Schriftart gewählt). Setzen Sie den Feldtyp auf Dynamischer Text und weisen Sie einen Instanznamen "myMessage" zu. Sie können die Ebene jetzt sperren.

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 18: Score Counter

Erstellen Sie eine neue Ebene und nennen Sie sie "counter". Ziehen Sie erneut ein Apfelobjekt aus der Bibliothek auf die Bühne und positionieren Sie es bei 30, 30. Drücken Sie zweimal Strg + B (da zwei Filmclips zu brechen sind - apple und appleFall) und füllen Sie das Objekt mit einer weißen Farbe. Machen Sie fünf Instanzen und platzieren Sie sie in einer Zeile. Wählen Sie alle aus und drücken Sie F8. Nennen Sie es "counterBcg". Gehen Sie zum Eigenschaftenfenster und ändern Sie die Farbe bei 40% von "Keine" in "Alpha".

Mini golf flash gameMini golf flash gameMini golf flash game

Ziehen Sie einen Apfel aus der Bibliothek auf die Bühne, positionieren Sie ihn auf 30, 30 und drücken Sie erneut zweimal Strg + B. Drücken Sie F8 und nennen Sie den Movieclip "counter". Gehen Sie zu diesem Objekt (doppelklicken Sie darauf) und fügen Sie einen weiteren Keyframe hinzu. In diesem Keyframe füllen Sie den Apfel mit einer blauen Farbe (dieser Apfel wird in der Theke angezeigt, wenn Sie das Loch verpassen).

Mini golf flash gameMini golf flash gameMini golf flash game

Gehen Sie zum Aktionsbereich jedes Keyframes (F9) und geben Sie Folgendes ein:

Gehen Sie zur Hauptszene, erstellen Sie fünf Instanzen des Apfels und bilden Sie erneut eine Linie. Jeder Apfel hat einen Instanznamen ("a1", "a2", "a3" usw.).

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 19: Vorbereiten der Programmierung

So hier sind wir. Der Zeichnungsteil ist vorbei. Nehmen Sie ein Stück Papier und notieren Sie die Koordinaten von Kopf, Armen, Körper, Stock, Apfel, Boden und Flagge, damit wir sie dynamisch anbringen können.

Mini golf flash gameMini golf flash gameMini golf flash game

Jetzt können Sie sie aus der Szene löschen.

Mini golf flash gameMini golf flash gameMini golf flash game

Hier ist eine kurze Aufschlüsselung unserer Vorgehensweise bei der Programmierung:

  • Schritt 20 Objekte anbringen und positionieren Alle Objekte sind ordnungsgemäß angebracht und in der Szene positioniert.
  • Schritt 21 Zähler Zähler.
  • Schritt 22 Programmieren des Sticks Den Stick drehen lassen.
  • Schritt 23 Apfel programmieren Der Apfel bewegt sich, wenn der Stock darauf trifft.
  • Schritt 24 Treffer Wenn der Apfel nah genug ist, fällt er in das Loch.
  • Schritt 25 Programmieren eines Zählers Wenn es ein erfolgreicher Treffer war, fügt der Zähler einen hinzu.
  • Schritt 26 Erstellen des nächsten Versuchs Verwenden Sie das Timer-Objekt Sobald der Versuch beendet ist, können wir es nach zwei Sekunden erneut versuchen.
  • Schritt 27 Hinzufügen von Textnachrichten Wir fügen einige Nachrichten für den Spieler hinzu.
  • Schritt 28 Spiel vorbei Wenn das Spiel beendet ist, können wir wieder spielen.

Schritt 20: Objekte anbringen und positionieren

Die gesamte Programmierung wird im ersten Frame der Aktionsebene platziert. Erstellen wir also eine neue Ebene und nennen sie "actions". Zunächst fügen wir unserem Code drei Kommentarblöcke hinzu:

Wenn die Kommentare fertig sind, können wir folgenden Code hinzufügen, der unsere Objekte aus der Bibliothek an die Bühne anfügt.

(Zusätzliche Zeilen 2-8, 13-23)

Jetzt haben wir alle unsere Objekte in der Szene an den Koordinaten 0, 0. Objekte werden bei jedem Aufruf der Funktion resetScene an die Szene angehängt. Lassen Sie uns auf unser Blatt Papier zurückgreifen, in dem wir die Koordinaten notiert haben. Wir werden auch eine Zufallsfunktion verwenden, um die x-Position unseres Lochs und unserer Flagge zu generieren.

(Zusätzliche Zeilen 9, 22-39)

*grassMask: Variablenbeschreibung

  1. Unsere Bühne ist 600px lang
  2. Die Math.random-Funktion generiert Zahlen von 0 bis 1
  3. Wenn wir diesen Wert mit 260 multiplizieren, erhalten wir eine Zahl zwischen 0 und 260.
  4. Wenn wir dann 320 zu diesem Ergebnis hinzufügen, erhalten wir den Bereich, nach dem wir suchen:320 bis 580. Dies ist der Bereich entlang der x-Achse, in dem wir unser Loch und unsere Flagge platzieren können.

Schritt 21: Zähler

Alle Objekte sollten richtig positioniert sein und unsere Maske und Flagge sollten sich an einer zufälligen x-Position befinden. Fügen Sie die folgenden Zeilen unter der Funktion resetScene hinzu. Es wird die Äpfel verstecken, um unsere Punktzahl zu zählen.

(Zusätzliche Zeilen 6-15)

Schritt 22: Programmieren des Sticks

Jetzt fügen wir Listener für unsere Tastatur hinzu. Wenn wir eine Taste drücken, wird die Funktion onDown aufgerufen. Wenn wir dann eine Taste loslassen, wird die Funktion onUp aufgerufen. Wir müssen auch einen Enter-Frame-Listener hinzufügen.

Das Prinzip ist sehr einfach; Wenn Sie eine beliebige Taste drücken, enthält die Variablenprüfung den Wert 1. Wenn Sie die Taste loslassen, enthält der Variablenprüfer den Wert 0. Die Hit-Funktion, die in jedem Frame unseres Programms angezeigt wird (in unserem Fall 30 Mal pro Sekunde), wirkt sich auf diese Werte aus (positive oder negative Drehung). Die Variablen speedUp und speedDown sind nur Zahlen, die uns sagen, wie groß die Drehung sein wird. Die Variablen minPower und maxPower geben den minimalen und maximalen Grad der Stickdrehung an. Geben Sie folgende Zeilen ein:

(Zusätzliche Zeilen 12, 13, 18-37)

Wir verwenden einige neue Variablen im Code, daher müssen wir sie initialisieren. Fügen Sie die folgenden Zeilen oben hinzu. Variablenprüfer und minPower werden in der Funktion resetScene deklariert, da sie während des Programms geändert werden und wir sie später zurücksetzen müssen.

(Zusätzliche Zeilen 7-17)

Mini golf flash gameMini golf flash gameMini golf flash game

Schritt 23: Programmieren eines Apfels

Wir werden die Methode hitTestObject verwenden, um Informationen über die Kollision zwischen unserem Stick und Apfel abzurufen. Bei einer Kollision wird die Schussfunktion aufgerufen.

(Zusätzliche Zeilen 7,8,16,30-32,36-40)

Schritt 24: Hit

Das Schießen sollte funktionieren. Lassen Sie uns jetzt einen Apfel codieren, der in das Loch fällt. Wir werden in unserer Schussfunktion testen, ob der Abstand zum Loch klein genug und die Stärke niedrig genug ist. Sollte dies der Fall sein, können wir unseren Clip dort abspielen, wo ein Apfel in das Loch fällt. Meine Regeln(Zahlenwerte) sind sehr streng. Sie können Ihre eigenen leichteren Regeln definieren, wenn Sie dies bevorzugen.

(Zusätzliche Zeilen 17,27-34,37,38)

Hier ist eine Aufschlüsselung, wie die Aufnahmefunktion wirklich funktioniert. Es ist sehr einfach. Wir werden später einige Zeilen hinzufügen, aber dies ist der Kern.

Schussfunktionsschema

  • Festigkeitsvariable einstellen
  • Distanzvariable einstellen

Wenn Distanz und Stärke gering sind und das Ziel noch nicht getroffen wurde

  • Clip abspielen, während der Apfel ins Loch fällt
  • Stellen Sie die Apfelrotation auf Null
  • Sagen Sie unserer Variablen, dass das Ziel getroffen wurde

Wenn Distanz und Stärke nicht unseren Werten entsprechen und wenn die Stärke immer noch groß genug ist - niedriger als 5 und der Apfel bleibt stehen

  • Apfel bewegt sich weiter entlang der x-Achse
  • Apfel dreht sich weiter

Schritt 25: Programmieren des Zählers

Jetzt machen wir einen Punktezähler. Zuerst müssen wir eine neue Variable namens tryShot initialisieren. Es zählt die verbleibenden Versuche, indem jedes Mal, wenn die Funktion resetScene aufgerufen wird, einer erhöht wird. Wenn wir das Loch treffen, erscheint ein Apfel. Wenn wir das Loch verpassen, erscheint auch ein Apfel, der jedoch zum zweiten Frame des Clips springt (mit einem blauen Apfel).

(Zusätzliche Zeilen 6,7,15,16,31,37-40)

Schritt 26: Erstellen des nächsten Versuchs Verwenden Sie ein Timer-Objekt

Fügen Sie dem Code die folgenden Zeilen hinzu. Sie stellen sicher, dass die Countdown-Funktion (die die Szene zurücksetzt und den Hörer für die Aufnahmefunktion entfernt) zwei Sekunden nach dem Ende einer bestimmten Aufnahme aufgerufen wird (es spielt keine Rolle, ob das Loch getroffen wurde oder nicht). Wir müssen unserer Trefferfunktion auch eine Bedingung hinzufügen, die die Anzahl der Versuche auf sechs beschränkt.

(Zusätzliche Zeilen 7,13,22,30,44,55,64,69-72)

Schritt 27: Hinzufügen von Textnachrichten

Jetzt sollten wir einige Textnachrichten erstellen, um den Spieler wissen zu lassen, was los ist.

(Zusätzliche Zeilen 8,29-31,43,53)

Schritt 28: Spiel vorbei

Da wir ein so großartiges Spiel entwickelt haben, besteht eine gute Chance, dass unser Spieler wieder spielen möchte :-) Also machen wir das möglich. Wenn der Spieler sechs Versuche erreicht (der Codeblock, in den wir "Game Over" schreiben), sollten wir unserer Bühne einen endgültigen Hörer hinzufügen. Es ist ein Maus-Listener und ruft eine Funktion auf, wenn Sie irgendwo klicken.

(Zusätzliche Zeilen 12-17,37,38,42,47)

Endgültiger Code

Abschluss

Ziemlich einfach, nicht wahr? Jetzt können Sie mit allen möglichen Dingen herumalbern. Sie können andere Level und Terrains hinzufügen, den Charakter ändern, Cheats in das Spiel einfügen, ein Spielmenü oder ein Intro hinzufügen und so weiter. Es gibt unbegrenzte Möglichkeiten, also hoffe ich, dass Sie es nützlich fanden und danke fürs Lesen!

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.