7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. From Scratch

Erstellen Sie ein Artillerie-Spiel von Grund auf neu

Scroll to top
Read Time: 12 mins

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In diesem Tutorial werden wir in Multimedia Fusion 2 ein Panzerspiel für zwei Spieler erstellen. Es bietet benutzerdefinierte 360-Grad-Schüsse und zerstörbares Gelände. Sie benötigen keine Programmiererfahrung oder Erfahrung in der Spieleentwicklung, um diesem Tutorial folgen zu können. Wenn Sie nicht über Multimedia Fusion 2 verfügen, können Sie die kostenlose Demo ausprobieren.


Das Spiel spielen

Abwechselnd auf den anderen Panzer schießen - Spieler Eins ist links und Spieler Zwei ist rechts. Verwenden Sie die Maus, um zu zielen; Je weiter das Fadenkreuz von Ihrem Panzer entfernt ist, desto stärker ist der Schuss. Der erste Spieler, der getroffen wird, verliert.


Einführung

Wir beginnen damit, unseren Rahmen so einzurichten, dass das Spiel reibungslos läuft, und fügen dann unseren ersten Panzer hinzu. Danach werden wir einige Kugeln abschießen lassen, die das Gelände zerstören, und schließlich wird ein weiterer Spielerpanzer hinzugefügt, gegen den wir antreten können.


Arbeitsbereich einrichten

Erstellen Sie zunächst eine neue Anwendung in Multimedia Fusion 2 (laden Sie die Demo hier herunter, falls Sie sie noch nicht haben) und nennen Sie sie Artillerie-Spiel.

Stellen Sie unter den Laufzeitoptionen des Spiels die Frame Rate auf 60 und den Display Mode auf Direct3D 9 ein. Dies sind die Standardkonfigurationseinstellungen, die ich bei den meisten Spielen verwende, da sie ein reibungsloses Spielerlebnis bieten und die Hardwarebeschleunigung auf dem Computer des Spielers nutzen.

Artillery SetupArtillery SetupArtillery Setup

Für dieses Tutorial verwenden wir außerdem eine Auflösung von 600x480, die in den Fenstereinstellungen geändert werden kann. Ändern Sie die Größe des Rahmens ebenfalls auf 600x480.

Um die Dinge ein wenig professioneller zu gestalten, deaktivieren wir auch die Menu bar, um zu verhindern, dass sie in unserem Spiel angezeigt wird.

Remove menuRemove menuRemove menu

Schritt 1: Erste Szene erstellen

Jetzt, da wir eingerichtet und einsatzbereit sind, ist es Zeit, einige Assets für unser Spiel zu importieren.

Sie können alle Grafiken, die ich in diesem Tutorial verwende, aus dem Quelldownload herunterladen oder Ihre eigenen zeichnen, wenn Sie möchten. Die Grafiken, die ich verwende, wurden von einigen kostenlosen Grafiken angepasst, die auf OpenGameArt.org verfügbar sind

Nachdem Sie die Bilder auf Ihrem Computer gespeichert haben, ziehen Sie sie einfach einzeln in Frame 1. Dadurch werden sie in unser Spiel importiert und ein Dialogfeld zum Festlegen des Objekttyps angezeigt.

Import TerrainImport TerrainImport Terrain

Beginnen Sie mit dem Importieren des Geländes. Setzen Sie es auf ein Hintergrundobjekt, dessen Obstacle Type auf Obstacle eingestellt ist.

Set to backgroundSet to backgroundSet to background

Importieren Sie als Nächstes den Panzer von Spieler Eins als aktives Objekt sowie den Turm von Spieler Eins. Nennen Sie sie P1Body bzw. P1Turret. Stellen Sie den Hotspot des Turms auf (3,3) und den Hotspot des Tanks auf (16,14). Dadurch wird sichergestellt, dass der Turm beim Platzieren am Tank richtig platziert ist und sich richtig dreht.

Tipp: Um den Hotspot zu platzieren, klicken Sie zuerst auf das Symbol mit dem Auge, um es sichtbar zu machen, und ziehen Sie den Hotspot dann an den gewünschten Punkt.
Turret Hot SpotTurret Hot SpotTurret Hot Spot

Importieren Sie auch das Aufzählungszeichen und das Fadenkreuz als aktive Objekte. Wir werden den anderen Tank später importieren. Zentrieren Sie den Hotspot des Fadenkreuzes auf (15,15). Deaktivieren Sie das Kontrollkästchen "Beim Start erstellen" und zentrieren Sie den Hotspot. Stellen Sie sicher, dass sich der Panzerturm in der Reihenfolge des Zeichnens hinter dem Körper befindet, indem Sie mit der rechten Maustaste darauf klicken und ihn unter der Option Order an To Back senden.

