Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Game Development
  2. Complete Games
Gamedevelopment

Erstellen Sie ein von Megaman inspiriertes Spiel in Construct 2

by
Difficulty:IntermediateLength:LongLanguages:

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

Ich werde Sie durch die Entwicklung eines von Megaman inspirierten Shooter/Platformer-Spiels führen. Wir werden uns mehr auf die Schießaspekte des Gameplays als auf die Plattform konzentrieren. In diesem Tutorial werde ich Construct 2 als Werkzeug verwenden, um das Spiel zu erstellen, aber ich werde die Logik mithilfe von Pseudocode erklären, damit Sie diesem Tutorial in einer beliebigen Sprache oder Engine Ihrer Wahl folgen können.


Klicken Sie auf das Spiel, um es zu fokussieren, und verwenden Sie dann die Pfeiltasten, um sich zu bewegen und zu springen, und Z, um zu schießen.

Um mich auf die Gameplay-Implementierung zu konzentrieren, werde ich nicht jede Construct 2-Funktion erklären. Ich gehe davon aus, dass Sie die Grundlagen wie das Laden eines Sprites, grundlegende Kollisionen oder das Spielen von Sounds kennen. Nachdem dies gesagt ist, fangen wir an, das Spiel zu machen.


Bereiten Sie das Kunstwerk vor

Das Wichtigste zuerst, wir brauchen Sprites für unser Spiel. Zum Glück hat opengameart uns mit ihrer wundervollen Sammlung legaler Spielekunst bedeckt. Wir brauchen vier Spritesätze; Ein Held, ein Feind und Kacheln für Plattformen.

Um sie in Construct 2 zu verwenden, schneide ich die Sprites des Helden mit GIMP in einzelne Frames.


Grundbewegung

Ich werde das Plattformverhalten von Construct 2 für den Rest des Tutorials verwenden, damit ich mich auf den Schieß- und KI-Teil des Spiels konzentrieren kann, der der Hauptfokus dieses Tutorials war.

Construct 2s platform behaviour
Construct 2 Plattformverhalten

Grundbewegung

Wenn Sie in einer anderen Sprache arbeiten oder Ihre eigene grundlegende Plattformerbewegung implementieren möchten, anstatt das integrierte Verhalten zu verwenden. Sie müssen den Code in diesem Abschnitt nur verwenden, wenn Sie das integrierte Verhalten von Construct 2 nicht verwenden möchten.

Zunächst müssen wir drei Möglichkeiten betrachten, wie sich unser Held bewegen kann. nach rechts gehen, nach links gehen oder springen. In jedem Frame aktualisieren wir die Spielsimulation.

Um den Charakter des Spielers zu aktualisieren, implementieren wir grundlegende Bewegungen wie folgt:

Ich benutze eine andere Funktion, um zu springen, weil beim Springen nicht nur der y-Wert geändert, sondern auch die Schwerkraft berechnet wird. Wir werden auch eine Funktion haben, die abhört, ob gerade eine Taste losgelassen wurde oder nicht, um unsere Heldenanimation auf eine stehende Animation zurückzusetzen.

Lassen Sie uns darüber sprechen, wie man den Spieler zum Springen bringt. Der Held muss wissen, ob er gerade springt oder nicht und ob er gerade fällt oder nicht. Wir deklarieren also zwei neue Variablen: isJumping und isFalling. Standardmäßig sind beide falsch, was bedeutet, dass der Held auf einer Plattform steht.

Um einen Sprung auszuführen, müssen wir zuerst prüfen, ob beide Werte falsch sind oder nicht, und dann den isJump auf true setzen.

Damit der Held springen kann, benötigen wir eine Variable namens JumpPower und Gravity. Der Standardwert der Sprungkraft ist -20 und die Schwerkraft ist 1. Die Logik besteht darin, den Wert der Sprungkraft zur Y-Position des Helden und die Schwerkraft zum Wert der Sprungkraft hinzuzufügen.

Wir machen das bei jedem Tick. Vielleicht ist dies nicht die realistischste Schwerkraftphysik, die es gibt, aber Spiele müssen nicht realistisch sein, sie müssen nur glaubwürdig sein, deshalb haben einige Spiele einen super menschlichen Sprung und einen Doppelsprung. Der folgende Code gehört in die Update-Funktion.

