Erstellen Sie ein von Megaman inspiriertes Spiel in Construct 2

() translation by (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.

zusammenhängende Posts

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.

Held (von Redshrike):
http://opengameart.org/content/xeon-ultimate-smash-friends
Feind (auch von Redshrike):
http://opengameart.org/content/fighting-robot-for-ultimate-smash-friends
Fliesen (von robotality):
http://opengameart.org/content/prototyping-2d-pixelart-tilesets

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.

number moveSpeed = 50;

function update()
{
 moveHero();
}

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

function moveHero()
{
 // player is pressing this key down
 if (keyDown(KEY_LEFT))
 {
 hero.x -= moveSpeed * deltaTime;
 hero.animate("walkLeft");
 }

if (keyDown(KEY_RIGHT))
 {
 hero.x += moveSpeed * deltaTime;
 hero.animate("walkRight");
 }

if (keyDown(KEY_UP))
 {
 hero.jump();
 hero.animate("jump");
 }

// a key that was just unpressed
 if (keyReleased(KEY_LEFT))
 {
 hero.animate("standLeft");
 }

if (keyReleased(KEY_RIGHT))
 {
 hero.animate("standRight");
 }
}

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.

Function jump()
{
 if (!isJumping && !isFalling)
 {
 isJumping = True
 }
}

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.

If (isJumping || isFalling)
{
 hero.y += hero.jumpPower;
 hero.jumpPower += hero.gravity;
}

// eventually jump power will be greater than zero, and that means the hero is falling

if (hero.jumpPower >= 0)
{
 isJumping = False;
 isFalling = True;
}

// to make a stop to the fall, do something when the hero overlaps the platform

if (hero.isOverlapping(platform1))
{
 // platform1 is the platform that our hero can step on
 // resets the variable to their default value
 isJumping = False;
 isFalling = False;
 hero.jumpPower = -20;
}

// and then there's the free fall, when player falls over the edge of a platform
if (!hero.isOverlapping(platform1) && hero.jumpPower < 0 && !isJumping)
{
 // !hero.isOverlapping(platform1) checks whether or not our hero is standing on a platform
 // and if jumpPower is less than zero and the player is not currently jumping, then that means
 // he's falling

// setting these two values like this will make the player fall.
 hero.jumpPower = 0;
 isFalling = true;
}

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.

String facing = "right"; // which direction the hero is currently facing
function moveHero()
{
 // player is pressing this key down
 if (keyDown(KEY_LEFT))
 {
 hero.x -= moveSpeed * deltaTime;
 hero.animate("walkLeft");

 facing = "left";
 }

if (keyDown(KEY_RIGHT))
 {
 hero.x += moveSpeed * deltaTime;
 hero.animate("walkRight");

facing = "right";
 }

// ... the continuation of moveHero() function goes here
}

function update()
{
 // ...the update code that we previously wrote goes here...

// player press this key once
 if (keyPressed(KEY_Z))
 {
 if (facing == "right")
 {
 hero.animate("Shoot");

// we will add shooting function here later
 }
 else if (facing == "left")
 {
 hero.animate("Shoot");
 hero.mirrorSprite(); // this function flips the sprite horizontally
 }
 }

if (keyReleased(KEY_Z))
 {
 if (facing == "right")
 {
 hero.animate("standRight");
 }
 else if (facing == "left")
 {
 hero.animate("standLeft");
 hero.mirrorSprite(); // we need to call this again because the sprite was mirrored
 // if we don't mirror the sprite again, standLeft will look like standRight
 }
 }
}

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.

// first, we create a function that creates a new bullet
Function shoot(string pathToSprite, number bulletPower, number bulletSpeed, number bulletAngle)
{
 myBullet = new Bullet(pathToSprite);
 myBullet.power = bulletPower;

// the bullet class or object has two private variables that moves it according to its angle
 // more explanation to these two lines need more math, so I choose not to explain
 // I assume your engine of choice have a way to move an object according to its angle
 ySpeed = Math.sin(bulletAngle) * bulletSpeed;
 xSpeed = Math.cos(bulletAngle) * bulletSpeed;
}

// this is Bullet class' function that's called every frame, this moves the bullet according to its angle
function moveBullet()
{
 x += xSpeed * deltaTime;
 y += ySpeed * deltaTime;
}

// and this is the modification to our previous update() function
function update()
{
 // ...the update code that we previously wrote goes here...

// player press this key once
 if (keyPressed(KEY_Z))
 {
 if (facing == "right")
 {
 hero.animate("Shoot");
 hero.shoot("path/to/sprite.png", 10, 400, 0);

}
 else if (facing == "left")
 {
 hero.animate("Shoot");
 hero.mirrorSprite(); // this function flips the sprite horizontally
 hero.shoot("path/to/sprite.png", 10, 400, 180); // the angle is 180 so that the bullet goes left
 }
 }

// .. the continuation of update code goes here...
}

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:

// player just released z key
if (keyReleased(KEY_Z))
{
 if (chargedTime > 0 && chargedTime <= 5)
 {
 if (facing == "right")
 {
 hero.animate("Shoot");
 hero.shoot("path/to/halfChargedBullet.png", 20, 400, 0);
 chargedTime = 0;

}
 else if (facing == "left")
 {
 hero.animate("Shoot");
 hero.mirrorSprite(); // this function flips the sprite horizontally
 hero.shoot("path/to/halfChargedBullet.png", 20, 400, 180);
 chargedTime = 0;

}
 }
 else if (chargedTime > 5)
 {
 if (facing == "right")
 {
 hero.animate("Shoot");
 hero.shoot("path/to/fullChargedBullet.png", 40, 400, 0);
 chargedTime = 0;

}
 else if (facing == "left")
 {
 hero.animate("Shoot");
 hero.mirrorSprite(); // this function flips the sprite horizontally
 hero.shoot("path/to/fullChargedBullet.png", 40, 400, 180);
 chargedTime = 0;

}
 }

if (facing == "right")
 {
 hero.animate("standRight");
 }
 else if (facing == "left")
 {
 hero.animate("standLeft");
 hero.mirrorSprite(); // we need to call this again because the sprite was mirrored
 // if we don't mirror the sprite again, standLeft will look like standRight
 }
}

// player is pressing this key down
if (keyDown(KEY_Z))
{
 // this is the function that adds the value of chargedTime every second
 // this keyDown block of code will be run every frame, which is less than a second
 // your engine of choice should have a way to tell whether a second has passed or not
 addChargedTime();
}

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:

function boolean checkSees()
{
 if (facing == "left" && hero.x >= enemy.x -- range)
 {
 return true;
 }

if (facing == "right" && hero.x <= enemy.x + range)
 {
 return true;
 }

return false;
}

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:

// can be in update() or somewhere else that's executed every frame
function update()
{
 if (checkSees())
 {
 shoot("path/to/bulletSprite.png", enemyPower, 400, shotAngle);
 }
}

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:

function switchingAI()
{
 // elapsedTime() is a function that counts how many seconds has passed since its value is reset
 // I assume your engine of choice have this kind of functionality
 if (elapsedTime() > 4.0)
 {
 if (facing == "left")
 {
 facing = "right";
 shotAngle = 0;
 }

if (facing == "right")
 {
 facing = "left";
 shotAngle = 180;
 }

enemy.mirrorSprite(); // also flip the sprite horizontally
 resetTime(); // resets the time that counts in elapsedTime()
 }
}

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:

function patrollingAI()
{
 if (facing == "right")
 {
 walkRight(); // the same as the one in player object / class

if (collidesWith(rightPatrolBorder))
 {
 facing = "left";
 enemy.mirrorSprite();
 }
 }

 if (facing == "left")
 {
 walkLeft();

if (collidesWith(leftPatrolBorder))
 {
 facing = "right";
 enemy.mirrorSprite();
 }
 }
}

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:

if (enemyAI == "switching")
{
 switchingAI();
}
else if (enemyAI == "patrolling")
{
 patrollingAI();
}

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:

// can be in update() or somewhere else that's executed every frame
function update()
{
 if (checkSees())
 {
 if (shotAI == "simple")
 {
 shoot("path/to/bulletSprite.png", enemyPower, 400, shotAngle);
 }

if (shotAI == "threeBullets")
 {
 shootThreeBullets();
 }
 }
}

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.

Function shootThreeBullets()
{
 if (facing == "right")
 {
 shoot("path/to/bulletSprite.png", enemyPower, 400, 0); // this bullet goes straight to the right
 shoot("path/to/bulletSprite.png", enemyPower, 400, 330); // this goes up by 30 degrees
 shoot("path/to/bulletSprite.png", enemyPower, 400, 30); // this goes down by 30 degrees
 }

if (facing == "left")
 {
 shoot("path/to/bulletSprite.png", enemyPower, 400, 180); // this bullet goes straight to the left
 shoot("path/to/bulletSprite.png", enemyPower, 400, 210); // this goes up by 30 degrees
 shoot("path/to/bulletSprite.png", enemyPower, 400, 150); // this goes down by 30 degrees
 }
}

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:

var shotArr = ["normalShot", "boss1", "boss2"];
var shotIndex = 0;
var selectedShot = "normalShot";

function update()
{
 // this is the block of code in player's update function where the player shoots a bullet

// this function changes the bullet that the player shoots
 changeBullet();

// player press this key once
 if (keyPressed(KEY_Z))
 {
 if (facing == "right")
 {
 hero.animate("Shoot");
 if ( selectedShot == "normalShot")
 {
 hero.shoot("path/to/sprite.png", 10, 400, 0);
 }
 else if ( selectedShot == "boss1")
 {
 // add codes to shoot the kind of shot that the player received after defeating boss 1
 }
 }
 }
}

function changeBullet()
{
 // changes shotIndex based on button pressed
 if (keyPressed(KEY_E))
 {
 shotIndex += 1;
 }

if (keyPressed(KEY_Q))
 {
 shotIndex -= 1;
 }

// fix shotIndex if it's out of array's length
 if (shotIndex == shotArr.length)
 {
 shotIndex = 0;
 }

if (shotIndex < 0)
 {
 shotIndex = shotArr.length -- 1;
 }

selectedShot = shotArr[shotIndex];
}

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

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:

if (bullet.collidesWith(hero))
{
 hero.health -= bullet.power;
 createExplosion(); // for now we don't have an explosion sprite, so this will act as a reminder
}

// check if the hero is dead
if (hero.health <= 0)
{
 hero.lives -= 1; // decreases hero's total number of lives.
 destroyHero();
}

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

if (bullet.collidesWith(enemy))
{
 enemy.health -= bullet.power;
 createExplosion();
}

if (enemy.health <= 0)
{
 destroyEnemy();
}

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:

1	// this is in the update function
2	healthBar.width = (hero.health / hero.maxHealth) * 100;

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:

// this is inside game's update function
if (hero.collidesWith(greenDoor))
{
 changeLevelTo(greenDoor.nextLevel);
}

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.

// this is the function that's triggered when the new level is loaded
function onStart()
{
 hero.currentLevel = scene.LevelName;
 hero.x = startPos.x;
 hero.y = startPos.y;
}

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:

// the function that's triggered when the hero is destroyed
Function onDestroyed()
{
 // revives hero if the hero still have lives.
 If (hero.lives > 0)
 {
 var newHero = new Hero();
 newHero.x = startPos.x;
 newHero.y = startPos.y;
 }
}

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:

// this code is inside the boss update function, so it's executed every frame
if (elapsedTime() > 2.0)
{
 // this if block is executed for 3 seconds, because the difference in time with the if block below
 // is three seconds.
 BossShot1(); // shot variation to be executed this time
}
else if (elapsedTime() > 5.0)
{
 bossShot2();
}
else if (elapsedTime() > 6.0)
{
 bossShot3();
}

if (elapsedTime() > 7.0)
{
 // reset the time so the boss executes the first action again
 resetsTime();
}

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:

function bossShot1()
{
 // a simple straight shot
 bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, shotAngle); // shotAngle is 180
}

function bossShot2()
{
 // a three direction bullets shot
 bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, shotAngle);
 bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, shotAngle + 30);
 bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, shotAngle - 30);
}

function bossShot3()
{
 // for this one, I'm going to make a circle shot, so the bullets will form a circle
 for (var i = 0; i <= 9; i++)
 {
 bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, 36 * i); // change the shotAngle
 }
}

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:

function bossShot1()
{
    // a simple straight shot
    bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, shotAngle); // shotAngle is 180
}

function bossShot2()
{
    // a three direction bullets shot
    bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, shotAngle);
    bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, shotAngle + 30);
    bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, shotAngle - 30);
}

function bossShot3()
{
    // for this one, I'm going to make a circle shot, so the bullets will form a circle
    for (var i = 0; i <= 9; i++)
    {
        bossEnemy.shoot("path/to/bullet/sprite.png", bossPower, 400, 36 * i); // change the shotAngle
    }
}

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