Advertisement
  1. Code
  2. Games

Mit elastischen Kollisionen herumspielen

by
Read Time:15 minsLanguages:
This post is part of a series called You Do The Math.
Creating Generative Art with HYPE
Euclidean Vectors in Flash

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial erstellen wir ein Spiel, bei dem verhindert werden soll, dass andere Objekte mit Ihrem Cursor kollidieren. Wir werden die in Flash integrierten hitTestObject()-Methoden nicht verwenden. Stattdessen werden wir unsere eigenen Kollisionserkennungsroutinen schreiben.

Neu veröffentlichtes Tutorial

Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im Februar 2011 veröffentlicht.


Vorschau des Endergebnisses

Werfen wir einen Blick auf das Endergebnis, auf unsere Arbeit:


Schritt 1: Start

Erstellen Sie eine neue Flash-Datei (ActionScript 3.0)

Flash collision game tutorial

Stellen Sie die Bühnenabmessungen auf 500x500px und die FPS auf 32 ein.

Flash collision game tutorialFlash collision game tutorialFlash collision game tutorial

Schritt 2: Die Ballklasse

Diese Klasse enthält alle Daten, die sich auf einen Ball beziehen. Ein Ball hat _mass, _radius_xSpeed und _ySpeed. Also werden wir für jeden eine Eigenschaft machen. Im Konstruktor übergeben wir die Masse, den Winkel und die Geschwindigkeit der Kugel. Da die Klasse mit einem Anzeigeobjekt verknüpft wird, können wir den Radius unseres Balls abrufen, indem wir die Breite des Anzeigeobjekts durch 2 teilen. _xSpeed und _ySpeed können mithilfe einfacher Sinus- und Cosinusfunktionen berechnet werden.

Weitere Informationen zu diesen trigonometrischen Funktionen Math.sin() und Math.cos() finden Sie in diesem Quick-Tipp.


Schritt 3: Bereitstellen von Gettern und Setzern

In unserer Ballklasse stellen wir Getter und Setter für unsere Immobilien zur Verfügung.


Schritt 4: Update-Funktion

Diese Funktion aktualisiert die x- und y-Eigenschaften unseres Balls entsprechend der _xSpeed und _ySpeed. Wir werden diese Funktion in unserer Ball-Klasse implementieren.


Schritt 5: Die abgeschlossene Klasse

In diesem Schritt beenden wir unsere Ballklasse.


Schritt 6: Objekte für unsere Ballklasse anzeigen

In die Quelldateien habe ich eine Start-FLA aufgenommen, die alle benötigten Bibliothekselemente enthält. Sie können sie natürlich selbst zeichnen, wenn Sie möchten. Stellen Sie sicher, dass Ihre FLA über die folgenden Anzeigeobjekte verfügt:

Flash collision game tutorial

(Anmerkung der Redaktion: Das ist ein Tippfehler: "ennemyball" sollte "enemyball" sagen.)


Schritt 7: Verknüpfen unserer Bibliotheksobjekte

Die soeben erstellte Ballklasse muss mit dem enemyball Sprite in der Bibliothek verknüpft sein.

Flash collision game tutorialFlash collision game tutorialFlash collision game tutorial

Das playerball-Sprite muss Ball als Basisklasse und PlayerBall als Klasse haben.

Flash collision game tutorialFlash collision game tutorialFlash collision game tutorial

Der score-Movieclip muss eine Score-Klasse haben.

Flash collision game tutorialFlash collision game tutorialFlash collision game tutorial

Schritt 8: Die Anwendungsklasse (Dokumentklasse)

Die Application-Klasse hat die gesamte Spiellogik. Wir importieren alle Klassen, die wir brauchen. Wie Sie sehen, verwenden wir TweenMax.

Danach definieren wir unsere Feldvariablen. Die erste Feldvariable ist ballPlayer.

Da die Basisklasse unseres playerball-Sprites Ball ist, können wir diese Klasse in der Variablen ballPlayer speichern. Dies erleichtert später das Überprüfen auf Kollisionen zwischen dem ballPlayer und den feindlichen Bällen.

Die zweite Feldvariable ist ein Array, das alle unsere feindlichen Bälle enthält. Die dritte Variable ist der Timer, mit dem die Hauptspielschleife ausgeführt wird. Das vierte und letzte Feld ist eine Instanz unseres Score-Bibliotheksobjekts, mit der die verstrichene Spielzeit angezeigt wird. Im Konstruktor rufen wir die Funktion init() auf, die ich im nächsten Schritt erläutern werde.