Das integrierte Plattformverhalten von Construct 2 repliziert den obigen Beispielcode, der nur denjenigen hilft, die in einer anderen Sprache arbeiten.


Implementierung des Shootings

Jetzt kommt der Schießteil des Spiels. In der Megaman-Serie gibt es drei Arten von Schüssen: normale Schüsse, geladene Schüsse und Boss-Energieschüsse.

Normale Aufnahmen sind selbsterklärend. Geladene Schüsse sind Schüsse, die zuerst geladen werden, bevor sie veröffentlicht werden. Es gibt zwei Arten von geladenen Schüssen: halb aufgeladen und voll aufgeladen. Diese aufgeladenen Angriffe sind stärker als normale Schüsse, wobei die voll aufgeladenen am stärksten werden.

Boss-Energieschüsse sind Schüsse mit Kraft, die der Spieler nach dem Sieg über jeden Boss erhalten hat. Der Schaden ist der gleiche wie normal, aber sie haben spezielle Eigenschaften, die normale Schüsse nicht haben.

Nachdem wir den Typ jedes Schusses kennen, beginnen wir mit der Erstellung. Lassen Sie uns zuerst die Logik dahinter sehen, wie wir jeden Schuss verwenden. Hier nehmen wir an, dass die Z-Taste auf der Tastatur verwendet wird, um einen Schuss abzufeuern. Wir werden zwei verschiedene Verhaltensweisen implementieren:

  • Normale Schüsse: Der Spieler drückt z und lässt es dann sofort los (tippen Sie auf die Schaltfläche). Die Kugel wird bei jedem Tippen einmal abgefeuert. Die Animation wird geändert, um eine Animation aufzunehmen, bevor sofort zur stehenden Animation gewechselt wird.

  • Geladene Schüsse: Der Spieler drückt Z. Die erste normale Kugel wird abgefeuert. Die Animation ändert sich zu Aufnahme, bevor sofort zur stehenden Animation gewechselt wird. Wenn Z weiterhin gedrückt wird, wird zusätzlich zur Wiedergabeanimation (Stehen, Gehen) ein Ladeeffekt hinzugefügt. Wenn die Z-Taste seit dem ersten Aufladen in weniger als 5 Sekunden losgelassen wird, wird eine halb aufgeladene Kugel abgefeuert. Wenn die Z-Taste nach 5 Sekunden losgelassen wird, wird eine voll aufgeladene Kugel abgefeuert.
  • Boss-Energieschüsse: Unser Held muss zuerst die Kugel ausrüsten, die er nach dem Sieg über einen Boss erhalten hat. Nach dem Ausrüsten drückt der Spieler einen weiteren Knopf, um diese Kugel abzuschießen. Dieses Aufzählungsverhalten variiert und muss für jedes Aufzählungszeichen eindeutig codiert werden.

Beginnen wir jetzt mit dem Code. Da unser Held nach links und rechts schießen kann, müssen wir wissen, in welche Richtung er gerade blickt. Deklarieren wir eine neue Variable namens "Facing", die einen Zeichenfolgenwert speichert, ob der Held nach links oder rechts zeigt.

move events in construct 2
Verschieben von Ereignissen in Construct 2

Bevor wir eine Kugel abschießen, müssen wir uns die Eigenschaften der Kugel ansehen:

  • Kraft: Angriffskraft der Kugel, der Schaden, den sie dem Feind zufügt

  • Geschwindigkeit: wie schnell die Kugel geht

  • Winkel: Der Schusswinkel bestimmt, in welche Richtung die Kugel geht.

Diese Eigenschaften unterscheiden sich für jedes Aufzählungszeichen. Insbesondere wird die Leistungseigenschaft unterschiedlich sein. Die Winkeleigenschaft ist normalerweise nur einer von zwei Werten. ob die Kugel rechts oder links abgefeuert wird, es sei denn, es handelt sich um eine Boss-Energiekugel, die in einem einzigartigen Winkel abgefeuert werden kann.