Ändern Sie abschließend die Hintergrundfarbe des Rahmens in hellblau (klicken Sie in der Arbeitsbereich-Symbolleiste auf Rahmen 1 und ändern Sie dann die entsprechende Eigenschaft im Eigenschaftenfenster). Verwenden Sie RGB = 115,176,217. Diese Farbe wird später wichtig sein, wenn wir zerstörbares Gelände hinzufügen.

Ordnen Sie die Objekte in Ihrem Rahmen so an, dass sie ähnlich aussehen wie in diesem Bild.

Arrange the objectsArrange the objectsArrange the objects

Schritt 2: Schießen Sie eine Kugel

Hier lassen wir unseren ersten Panzer eine Kugel in einer geraden Linie abschießen. Wir werden der Kugel später Schwerkraft hinzufügen sowie eine Explosion, wenn sie mit dem Boden kollidiert.

Erstellen Sie zunächst zwei änderbare Werte für den Tank mit den Namen DistanceToMouse und AngleToMouse: Wählen Sie den Tank aus, klicken Sie oben im Eigenschaftenfenster auf das Symbol "A-Z" und klicken Sie unter "Veränderbare Werte" auf "Neu". Wir werden diese verwenden, um den Abstand in Pixel und den Winkel in Grad zur Maus zu speichern.

Alterable Values for Tank BodyAlterable Values for Tank BodyAlterable Values for Tank Body

Erstellen Sie als Nächstes fünf veränderbare Werte für das Aufzählungszeichen:

  • TempX
  • TempY
  • XSpeed
  • YSpeed
  • InitialSpeed

Diese Werte werden verwendet, um die Bewegungsinformationen des Geschosses zu speichern und unsere benutzerdefinierte 360-Grad-Bewegung zu implementieren.

Es ist Zeit, Code zu schreiben. Wir beginnen damit, den Turm einfach zu positionieren und auf die Maus zu richten.

Fügen Sie das Advanced Direction-Objekt über Einfügen > Neues Objekt zu Ihrem Spiel hinzu. Wir werden es verwenden, um den Winkel und die Entfernung zur Maus von unserem Tank zu berechnen.

Add Advanced Direction ObjectAdd Advanced Direction ObjectAdd Advanced Direction Object

Tipp: Wenn Sie die Demo von Multimedia Fusion 2 verwenden, haben Sie möglicherweise keinen Zugriff auf das erweiterte Bonusobjekt, das in Bonus Pack 1 verfügbar ist. In diesem Fall können Sie zur Berechnung des Winkels zwischen zwei Objekten einfach die folgende Formel verwenden:360-ATan2(YMouse-Y("P1Body"), XMouse-X("P1Body")) ...Anstatt von:Distance("Advanced Direction Object", X("P1Body"), Y("P1Body"), XMouse, YMouse)

Fügen Sie dann den folgenden Code in den Ereigniseditor ein (rufen Sie diesen über Ansicht > Ereigniseditor auf):

+ Always - [P1Body] Set DistanceToMouse to: Distance("Advanced Direction Object", X("P1Body"), Y("P1Body"), XMouse, YMouse) - [P1Body] Set AngleToMouse to: Direction("Advanced Direction Object", X("P1Body"), Y("P1Body"), XMouse, YMouse) - [P1Turret] Set position at (0,0) from P1Body - [P1Turret] Set Angle To AngleToMouse("P1Body") - [Crosshair] Set X Coordinate to XMouse - [Crosshair] Set Y Coordinate to YMouse

Wenn Sie Ihr Spiel jetzt ausführen, sollten Sie sehen, dass der Panzerturm jetzt auf das Fadenkreuz zeigt und dass das Fadenkreuz am Mauszeiger positioniert ist.

Jetzt lasst uns eine Kugel abfeuern. Fügen Sie den folgenden Code hinzu:+ User clicks with left button - [Create] Create Bullet at (0,0) from P1Body - [Bullet] Set TempX to X("Bullet") - [Bullet] Set TempY to Y("Bullet") - [Bullet] Set InitialSpeed to Min(DistanceToMouse("P1Body")/17.0, 15)  - [Bullet] Set XSpeed to Cos(AngleToMouse("P1Body"))*InitialSpeed("Bullet") - [Bullet] Set YSpeed to Sin(AngleToMouse("P1Body"))*InitialSpeed("Bullet")*-1

