Advertisement
  1. Code
  2. Games

Erstellen von "Flux": Ein einfaches Flash-Spiel mit einer Schwerkraftmechanik

by
Read Time:19 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

In diesem Tutorial erkläre ich die wichtigsten Schritte und Arbeitsabläufe zum Erstellen eines einfachen Weltraumüberlebensspiels, basierend auf der in einem vorherigen Tutorial erläuterten Schwerkraftmechanik. Dieses Spiel wurde in AS3 mit FlashDevelop geschrieben.


Das Spiel spielen

Verwenden Sie die Pfeiltasten nach links und rechts, um Ihr Schiff zu manövrieren, die Pfeiltasten nach oben und unten, um das erzeugte Magnetfeld zu vergrößern oder zu verkleinern, und die Leertaste, um die Polarität umzukehren. Sammelm Sie die weißen Kristalle, um Ihre Kraftstoffversorgung zu erhöhen - aber vermeiden Sie die roten, weil sie sie verbrauchen. Schlagen Sie keinen Stein, sonst ist das Spiel vorbei!

In diesem Tutorial erstellen wir nicht das oben gezeigte vollständige Spiel. Wir fangen einfach damit an, indem wir eine sehr einfache Version mit primitiven Grafiken und nur einem Objekttyp erstellen. Am Ende sollten Sie jedoch genug gelernt haben, um die anderen Funktionen selbst hinzufügen zu können!

Das Spiel selbst ist in seinem aktuellen Zustand sehr einfach - werfen Sie einen Blick auf diese Kritik, um Tipps zu erhalten, wie Sie es von einer einfachen Demo zu einem vollständigen Spiel machen können!


Lassen Sie uns anfangen!

Richten Sie ein neues AS3-Projekt in FlashDevelop ein und stellen Sie die Abmessungen auf 550 x 600 Pixel ein.


Schritt 1: Identifizieren der Spielobjekte

Es gibt sechs Objekte in Partikeln, die Sie anhand des obigen Spiels identifizieren können:

  • Energieversorgung - dargestellt durch ein weißes ovales Objekt
  • Asteroid - dargestellt durch ein felsartiges Objekt
  • Energieverbraucher - dargestellt durch einen roten Stern mit grünem Licht.
  • Sterne - der Hintergrund
  • Bereichsanzeige - dargestellt durch einen weißen Kreis
  • Schiff - Spielerobjekt

Natürlich können Sie jedes andere Objekt hinzufügen, um das Spiel interaktiver zu gestalten, oder eine neue Funktion hinzufügen. Für dieses Tutorial machen wir einfach


Schritt 2: Die Energy-Klasse

Von den Objekten, die wir identifiziert haben, funktionieren vier tatsächlich genauso: indem sie von oben nach unten fallen.

Sie sind:

  • Sterne
  • Energieversorgung
  • Energieverbraucher
  • Asteroid

In diesem Tutorial werden wir nur die "Energieversorgungs" -Objekte aus den vier oben genannten Objekten erstellen. Beginnen wir also damit, diese Objekte zu erstellen und sie herunterfallen zu lassen, mit einer zufälligen Laichposition und Geschwindigkeit.

Erstellen Sie zunächst eine Energy-Klasse:


Schritt 3: Die GameScreen-Klasse

Diese Klasse wird schließlich die meisten Aspekte unseres Spiels steuern, einschließlich der Spielerbewegung und der Spielschleife.

Erstellen Sie die Klasse:

Das ist alles was wir jetzt brauchen.


Schritt 4: Aktualisieren Sie die Main-Klasse

Wir werden jetzt eine Instanz von GameScreen in Main erstellen:

Warum die Mühe? Auf diese Weise ist es später einfacher, zusätzliche Bildschirme hinzuzufügen, wenn wir möchten (wie ein Preloader, ein Titelbildschirm, ein Spiel über dem Bildschirm ...).


Schritt 5: Einführung einer Manager-Klasse

Um zu vermeiden, dass die GameScreen-Klasse zu unübersichtlich wird, verwenden wir separate Klassen, um jedes Objekt zu verwalten.

Jede Manager-Klasse enthält alle Funktionen, die sich auf ein bestimmtes Objekt beziehen und mit diesem interagieren. Hier ist die EnergyManager-Klasse:

Beachten Sie, dass ein Verweis auf den GameScreen an den Konstruktor übergeben werden muss, und speichern diesen Verweis in einer privaten Variablen. Wir haben auch einen Vektor eingerichtet, um Verweise auf alle Energieobjekte zu speichern.

Bisher enthält die Klasse keine anderen Funktionen; wir werden sie später hinzufügen.


Schritt 6: Energie erzeugen

Fügen Sie die folgende Funktion zum Erzeugen von Energie hinzu. Dies ist nur eine Funktion. Wir werden die Funktion später von GameScreen-Klasse aus aufrufen:

Wir erstellen eine neue Energieversorgung mit einer Geschwindigkeit von 4, fügen sie der Anzeigeliste (über den GameScreen) hinzu, fügen sie dem Vektor aller soeben erstellten Energieobjekte hinzu und setzen ihre Position innerhalb bestimmter Grenzen auf einen zufälligen Punkt.

Der Calculation.generateRandomValue(#, #) ist eine statische Funktion, die wir noch nicht geschrieben haben. Lassen Sie uns das jetzt tun. Erstellen Sie eine neue Klasse namens Calculation und fügen Sie diese Funktion hinzu:

Diese Funktion generiert eine Zufallszahl zwischen den beiden übergebenen Werten. Weitere Informationen zur Funktionsweise finden Sie in diesem Quick-Tipp. Da dies eine statische Funktion ist, müssen wir keine Instanz von Calculation erstellen, um sie aufzurufen.

Was ist nun die Funktion addEnergyToScreen()? Wir haben das noch nicht definiert, also lassen Sie es uns jetzt tun. Fügen Sie dies zu GameScreen hinzu:

Es wird lediglich die übergebene Energieinstanz zur Anzeigeliste hinzugefügt. Lassen Sie uns auch eine entsprechende Funktion ausführen, um ein bestimmtes Energieobjekt vom Bildschirm zu entfernen:


Schritt 7: Spawning Energy

Stellen wir einen Timer ein, der das Intervall für jedes Laichen definiert. Dieser Code geht in die Konstruktorfunktion von GameScreen:

Der Timer ruft also alle drei Sekunden spawnEnergy() auf. Schreiben wir diese Funktion jetzt:


Schritt 8: Spieler erstellen

Verwenden wir einen anderen, größeren Kreis, um den Spieler darzustellen. Sie können auch ein Bild importieren, um es stattdessen zu verwenden:

Fügen Sie diesen Code zu GameScreen hinzu, um den Player zum Bildschirm hinzuzufügen:

Bisher sollten einige Energievorräte in wenigen Sekunden abfallen und der Player in der Mitte des Bildschirms erscheinen:

playerandenergy.playerandenergy.playerandenergy.

Schritt 9: Verschieben des Players

Grundsätzlich gibt es zwei Möglichkeiten, Bewegung anzuwenden:

  1. Verwenden von Booleschen (true/false) Werten - true = bewegt sich, false = bewegt sich nicht. Wenn die rechte Pfeiltaste gedrückt wird, ändert sich der Wert für "Nach rechts bewegen" in true. Bei jeder Frame-Aktualisierung ist "nach rechts bewegen" true, wir erhöhen den x-Wert des Objekts.
  2. Using direct update each frame - wenn die rechte Pfeiltaste gedrückt wird, wird ein Objekt angewiesen, sich sofort nach rechts zu bewegen, indem sein x-Wert erhöht wird.

Die zweite Methode führt nicht zu einer reibungslosen Bewegung, wenn die Taste kontinuierlich gedrückt wird, sondern die erste Methode - also werden wir die erste Methode verwenden.

Dazu gibt es drei einfache Schritte:

  1. Erstellen Sie zwei boolesche Variablen, eine zum Verschieben nach rechts und eine zum Verschieben nach links.
  2. Schalten Sie den Booleschen Wert um, wenn Tasten gedrückt oder losgelassen werden:
  3. Bewegen Sie den Spieler basierend auf diesen Booleschen Werten tatsächlich in jedem Frame:

    Vergessen Sie nicht, zuerst eine Funktion zu erstellen, die vom Enter Frame-Ereignis "Aktualisierung" abgehört wird:

    Halten Sie den Player innerhalb der Grenzen des Bildschirms:

So sieht das alles aus:


Schritt 10: Bewegen Sie die Energieversorgung

Im Moment laichen die Energieversorgungen, bewegen sich aber nicht. Wir werden die GameScreen.update()-Funktion verwenden, um sie zu verschieben, da sie jeden Frame ausführt.

Fügen Sie diesen Code zu GameScreen.update() hinzu:

Jetzt müssen wir natürlich die EnergyManager.moveAll()-Funktion erstellen, also fügen Sie diese zu EnergyManager.as hinzu:


Schritt 10: Kollisionserkennung

Wir müssen nach Kollisionen zwischen jedem Energieobjekt und dem Spieler suchen. (Wenn Sie das Spiel weiterentwickeln, müssen Sie dies auf Asteroiden und Energieverbraucher überprüfen, nicht jedoch auf Sterne.)

Der beste Ort, um diese Überprüfungen durchzuführen, ist der EnergyManager, der in jedem Frame vom GameScreen ausgelöst wird.

Eine Sache zu beachten: Die Kollisionsprüfungen werden zwischen zwei Kreisen durchgeführt, daher ist hitTestObject() nicht ideal. Stattdessen verwenden wir die in diesem Tutorial erläuterte Methode.

Wir können die Funktion wie folgt schreiben:

  • Zeile 32: Beachten Sie, dass wir einen Verweis auf den Spieler weitergeben, damit wir auf seine Position zugreifen können.
  • Zeile 38: EnergyS steht für Energy Supply.
  • Zeile 40 und 41: Ermitteln des Unterschieds in den x- und y-Koordinaten zwischen dem Spieler und der Energieversorgung, die wir derzeit überprüfen.
  • Zeile 43: Berechnen Sie den Abstand zwischen den Objekten über Pythagoras.
  • Zeile 45: auf Kollision prüfen; 28 ist die Summe der Radien der beiden Objekte (Spielerradius ist 20, Energieradius ist 8).
  • Zeile 46 und 47: Entfernen Sie die Energieversorgung vom Bildschirm und vom Vektor.
  • Zeile 51: Fügen Sie maximal eine Energieeinheit pro Frame hinzu.

Sie können Zeile 51 in energyTransfer += 1 ändern, damit der Spieler mehr als ein Energieobjekt gleichzeitig absorbieren kann. Es liegt an Ihnen - probieren Sie es aus und sehen Sie, wie es sich auf das Spiel auswirkt.


Schritt 11: Rufen Sie die Kollisionserkennungsroutine auf

Wir müssen in jedem Frame nach Kollisionen suchen, daher sollten wir die Funktion aufrufen, die wir gerade von GameScreen.update() geschrieben haben.

Zuerst müssen wir eine ganzzahlige Variable erstellen, um den Energieübertragungswert aus der Kollisionserkennungsfunktion zu speichern. Wir werden diesen Wert verwenden, um die Energie des Schiffes zu erhöhen und die Punktzahl des Spielers zu erhöhen.


Schritt 12: Newtons Gravitationsgesetz

Bevor wir uns mit der Erstellung der Spielmechanik für die Push- und Pull-Funktion des Schiffes befassen, möchte ich das physikalische Konzept vorstellen, auf dem die Mechanik basiert.

Die Idee ist, das Objekt mittels einer Kraft zum Spieler zu ziehen. Das Newtonsche Gesetz der universellen Gravitation gibt uns eine großartige (und einfache) mathematische Formel, die wir dafür verwenden können, wobei die Kraft natürlich die Gravitationskraft ist:

G ist nur eine Zahl, und wir können sie auf einen beliebigen Wert einstellen. Ebenso können wir die Massen jedes Objekts im Spiel auf beliebige Werte einstellen. Die Schwerkraft tritt über unendliche Entfernungen auf, aber in unserem Spiel haben wir einen Grenzwert (gekennzeichnet durch den weißen Kreis in der Demo vom Beginn des Tutorials an).

Die zwei wichtigsten Dinge, die bei dieser Formel zu beachten sind, sind:

  • Die Stärke der Kraft hängt vom Quadrat des Abstands zwischen den beiden Objekten ab (wenn die Objekte also doppelt so weit entfernt sind, ist die Kraft ein Viertel so stark).
  • Die Richtung der Kraft ist entlang der direkten Linie, die die beiden Objekte durch den Raum verbindet.

Schritt 13: Überarbeiten der mathematischen Konzepte

Bevor wir mit dem Codieren der Spielmechanik für die Funktionen 'Push' und 'Pull' beginnen, sollten wir uns klar machen, was wir damit machen wollen:

frameWorkframeWorkframeWork

Im Wesentlichen möchten wir, dass A (der Spieler) eine bestimmte Kraft auf B (einen Kristall) ausübt und B basierend auf dieser Kraft in Richtung A bewegt.

Wir sollten einige Konzepte überarbeiten:

  • Flash funktioniert eher im Bogenmaß als in Grad.
  • Die y-Achse des Flash-Koordinatensystems ist umgekehrt: Wenn Sie nach unten gehen, bedeutet dies eine Zunahme von y.
  • Wir können den Winkel der Linie, die A mit B verbindet, mit Math.atan2 (B.y - A.y, B.x - A.x) ermitteln.
  • Mithilfe der Trigonometrie können wir anhand dieses Winkels und der Kraft herausfinden, wie viel wir B entlang jeder Achse bewegen müssen:
    • B.x += (Force*Math.cos(angle));
    • B.y += (Force*Math.sin(angle));
  • Wir können den Satz von Pythagoras verwenden, um den Abstand zwischen den beiden Objekten herauszufinden:

Weitere Informationen finden Sie in den Tutorials Gravity in Action und Trigonometry für Flash-Spieleentwickler.


Schritt 14: Push and Pull implementieren

Basierend auf der vorherigen Erklärung können wir einen Entwurf für unseren Code erstellen, der jeden Kristall zum Schiff zieht:

  1. Finden Sie den Unterschied in x und y zwischen dem Schiff und einem bestimmten Kristall.
  2. Finden Sie den Winkel zwischen ihnen im Bogenmaß.
  3. Finden Sie mit Pythagoras den Abstand zwischen ihnen.
  4. Überprüfen Sie, ob sich das Objekt im Gravitationsfeld des Schiffes befindet.
  5. Wenn ja, berechnen Sie die Gravitationskraft und ...
  6. ... die Kraft anwenden und die x- und y-Werte des Kristalls ändern.

Beispielcode:

  • Zeile 53: Holen Sie sich einen Verweis auf den Spieler.
  • Zeile 55: Wir durchlaufen jedes Energieobjekt.
  • Linie 61: Finden Sie den Winkel zwischen dem Schiff und der Energie.
  • Zeile 63: Finden Sie auch den Abstand zwischen ihnen.
  • Zeile 65: Überprüfen Sie, ob sich die Energie im Kraftfeld des Schiffes befindet.
  • Zeile 67: Verwenden Sie die Formel:
    • 4 = G, die von mir gewählte "Gravitationskonstante".
    • 50 = m1, die Masse des Schiffsspielers.
    • 10 = m2, die Masse des Energieobjekts.
  • Zeile 69: Bewegung anwenden.

Hier ist ein Zeitraffer, der zeigt, wie das aussieht:

Beachten Sie, dass sich die Energie dank des R-Quadrat-Terms schneller bewegt, je näher sie dem Schiff kommt.

Wir können die Druckfunktion implementieren, indem wir die Kraft negativ machen:

Hier bewegt sich das Objekt langsamer, wenn es sich weiter vom Spieler entfernt, da die Kraft schwächer wird.


Schritt 15: Wenden Sie den Mechaniker an

Natürlich benötigen Sie diese Funktion, um jeden Frame von GameScreen ausführen zu können - aber vorher müssen wir eine Boolesche Funktion verwenden, um zwischen den beiden Funktionen umzuschalten:

Wir werden true für 'Push' und false für 'Pull' verwenden.

Innerhalb von KeyDownHandler():

Anschließend müssen Sie den Booleschen Wert für jeden Frame überprüfen. Fügen Sie dies zu update() hinzu:


Schritt 16: Änderung

Sie werden vielleicht feststellen, dass die Bewegung nicht so schön aussieht. Dies könnte daran liegen, dass die Kraft nicht ganz ideal ist, oder an dem r-Quadrat-Term.

Ich möchte die Formel folgendermaßen ändern:

Wie Sie sehen können, habe ich den Wert von "G" auf 0,8 reduziert und die Kraft so geändert, dass sie nur vom Abstand zwischen den Objekten und nicht vom Abstand im Quadrat abhängt.

Probieren Sie es aus und sehen Sie, ob Ihnen die Abwechslung gefällt. Sie können es jederzeit ändern, wie Sie möchten.


Schritt 17: Die Text-Klasse

Wir müssen Text auf dem Bildschirm anzeigen, um die Punktzahl und die verbleibende Kraft des Schiffes anzuzeigen.

Zu diesem Zweck erstellen wir eine neue Klasse, Text:

Es ist sehr einfach; Es ist im Grunde ein MovieClip mit einem Textfeld darin.


Schritt 18: Hinzufügen von Leistung für den Spieler

Um das Spiel herauszufordern, wird die Schiffskraft langsam aufgebraucht, sodass der Spieler Energieobjekte sammeln muss, um sich wieder aufzuladen.

Um die Schiffsleistung auf dem Schiff selbst anzuzeigen, können wir einfach eine Text-Instanz zur Anzeigeliste des Schiffsobjekts hinzufügen.

Deklarieren Sie diese Variablen innerhalb der Ship-Klasse:

Wir müssen die Menge an Energie (sowohl gespeichert als auch angezeigt) in jedem Frame aktualisieren, also fügen Sie diese neue Funktion zu Player hinzu:

Zunächst im Konstruktor:

Und dann...

Die Leistung verringert sich jedes Bild um 1/24 einer Einheit, was bedeutet, dass sie jede Sekunde um eine volle Einheit abnimmt.

Wir müssen dies für jeden Frame ausführen, also fügen Sie diese Zeile zu GameScreen.update() hinzu:


Schritt 19: Energie erzeugen, um die Leistung zu erhöhen

Wenn das Schiff mit einem Energieobjekt kollidiert, soll es seine Kraft erhöhen.

Fügen Sie in GameScreen.update() die hervorgehobene Zeile hinzu:

Denken Sie daran, dass Sie in der Funktion EnergyManager.checkCollision() ändern können, wie viel Strom zurückgegeben wird.


Schritt 20: Einrichten der Partitur

Auch hier benötigen wir die Text-Klasse. Dieses Mal zeigen wir "Score" und dann den Wert an.

Hier benötigen wir drei weitere Variablen:

  • Der Text "Score".
  • Der Score-Wert-Text.
  • Eine Variable zum Speichern der tatsächlichen Punktzahl.

Deklarieren Sie diese in der GameScreen-Klasse:

Fügen Sie im Konstruktor diesen Code hinzu:

Fügen Sie nun in der Funktion update() Folgendes hinzu:

Das war's - wir haben eine Basisversion des obigen Spiels erstellt!

Schauen Sie sich das an (möglicherweise müssen Sie die Seite neu laden):


Zusätzliche Funktionen und Polieren

Raum Hintergrund

Vielleicht möchten Sie auch einen Hintergrund mit einem eingebetteten Bild und Sternen. Fügen Sie dies Ihrer Main-Klasse hinzu:

Erstellen Sie nun die Star-Klasse:

Fügen Sie im Konstruktor Main() Folgendes hinzu, um die Sterne zu erstellen:

Hier ist die eigentliche Funktion createStars():

Mit zufälligem Alpha, Größe, Position und Geschwindigkeit kann ein Pseudo-3D-Hintergrund erzeugt werden.

Bereichsanzeige

Ein Entfernungsanzeigekreis kann erstellt werden, indem einfach ein weiterer Kreis erstellt und zur Anzeigeliste des Schiffes hinzugefügt wird, genau wie Sie den Stromanzeigetext hinzugefügt haben. Stellen Sie sicher, dass der Kreis auf dem Schiff zentriert ist und einen Radius hat, der dem Push / Pull-Bereich des Schiffes entspricht.

Fügen Sie dem Kreis Transparenz (Alpha-Wert) mit dem folgenden Code hinzu:

Fügen Sie zusätzliche Steuerelemente hinzu, mit denen der Bereich vergrößert oder verkleinert wird, wenn die Aufwärts- und Abwärtspfeiltasten gedrückt werden.


Schlussfolgerung

Ich hoffe Ihr hat dieses Tutorial gefallen! Bitte hinterlassen Sie Ihre Kommentare.

Weiter: Lesen Sie diese Kritik, um eine Anleitung zu erhalten, wie Sie Flux von einer einfachen Demo zu einem vollständigen Spiel machen können!

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.