Schussvariationen werden später besprochen, daher werde ich jetzt nur grundlegende Aufnahmen behandeln. Das Folgende ist der Code, der eine Kugel abschießt.

add bullet behaviour to the bullets
Hinzufügen des Aufzählungsverhaltens zu Aufzählungssprites
shooting code spawn new bullet object
Der Schießcode, in dem wir ein neues Kugelobjekt erzeugen

Geladene Schüsse

Einige Kugeln können stärker sein als andere. Um einen geladenen Schuss zu erstellen, benötigen wir eine Variable namens "ChargedTime", die jede Sekunde erhöht, in der der Spieler Z gedrückt hält, und beim Abfeuern der Kugel auf Null zurückkehrt. Die Änderungen am Update-Code lauten wie folgt:

chapter 1 - add charged time
chapter 1 - shoot full charged bullet
chapter 1 - shoot half charged bullet

Unser neuer Heldencharakter bewegt sich nach links, rechts und springt gemäß unserer Eingabe und schießt auch Kugeln, egal ob normal, halb aufgeladen oder voll aufgeladen.


Feinde implementieren

Wir haben jetzt einen kontrollierbaren Helden. Nennen wir es der Einfachheit halber Xeon. Er kann einige grundlegende Bewegungen wie Gehen, Springen und Schießen ausführen. Das ist großartig! Aber was nützt es, ohne etwas zu schießen, oder? Deshalb werden wir diesmal unseren ersten Feind machen.

Lassen Sie uns die Attribute unseres Feindes entwerfen, bevor wir beginnen, sie zu codieren.

  • Gesundheit: Wie viele Gesundheit unser Feind hat, bestimmt, wie viele Schüsse (und welche Art) benötigt werden, um ihn zu zerstören.

  • Macht: Angriffskraft des Feindes, wie viel Schaden es unserem Spieler zufügt.

  • ShotAngle: In welche Richtung der Feind auf die Kugel schießt, kann sie links oder rechts oder wo immer wir wollen sein.

Das ist so ziemlich das, was wir für unseren Feind brauchen. Jetzt machen wir den Feind zur Klasse/zum Objekt.

Die Klasse/das Objekt des Feindes ist so ziemlich die gleiche wie die Klasse/das Objekt des Spielers, außer dass der Feind nicht auf Eingaben des Spielers hört. Aus diesem Grund müssen wir die Teile ersetzen, in denen der Held auf Spielereingaben und feindliche KI/Logik hört.


Feindlichen Angriff AI

Lassen Sie uns zunächst die grundlegende Angriff AI des Feindes behandeln. Der Feind schießt auf den Spieler, wenn er den Spieler sieht.

Um festzustellen, ob der Feind den Spieler "sieht", müssen wir eine Variable für das feindliche Objekt definieren, die als Verblendung bezeichnet wird. Dabei handelt es sich um eine Zeichenfolge, in der einer der beiden Werte "links" oder "rechts" gespeichert ist.

Der Feind braucht auch eine Art Sichtweite, weshalb wir eine weitere Variable namens Reichweite erstellen werden. Befindet sich der Spieler in dieser Reichweite, bedeutet dies, dass der Feind den Spieler "sieht". Der Pseudocode lautet wie folgt:

checkSees function

Funktion checkSees()

Vielleicht haben Sie etwas in diesem Pseudocode bemerkt: Es berücksichtigt nicht die y-Position des Helden, sodass der Feind immer noch auf den Helden schießt, selbst wenn er sich auf Plattformen mit unterschiedlichen Höhen befindet.

Im Moment wird dies ausreichen, da das Erstellen eines Sichtlinienalgorithmus außerhalb des Rahmens dieses Lernprogramms liegt. In Ihrem eigenen Spiel möchten Sie möglicherweise eine Y-Toleranz in der obigen Funktion hinzufügen, um zu überprüfen, ob die y-Position des Helden zwischen zwei Punkten liegt, die die Höhe des Feindes definieren.


Feinde schießen lassen

Der Pseudocode für das Schießen des Feindes lautet wie folgt:

Wie Sie sehen können, ähnelt die feindliche shoot() der des Spielers. Es nimmt den Pfad, die Angriffskraft, die Geschossgeschwindigkeit und den Schusswinkel des Sprites als Parameter.