+ Always - [Bullet] Fügen Sie XSpeed("Bullet") zu TempX("Bullet") hinzu. - [Bullet] Fügen Sie YSpeed("Bullet") zu TempY("Bullet") hinzu. - [Bullet] Setzen Sie die X-Position auf TempX("Bullet") - [Bullet] Setzen Sie die Y-Position auf TempY("Bullet")

Shoot Code 1Shoot Code 1Shoot Code 1
Shoot Code 2Shoot Code 2Shoot Code 2

Wenn Sie Ihr Spiel ausführen (über das Menü "Ausführen"), sollte der Panzer eine Kugel in einer geraden Linie ohne Schwerkraft abschießen.

Was macht dieser Code?

Zuerst erstellen wir eine Kugel am Panzerkörper. Wir verwenden dann die Werte TempX und TempY, um die aktuelle Position des Aufzählungszeichens zu speichern. Wir stellen die Anfangsgeschwindigkeit des Geschosses auf den Abstand vom Panzer zur Maus mit einer maximalen Leistung von 15 ein. (Der Abstand wird durch 17,0 geteilt, um die Stärke zu verringern.) Dies sind nur Werte, die ich nach einigen Tests einfach erfunden habe. Sie können mit diesen beiden Werten selbst spielen, um zu ändern, wie schnell die Kugel abgefeuert wird.

Wir berechnen dann die XSpeed und YSpeed aus dem Winkel und der Leistung unter Verwendung der Trigonometrie. Machen Sie sich keine Sorgen, wenn Sie die Mathematik dahinter nicht verstehen!

Schließlich aktualisieren wir im Always-Ereignis kontinuierlich die Position des in TempX und TempY gespeicherten Aufzählungszeichens, indem wir XSpeed und YSpeed des Aufzählungszeichens hinzufügen.

Warum TempX und TempY verwenden?

Wir müssen unsere Zwischenpositionen in veränderbaren Werten für benutzerdefinierte Bewegungen speichern, da Multimedia Fusion 2 keine Gleitkommazahlen (Zahlen mit Dezimalstellen) für seine Koordinaten verwendet, sondern Ganzzahlen (ganze Zahlen).

Wenn Sie versuchen, die X-Position des Aufzählungszeichens auf X("Bullet") + 0.2 zu setzen, werden Sie feststellen, dass es sich nirgendwo bewegt, da 0,2 auf 0 abgerundet wird und das Aufzählungszeichen daher auf seine aktuelle Position gesetzt wird.


Schritt 3: Schwerkraft hinzufügen

Jetzt, da wir eine Kugel abschießen können, müssen wir die Schwerkraft hinzufügen, damit die Kugel fällt, sobald sie die Kanone des Panzers verlässt.

Erstens brauchen wir einen Ort, an dem einige Werte gespeichert werden können, die während unseres Spiels verwendet werden, z. B. die Schwerkraft. In einem MMF2-Spiel gibt es zahlreiche Orte, an denen diese Art von Informationen gespeichert werden können. Einige Leute ziehen es vor, ein bestimmtes Objekt zu erstellen, nur um Werte zu speichern. In diesem Tutorial werden wir globale Werte verwenden - Werte, die von überall im Spiel verfügbar sind -, um unsere wichtigen Werte zu speichern.

Wechseln Sie zu den globalen Werten für Ihre Anwendung (Klicken Sie in Ihrer Arbeitsbereich-Symbolleiste auf die Anwendung und wählen Sie dann im Eigenschaftenfenster das Symbol "A-Z" aus), und erstellen Sie einen neuen Wert: Y_Gravity.

Tipp: Wenn Sie Ihren Code besser lesbar machen möchten, können Sie auch einen anderen globalen Wert für Max_Speed hinzufügen und diesen anstelle von "15.0" verwenden, wobei wir den InitialSpeed für das Aufzählungszeichen berechnen. Auf diese Weise können Sie die maximale Leistung einfach ändern, ohne Ihren Code überall dort bearbeiten zu müssen, wo er angezeigt wird.

Mit MMF2 können Sie keine Floats in globale Werte eingeben. Da unsere Schwerkraft kleiner als eins sein soll, müssen Sie sie im Code festlegen:

Set GravitySet GravitySet Gravity

Jetzt müssen wir nur noch diese Schwerkraft zur YSpeed der Kugel auf jedem Frame hinzufügen.