Vergessen Sie nicht, die Dokumentklasse zu verknüpfen!.

Flash collision game tutorial

Schritt 9: Die init() Funktion

Schauen Sie sich diesen Code an:

In den ersten vier Zeilen initialisieren wir unsere Feldvariablen.

Dann stellen wir sicher, dass unsere Bühne in der oberen linken Ecke ausgerichtet ist und nicht skaliert.

Wir verstecken den Mauszeiger. Unser Cursor wird durch den playerball Sprite ersetzt. Weiter rufen wir die setBackground-Funktion auf (erklärt im nächsten Schritt).

Wir zentrieren unsere score auf dem Bildschirm und fügen sie der Anzeigeliste hinzu. Um die Position von ballPlayer zu aktualisieren, fügen wir der Bühne ein MouseEvent.MOUSE_MOVE-Ereignis hinzu.

Die updatePlayerBall-Funktion (in Schritt 11 erläutert) behandelt dieses MouseEvent. Danach fügen wir den ballPlayer zur Anzeigeliste hinzu.

Der Timer wird verwendet, um die Spielzeit anzuzeigen. Wir fügen unserem Timer einen TimerEvent.TIMER-Listener hinzu, der alle 10 Millisekunden die Funktion updateTime() (in Schritt 12 erläutert) auslöst.

Schließlich fügen wir unserer Bühne einen MouseEvent.CLICK hinzu. Die startGame-Funktion (erklärt in Schritt 13) startet dann unser Spiel.


Schritt 10: Funktion setBackground()

Diese Funktion fügt der Anzeigeliste einen radialen Verlaufshintergrund hinzu. Um einen Verlauf auf einem Sprite zu zeichnen, müssen Sie den Verlaufstyp, die Farben, die Sie verwenden möchten, die Alpha-Werte der Farben, die Verhältnisse (diese definieren die Verteilung der Farben) und die Streumethode definieren.

Weitere Informationen finden Sie in diesem Quick-Tipp zu Farbverläufen.


Schritt 11: updatePlayerBall() Funktion

Diese Funktion aktualisiert die Position von ballPlayer entsprechend der Position Ihrer Maus.


Schritt 12: updateTime() Funktion

Wir berechnen die Zeit in Sekunden und fügen sie in das Textfeld unserer score Sprite ein. Alle 5000 ms (fünf Sekunden) fügen wir dem Spiel einen neuen Ball hinzu.


Schritt 13: startGame() Funktion

Das Spiel wird durch Klicken auf die Bühne gestartet. Zuerst entfernen wir den Listener für den Bühnenklick, damit wir das Spiel nicht mehrere Male starten können. Wir fügen dem Spiel drei Bälle hinzu, indem wir die Funktion addBall() (im nächsten Schritt erklärt) dreimal aufrufen. Wir starten unseren Timer, der unsere Spielzeit aktualisiert.

Schließlich fügen wir unserer Bühne ein ENTER_FRAME-Ereignis hinzu. Die gameLoop()-Funktion (erklärt in Schritt 15) aktualisiert die Position unserer feindlichen Bälle.


Schritt 14: Funktion addBall()

Zuerst machen wir eine neue Instanz unserer Ball-Klasse. Wir positionieren den ball zufällig auf der Bühne mit einem Alpha von 0 und fügen ihn der Anzeigeliste hinzu.

Als nächstes tweenen wir das Alpha zurück auf 1. (Ich verwende TweenMax, es ist in den Quelldateien enthalten. Sie können auch die integrierte Flash-Tween-Engine verwenden.) Das zweite Tween ist nicht wirklich ein Tween. Es wartet nur eine Sekunde und die onComplete-Funktion schiebt den ball in unser eballs-Array. Auf diese Weise kann die Funktion gameLoop() (im nächsten Schritt erläutert) den Rest erledigen.


Schritt 15: gameLoop() Funktion

Jeder Frame durchläuft diese Funktion.

Wir beginnen damit, alle unsere feindlichen Bälle zu durchlaufen.

Die zweite for-Schleife prüft auf Kollisionen zwischen den feindlichen Bällen. Die Schleife beginnt bei 'i + 1'. Auf diese Weise überprüfen wir die Kollisionen nicht doppelt.

Dann prüfen wir, ob der ballPlayer den feindlichen Ball trifft. Wenn ja, ist das Spiel beendet. Dann aktualisieren wir die Position unseres feindlichen Balls.