Feindliche Bewegungs-KI

Wann wechselt der Feind von links nach rechts? Für unseren Helden verwenden wir Spielereingaben, um die Richtung zu ändern, in die unser Held blickt. Für unseren Feind haben wir zwei Möglichkeiten: Verwenden Sie einen Timer, um alle paar Sekunden die Blickrichtung zu wechseln, während der Feind stillsteht, oder lassen Sie den Feind zu einem bestimmten Punkt gehen und dann seine Blickrichtung wechseln und dann zu einem anderen Punkt gehen um die Blickrichtung wieder zu ändern.

Diese zweite Methode kann als patrouillierende KI verwendet werden. Natürlich können wir den Feind nur in eine Richtung laufen lassen und niemals umkehren.

Der Pseudocode für das erste Verfahren lautet wie folgt:

switching AI function
KI-Funktionen wechseln

Feind patrouillierende AI

Um die patrouillierende AI zu erstellen, müssen wir zwei unsichtbare Objekte erstellen, die sich am Ende beider Wege der Patrouillenroute des Feindes befinden, und den Feind dazu bringen, sich auf eine andere Weise zu bewegen, wenn er mit ihnen kollidiert.

this is how it looks in Construct 2
Patrouillierende KI

Schreiben wir nun unseren Pseudocode für die patrouillierende AI des Feindes:

chapter 2 - patrolling AI

Danach patrouilliert der Feind zwischen zwei Punkten, wie wir es wollen.

Um festzulegen, welche AI der Feind verwendet, fügen wir eine weitere Variable mit einem Zeichenfolgentyp für unseren Feind hinzu: die feindliche AI. Das bestimmt, welche AI für jeden Frame verwendet werden soll, wie folgt:

Natürlich können Sie weitere feindliche AI-Typen hinzufügen, wenn Sie möchten.


Schussvariation

Lassen Sie uns fortfahren, wie wir Schussvariationen sowohl für den Spieler als auch für den Feind vornehmen können. Wir machen Schussvariationen, indem wir zwei Dinge ändern: den Schusswinkel und die Anzahl der Schüsse.

Auf diese Weise können wir einen einfachen Schuss mit einer Kugel oder einen Schuss mit drei Richtungen machen. Bevor wir dies tun, werden wir eine weitere Variable für das feindliche Objekt/die feindliche Klasse namens shotAI erstellen, bei der es sich um eine Zeichenfolge handelt. Wir werden dies in unseren checkSees() verwenden, um zu überprüfen, ob der Feind blockiert. Die Änderungen an diesem Codeblock sehen folgendermaßen aus:

chapter 2 - enemy shooting

Natürlich liegt der Name der AI und die Art des Schusses, den der Feind abfeuern würde, bei Ihnen.

Das ist nur ein Beispiel.Lassen Sie uns nun tiefer in das eintauchen, was sich in der Funktion shootThreeBullets() befindet.

Wenn Sie sich nicht sicher sind, warum 0 nach rechts und 180 nach links geht, liegt die Richtung von 0 Grad direkt auf der rechten Seite des Bildschirms, 90 Grad auf der Unterseite des Bildschirms usw., bis sie trifft 360 Grad. Sobald Sie wissen, welcher Wert wohin geht, können Sie Ihre eigene Schussvariante erstellen.

Wir können auch eine shotAI-Variable für den Player erstellen, aber ich bevorzuge, dass wir sie selectedShot nennen, da unser Player die Kugel anstelle der von Anfang an programmierten Kugel auswählt.

Die Logik in Megaman ist, dass jedes Mal, wenn Megaman einen Boss besiegt, er die Macht dieses Bosses als neuen Schuss erhält. Ich werde versuchen, diese Logik neu zu erstellen. Dazu benötigen wir ein Array, das die Schüsse des Spielers enthält, einschließlich normaler Schüsse. Der Pseudocode lautet wie folgt:

two new variables

Wir müssen zwei neue Variablen im Auge behalten:

how to add an array to construct 2
So fügen Sie ein Array in Construct 2 hinzu
chapter 2 - function change bullet