Fügen Sie die Zeile hinzu:

+Always - [Bullet]  Add Y_Gravity To YSpeed 

Add GravityAdd GravityAdd Gravity

Sie können auf ein Ereignis doppelklicken, um in den Listenmodus zu wechseln und die Reihenfolge der Ereignisaktionen zu ändern. Platzieren Sie die neue Zeile zwischen den vorhandenen Aktionen, wie ich es hier getan habe.

Wenn Sie das Spiel starten, sollte Ihr Panzer eine Kugel abschießen, die auf den Boden zurückfällt.


Schritt 4: Zerstören Sie das Gelände

Als nächstes müssen wir die Kugel dazu bringen, Löcher in den Boden zu bohren, wenn sie damit kollidiert. Dazu nutzen wir die Funktion "Zum Hintergrund hinzufügen" von Multimedia Fusion.

Add to Backdrop fügt das Bild eines aktiven Objekts dauerhaft in den Hintergrund ein, wenn das Spiel ausgeführt wird. Dies kann sich darauf auswirken, ob ein bestimmter Teil des Hintergrunds Kollisionen registriert oder nicht. Was wir tun werden, ist eine "Loch"-Form, die einen Kreis in den Hintergrund schneidet, der so groß ist wie die dazugehörige Explosionsanimation.

Fügen Sie ein Loch hinzu

Importieren Sie explosion_hole.png als aktives Objekt, indem Sie es in den Frame ziehen. Zentrieren Sie den Hotspot auf (32,32).

Importieren Sie explosion_grafic_1.png als weiteres aktives Objekt. Wenn Sie gefragt werden, ob Sie explosion_graphic_2.png usw. importieren möchten, wählen Sie Ja.

Import OthersImport OthersImport Others

Zentrieren Sie die Hotspots auch auf diesen Explosionsgrafiken.

Der Code zum Hinzufügen von zerstörbarem Gelände ist recht einfach. Wenn eine Kugel mit dem Hintergrund kollidiert, müssen wir nur das Lochobjekt erstellen und es dem Hintergrund hinzufügen.

Erstellen Sie das Loch, wenn die Kugel mit dem Hintergrund kollidiert:

Collide with backdropCollide with backdropCollide with backdrop

Fügen Sie das Loch dem Hintergrund als "Kein Hindernis" hinzu (damit Kugeln hindurchtreten können):

Add to BackdropAdd to BackdropAdd to Backdrop
As ObstacleAs ObstacleAs Obstacle

Erstellen Sie auch eine grafische Explosion (eine, die zeigt, wo die Kugel getroffen hat) und zerstören Sie die Kugel am Ende. Wir können das Loch auch zerstören, wenn es dem Hintergrund hinzugefügt wurde:

Create explosionCreate explosionCreate explosion

Zerstören Sie schließlich die grafische Explosion, wenn die Animation beendet ist:

Destroy Explosion AnimationDestroy Explosion AnimationDestroy Explosion Animation

Wenn Sie das Spiel ausführen, sollten Sie jetzt einen Panzer haben, der zielen und auf das Gelände schießen kann, Explosionen erzeugt und Löcher hinterlässt.

Shoot TerrainShoot TerrainShoot Terrain

Schritt 5: Fügen Sie einen weiteren Spieler hinzu

Schließlich werden wir unserem Spiel einen weiteren Spieler hinzufügen. Wir werden den Code, den wir bereits für unseren ersten Panzer haben, kopieren und auf einen anderen anwenden. Wir werden auch eine neue globale Variable benötigen, um zu verfolgen, wer an der Reihe ist.

Fügen Sie die Grafiken von Player Two hinzu

Importieren Sie den Panzerkörper und den Turm von Spieler Zwei auf die gleiche Weise wie bei Spieler Eins. Stellen Sie den zweiten Tank auf die rechte Seite des Rahmens.

Add player twoAdd player twoAdd player two

Kopieren Sie im Ereigniseditor den Code für den ersten Panzer in den zweiten. Sie müssen auch die veränderbaren Werte DistanceToMouse und AngleToMouse im Panzer des zweiten Spielers erstellen. Ich habe meinem Code Kommentare hinzugefügt, um die Anzeige zu erleichtern. Wenn Sie nicht weiterkommen, folgen Sie einfach dem ersten Teil dieses Tutorials noch einmal, aber machen Sie es für den zweiten Tank.

Player Two CodePlayer Two CodePlayer Two Code