Wir stellen sicher, dass die Bälle im Spielbildschirm bleiben, indem wir die Funktion checkBounds() aufrufen (wird später erklärt).


Schritt 16: Funktion collision()

Diese Funktion prüft, ob ein bestimmtes Kugelpaar kollidiert.

Zuerst berechnen wir den x-Abstand und den y-Abstand zwischen den beiden Kugeln. Mit dem Satz von Pythagoras (siehe folgendes Diagramm) berechnen wir den absoluten Abstand zwischen ihnen. Wenn der Abstand kleiner oder gleich der Summe der Radien der Kugeln ist, kommt es zu einer Kollision.

Flash collision game tutorial

Schritt 17: Funktion doCollision()

Diese Funktion berechnet die neuen x- und y-Geschwindigkeiten der Kugeln entsprechend der Geschwindigkeit und dem Winkel der Kollision. Warnung: Mathe;)

Zuerst berechnen wir den horizontalen Abstand zwischen den beiden Kugeln und dann den vertikalen Abstand zwischen den Kugeln. Mit diesen Abständen (und etwas mehr Trigonometrie) können wir den Winkel zwischen den Kugeln berechnen (siehe Abbildung).

Flash collision game tutorial

Weiter berechnen wir, wie ich die Größe jeder Kugel nenne. (Wir haben einen xspeed-Vektor und einen yspeed-Vektor; die Größe ist die Vektorsumme dieser.) Dann berechnen wir den Winkel jeder Kugel (ähnlich der vorherigen Winkelberechnung).

Dann drehen wir die neuen x- und y-Geschwindigkeiten jeder Kugel. Was wir tun, ist das Koordinatensystem zu drehen. Durch Drehen unserer Achsen entsteht eine 1D-Kollision. (Siehe folgendes Diagramm).

Flash collision game tutorial

Newton sagt, dass die Gesamtmenge an kinetischer Energie in einem geschlossenen System konstant ist. Jetzt verwenden wir diese Formeln:

  • v1 = (u1*(m1-m2) + 2*m2*u2)/(m1+m2)
  • v2 = (u2*(m2-m1) + 2*m1*u1)/(m1+m2)

wo:

v1 = final xSpeedBall 1

v2 = final xSpeedBall 2

m1 = mass ball 1

m2 = mass ball 2

u1 = initial speed ball 1

u2 = initial speed ball 2

Die y-Geschwindigkeiten ändern sich nicht, da es sich um eine 1D-Kollision handelt.

Mit diesen Formeln können wir die xSpeed und ySpeed jeder Kugel berechnen.

Jetzt haben wir die neuen x- und y-Geschwindigkeiten in unserem gedrehten Koordinatensystem. Der letzte Schritt besteht darin, alles wieder in ein normales Koordinatensystem umzuwandeln. Wir verwenden Math.PI/2, da der Winkel zwischen xSpeed und ySpeed immer 90 Grad (pi/2 Bogenmaß) betragen muss.

Weitere Informationen zu elastischen Kollisionen finden Sie unter hoomanr.com.


Schritt 18: Funktion endOfGame()

Dies wird ausgeführt, wenn das Spiel endet.

Zunächst stoppen wir den Timer. Wir zeigen die Maus wieder. Als nächstes entfernen wir sowohl die Ereignis-Listener MOUSE_MOVE als auch ENTER_FRAME. Schließlich machen wir alle Bälle auf der Bühne unsichtbar.


Schritt 19: Funktion checkBounds()

Diese Funktion stellt sicher, dass die Bälle im Spielbildschirm bleiben. Wenn der Ball also die obere oder untere Seite trifft, kehren wir die ySpeed um. Wenn der Ball auf die linke oder rechte Seite des Bildschirms trifft, kehren wir die xSpeed um. Es verwendet eine ähnliche Logik wie die Ballkollisionserkennungsfunktion, um zu überprüfen, ob die Kanten des Balls auf eine Kante des Bildschirms treffen.


Schritt 20: Die vollständige Anwendungsklasse

Wir haben unsere Bewerbungsklasse abgeschlossen. Wir haben jetzt ein funktionierendes Spiel!!!

Abschluss

Das ist schon die Ende von diesem Tutorial. Natürlich können Sie die Möglichkeit hinzufügen, das Spiel neu zu starten, aber das sollte nicht zu schwierig sein. Dieses grundlegende Beispiel für elastische Kollisionen kann für größere Spiele wie ein Billardspiel oder ähnliches verwendet werden.

Ich hoffe dir hat dieses Tutorial gefallen, 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.