Wir werden shotArr neue Elemente hinzufügen, wenn der Spieler einen Boss besiegt.


Aktualisieren der Player Bullets

Genau wie beim ShootThreeBullet() des Feindes können Sie kreativ sein und Ihre eigenen Schussvarianten erstellen. Da dies die Kugel des Helden ist, geben wir ihm etwas Besonderes.

Lassen Sie uns eine Art von Schuss machen, um gegen einen bestimmten Boss effektiv zu sein, damit er mehr Schaden verursacht. Zu diesem Zweck erstellen wir eine Variable für das Bullet-Objekt mit dem Namen strongAgainst, eine weitere Variable vom Typ String, die den Namen des Chefs enthält, gegen den dieses Bullet wirksam ist. Wir werden hinzufügen, dass dies mehr Schadensfunktionalität verursacht, wenn wir den Boss-Teil des Spiels besprechen.


Gesundheit und Tod

Hier beginnen alle Schussvariationen, die wir machen, wirklich eine Rolle zu spielen. Hier beschädigt und tötet unser Held den Feind und umgekehrt.

Lassen Sie uns zunächst eine Variable sowohl für den Helden als auch für das feindliche Objekt erstellen, die als Gesundheit bezeichnet wird und eine weitere Variable nur für den Helden namens Leben ist. Schauen wir uns den Pseudocode an:

Wir werden den gleichen Pseudocode für schädliche Feinde erstellen, wie folgt:

bullet collides with player and enemy
Umgang mit Kugelkollisionen zwischen Spieler und Feind

Die Health Bar GUI

Wenn ich es dabei belasse, wäre es nicht interessant. Also mache ich ein Rechteck-Sprite in der oberen linken Ecke des Bildschirms, das als Gesundheitsleiste unseres Helden fungiert.

Die Länge dieser Gesundheitsanzeige wird sich abhängig von der aktuellen Gesundheit unseres Helden ändern. Die Formel zum Ändern der Länge des Gesundheitsbalkens lautet wie folgt:

chapter 2 - health bar

Wir brauchen eine weitere Variable für unseren Helden namens maxHealth. Der volle Gesundheitswert unseres Helden. Im Moment kann dieser Wert nicht geändert werden, aber vielleicht können wir in Zukunft einen Gegenstand erstellen, der die Menge an maxHealth des Helden erhöht.


Erstellen Sie die Spielwelt

Nachdem wir unsere Helden-, Feind- und Schussvarianten erstellt haben, müssen wir mehrere Level und Bosse erstellen.

Mehrere Level zu haben bedeutet, dass der Spieler irgendwann im Spiel einen oder mehrere Kontrollpunkte erreicht, die das Spiel von Level 1-1 auf Level 1-2 auf Level 1-3 usw. umschalten, bis er den Boss erreicht.

Wenn der Spieler irgendwo in Level 1-2 stirbt, muss er nicht mehr vom Anfang von Level 1-1 zurückspielen. Wie mache ich das? Zuerst werden wir das Level erstellen, ich werde nicht viel über das Level-Design erklären, aber hier ist das Beispiel-Level in Construct 2.

sample level design
Sample Level Design

Das Bild in der oberen linken Ecke ist die HUD-Ebene. Es wird gescrollt und folgt dem Helden, wenn das Spiel gespielt wird.


Türen und Kontrollpunkte

Ein Sprite, auf das Sie achten sollten, ist das grüne Sprite im oberen rechten Teil des Levels. Es ist der Kontrollpunkt in diesem Level, wenn der Held damit kollidiert. Wir werden das Spiel auf Level 1-2 übertragen.

Um mehrere Ebenen verarbeiten zu können, benötigen wir drei Variablen: currentLevel, levelName und nextLevel.

Die Variable currentLevel wird im Heldenobjekt / in der Heldenklasse erstellt. Der Levelname wird im Objekt der Spielszene (Level) für jedes Level erstellt. Die Variable nextLevel wird im grünen Sprite-Objekt erstellt.