Wenn Sie das Spiel jetzt ausführen, feuern beide Panzer gleichzeitig auf das Fadenkreuz.

Neue Variablen erstellen

Erstellen Sie zwei neue globale Variablen mit den Namen CurrentPlayerTurn und TurnCooldown.

TurnCooldown wird verwendet, um zu verhindern, dass beide Panzer gleichzeitig feuern. Immer wenn ein Spieler schießt, setzen wir diese Abklingzeit auf einen kleinen Wert, der auf Null herunterzählt, und wir lassen den anderen Spieler nicht schießen, bis dieser Wert Null erreicht.

Wir werden CurrentPlayerTurn = 0 verwenden, um den Zug von Spieler Eins darzustellen, und CurrentPlayerTurn = 1, um den Zug von Spieler Zwei darzustellen.

Fügen Sie unter dem Schießcode von Player One mit User clicks with Left button die Bedingung CurrentPlayerCooldown = 0 hinzu, damit ein Panzer nur auf die Maus schaut und feuern kann, wenn er die Drehregler hat. Verwenden Sie dazu die Bedingung "Mit einem globalen Wert vergleichen":

Compare Global valueCompare Global valueCompare Global value

Fügen Sie außerdem die Bedingung TurnCooldown = 0 hinzu, um sicherzustellen, dass der Schuss abgekühlt ist, bevor Sie versuchen zu schießen.

Fügen Sie zwei weitere Aktionen auf Set hinzu, um die TurnCooldown auf einen kleinen Wert von 3 und die CurrentPlayerTurn auf 1-CurrentPlayerTurn zu setzen. (Dies bedeutet, dass wenn CurrentPlayerTurn 0 ist, es auf 1 gesetzt wird, und wenn es 1 ist, wird es auf 0 gesetzt.)

Nachdem Sie dies alles getan haben, sollte Ihr Code folgendermaßen aussehen:

Set CooldownSet CooldownSet Cooldown

Duplizieren Sie den gleichen Code für Spieler Zwei, aber ändere die Bedingung, um den Zug von Spieler Zwei mit CurrentPlayerTurn = 1 widerzuspiegeln

Player Two CooldownPlayer Two CooldownPlayer Two Cooldown

Und schließlich fügen Sie eine weitere Bedingung hinzu, um unsere Abklingzeit zu verringern, wenn sie größer als Null ist:

Lower CooldownLower CooldownLower Cooldown

Wenn Sie das Spiel jetzt spielen, sollten Sie in der Lage sein, beide Panzer aufeinander zu schießen, wobei jeder Schuss den Zug des aktuellen Panzers abwechselt.

Two Player TanksTwo Player TanksTwo Player Tanks

Schritt 6: Win-Bedingung hinzufügen

Jetzt, wo wir schießen können, müssen wir nur noch einen Weg hinzufügen, um uns gegenseitig in die Luft zu jagen! Das ist ziemlich einfach. Wir müssen lediglich feststellen, ob eine Explosion einen Panzer überlappt, und wenn dies der Fall ist, zerstören wir den Panzer und lassen danach niemanden mehr schießen.

Fügen Sie den folgenden Code hinzu:

+ [Explosion_Graphic] is overlapping [P1Body]  - Destroy [P1Body] - Destroy [P1Turret] - Set CurrentPlayerTurn auf -1

+ [Explosion_Graphic] überlappt [P2Body] - Zerstören Sie [P2Body] - Zerstören Sie [P2Turret] - Setzen Sie CurrentPlayerTurn auf -1

So sieht der Code für Player One aus:

Kill each other!Kill each other!Kill each other!

Die Spieler und ihre Türme zu zerstören ist ziemlich selbsterklärend. Wir setzen den CurrentPlayerTurn auf -1, damit die Spieler nicht mehr feuern können (da die Bedingungen erfordern, dass CurrentPlayerTurn gleich 0 oder 1 ist).

Wenn Sie Ihr Spiel ausführen, sollten Sie in der Lage sein, abwechselnd aufeinander zu schießen, bis einer von Ihnen in die Luft sprengt!


Abschluss

Jetzt haben Sie ein voll funktionsfähiges Panzerspiel für zwei Spieler, das Sie mit Ihren Freunden spielen können. Von hier aus können Sie Dinge wie zufällige Windgeschwindigkeit hinzufügen, die die Flugbahn des Geschosses beeinflusst, neue Waffen, Geräusche, Partikeleffekte und mehr!

Viel Spass damit!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
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.