Die Logik lautet wie folgt: Wenn der Held mit dem grünen Sprite kollidiert (ich nenne es greenDoor), ändern wir unser Level in die Spielszene, in der levelName mit der nextLevel-Variablen identisch ist. Nachdem wir das Level geändert haben, ändern wir den Wert der currentLevel-Variablen des Helden auf den gleichen Wert wie den levelName der Spielszene. Hier ist der Pseudocode:

change level when touches green door
Ändern Sie die Ebenen, wenn wir die grüne Tür berühren

Ein neues Level initialisieren

Hier ist der Pseudocode, mit dem Sie umgehen können, wenn das nächste Level geladen und spielbereit ist.

chapter 3 - start of layout

Die Startpositionen des Spielers

Nachdem wir auf ein neues Level gewechselt sind, werde ich das orangefarbene Sprite hinter unserem Helden im obigen Level-Design-Bild erklären. Dieses orangefarbene Sprite ist ein Objekt, das ich startPos nenne. Es wird verwendet, um die Startposition jedes Levels zu markieren.

Wir beziehen uns auf dieses Objekt, als der Held gerade das Level geändert hat oder gestorben ist, damit wir wissen, wo wir ihn hervorbringen müssen.

Hier ist der Pseudocode für die Behandlung, wenn der Held stirbt:

Jetzt können wir mehrere Level haben und den Helden auch nach seinem Tod wieder erscheinen lassen.

Sie können so viele Level erstellen, wie Sie möchten, oder sogar zwei greenDoor-Objekte in einem Level erstellen, von denen eines auf Level 1-1 zurückgeht, wenn der Spieler ein Rätsel falsch löst.


Bosskämpfe

Es ist endlich Zeit, den Chef selbst zu implementieren. Ein Boss-Level zu erreichen ist so einfach wie ein anderes Level zu machen, das einen Boss anstelle von regulären Feinden hervorbringt.

Der schwierige Teil ist das Erstellen einer KI für den Boss, da jeder Boss eine einzigartige KI hat. Um es vielen Bossen leicht zu machen, sie zu verstehen und zu duplizieren, werde ich die KI des Chefs von der Zeit abhängig machen, nachdem sie erzeugt wurden. Was bedeutet, dass sie x Sekunden lang A ausführen, dann y Sekunden lang zu B und dann z Sekunden lang C ausführen, bevor sie zu A zurückkehren. Der Pseudocode sieht ungefähr so aus:

chapter 3 - boss AI

Die Definition der Boss-Schussfunktionen ist unten. Fühlen Sie sich frei, es zu ändern, um zu passen, was Sie für einen Bosskampf wollen:

Es liegt an Ihnen, der Routine des Chefs Schussvariationen hinzuzufügen. Die vom feindlichen Objekt des Bosses verwendeten Variablen sind dieselben wie die des feindlichen Objekts, außer dass die Bosse die Variablen feindAI und shotAI nicht verwenden, da beide abhängig von der verstrichenen Zeit im obigen if-Block behandelt werden.

Boss-Feinde haben auch eine Variable, die feindliche Objekte nicht haben. Es heißt RewardShot, eine Zeichenfolge. Diese Variable enthält den Namen eines Boss-Schusses, den der Spieler erhält, nachdem er den Boss besiegt hat (die in der Array-Variable shotArr).

Auf diese Weise kann der Spieler den Boss-Angriff wie zuvor erläutert "lernen". Um diesen Schuss-Typ zum Array der Spieler-Schüsse hinzuzufügen, müssen wir nach dem Tod des Feindes den folgenden Code hinzufügen:

Um zusätzliche Aufzählungszeichen für Ihre Spieler zu implementieren, müssen Sie lediglich den entsprechenden Code für jede Belohnung hinzufügen, die Sie erstellt haben, genau wie zuvor.


Herzliche Glückwünsche!

Sie haben mein Tutorial zum Erstellen eines Megaman-ähnlichen Metroidvania-Plattformspiels in Construct 2 abgeschlossen. Der Rest baut Ihr Spiel nur auf dem auf, was Sie hier gelernt haben, um es zu Ihrem eigenen zu machen. Füge mehr Feindtypen, mehr Levels, Powerups und mehr hinzu. Viel Glück und hab Spaß.

Advertisement
Advertisement
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.