Erwecken Sie Ihre Charaktere in Phaser zum Leben
Das Hinzufügen von Spielanimationen ist in Phaser einfach. Animation erweckt Videospielfiguren zum Leben. Eine Möglichkeit, Animationen in Ihr Spiel zu integrieren, besteht darin, die Bewegungen Ihres Charakters zu animieren. Sie können ihnen sogar eine Leerlaufanimation geben, die ausgeführt wird, wenn sich der Player überhaupt nicht bewegt. Dies verleiht Ihren Charakteren mehr Persönlichkeit.
Spiel-Setup
Sie benötigen ein grundlegendes Verständnis von Phaser, um mit Animationen arbeiten zu können. Wenn Sie mit Phaser nicht vertraut sind, beginnen Sie mit einem grundlegenden Spiel-Tutorial, bevor Sie fortfahren. Dieses Tutorial baut auf diesen Grundlagen auf.
Erstellen Sie zunächst ein Spiel mit einem beweglichen Charakter. In unserem Beispiel beginnen wir mit einem Block, der mit den Pfeiltasten verschoben wird. Unten ist der Startcode:
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF ,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create,
update: update
}
};
var gamePiece;
var keyInputs;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}Dieser Code erstellt eine Spielfigur, die sich auf einem blauen Hintergrund bewegen kann. Der Einfachheit halber wird im Beispiel nur ein orangefarbener Block für den Spielcharakter verwendet. Es sieht aus wie das:
Erstellen eines Sprite-Blattes
Der erste Schritt ist das Erstellen der Animation. Es gibt viele Möglichkeiten, Animationen zu erstellen, aber das geht über das hinaus, was wir hier behandeln können. Für unsere Zwecke ist es nur wichtig, dass Sie Ihre Animation als Sprite Sheet speichern.
Ein Sprite-Blatt ist eine einzelne Bilddatei, die eine Reihe von Animationsrahmen enthält. Jedes Bild in der Animation wird neben dem folgenden platziert. Jeder Rahmen muss die gleiche Größe haben. Animationsprogramme schneiden das Bild basierend auf den Abmessungen eines einzelnen Frames in einzelne Frames auf.
Die Bilder werden in einem Array gespeichert. Wie bei allen Arrays bedeutet dies, dass sich das erste Bild in der Nullposition befindet. Im obigen Beispiel beginnt die Abwärtsanimation also bei Null und endet bei Drei. Die linke Animation beginnt um vier und endet um sieben.
Hinzufügen eines Spritesheets zu Phaser
Das Laden eines Sprite-Blatts ähnelt dem Laden eines Bildes in Phaser. Ihr Programm benötigt jedoch etwas mehr Informationen über die Bilddatei. Zuvor haben wir unser Bild mit folgendem Text geladen:
this.load.image('gamePiece', 'img/gamePiece.png');Sprite-Blätter benötigen jedoch einige weitere Parameter. Wir müssen auch die Abmessungen eines Rahmens angeben. Um ein Sprite-Blatt zu laden, müssen wir den Code wie folgt anpassen:
this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
frameWidth: 60,
frameHeight: 60
});Der Code ist sehr ähnlich. Der große Unterschied besteht darin, dass wir einen dritten Parameter hinzugefügt haben, der die Breite und Höhe unserer Animationsrahmen angibt. In diesem Fall sind die Frames 60 x 60 Pixel groß.
In diesem Beispiel wird ein einfaches Sprite-Blatt verwendet. Wir haben dem Spiel-Sprite einen Pfeil und blinkende Anzeigen hinzugefügt. Der Pfeil zeigt in die Richtung, in die sich unser Sprite bewegt, wenn eine Anzeige in diese Richtung blinkt. Wenn sich der Charakter nicht bewegt, durchläuft die Animation alle Bilder.
Animationen erstellen
Bevor wir unseren Charakter animieren können, müssen wir die Animation erstellen. Wir haben das Sprite-Sheet bereits hochgeladen, jetzt müssen wir sagen, welche Frames in einer Animation enthalten sind. Fügen Sie der Erstellungsfunktion den folgenden Code hinzu, um eine Animation zu erstellen:
this.anims.create({
key: "up",
frameRate: 2,
frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}),
repeat: -1
});Oben ist die Animation für die Aufwärtsrichtung .
- Das Schlüsselwort anims steht für Animationen. Frühere Versionen verwendeten die vollständigen Keyword- Animationen , aber die aktuelle Version verwendet diese Verknüpfung.
- Der Schlüssel ist der Name der Animation. Mit der Taste rufen Sie die Animation auf.
- FrameRate steuert, wie viele Frames in einer Sekunde angezeigt werden. Dieses Beispiel hat nur zwei Bilder pro Sekunde.
- Die nächste Zeile zeigt an, welche Bilder und Frames in der Animation verwendet werden. Die Up-Animation verwendet das gamePiece- Bild und beginnt bei Bild 0 und endet bei Bild 2.
- Wenn die Animation kontinuierlich wiederholt werden soll, setzen Sie die Wiederholung auf -1. Andernfalls können Sie eingeben, wie oft die Animation wiederholt werden soll, bevor Sie anhalten.
Sie müssen für jede Richtung und den Ruhezustand eine Animation erstellen.
So animieren Sie Ihren Charakter
Es ist ziemlich einfach, einem Charakter eine Animation hinzuzufügen. Der schwierige Teil ist der Übergang zwischen Animationen. Sie können eine Startanimation in der Erstellungsfunktion festlegen.
gamePiece = this.add.sprite(270, 450, 'gamePiece');
gamePiece.anims.play("spin");Die erste Zeile erstellt den Player. Es ist dasselbe wie das Erstellen eines Sprites mit einem einzelnen Bild wie zuvor. Die zweite Zeile setzt die Animation zu drehen. Spin ist eine Leerlaufanimation, die alle Frames von null bis elf durchläuft.
Wenn Sie Ihr Spiel neu laden, wird die Leerlaufanimation abgespielt. Sie werden jedoch feststellen, dass es auch nach dem Bewegen Ihres Charakters weiter spielt. Das Einrichten der Animationen basierend auf Bewegung ist etwas schwieriger.
Die Versuchung besteht darin, die Animation zu ändern, wenn der Spieler die Taste drückt, wie wir es getan haben, um die Bewegung einzustellen. Das Problem bei diesem Ansatz ist, dass wir prüfen, ob der Player eine Taste in der Update-Funktion drückt. Die Update-Funktion führt jeden Frame aus. Wenn wir dort eine Animation einfügen, wird die Animation in jedem Frame neu gestartet, in dem der Player die Taste drückt.
Um dies zu lösen, müssen wir eine andere Methode verwenden. Anstatt zu überprüfen, ob ein Schlüssel " Down" ist , möchten wir wissen, ob ein Schlüssel " JustDown" ist . JustDown ist nur wahr, wenn die Taste zum ersten Mal gedrückt wird. Wenn die Taste gedrückt gehalten wird, ist dies nicht der Fall. Wenn wir die Animation mit JustDown einstellen, wird die Animation nicht jedes Bild zurücksetzen.
Sie müssen eine Variable für die Schlüsseleingabe erstellen, die Sie in der Erstellungsfunktion überwachen möchten:
leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);Anschließend möchten Sie überprüfen, ob die Taste in der Aktualisierungsfunktion gedrückt wurde:
if(Phaser.Input.Keyboard.JustDown(upKey)){
gamePiece.anims.play("up");
}Jetzt wechselt das Spiel zur Up-Animation, sobald die Up-Taste zum ersten Mal gedrückt wird. Sie müssen für jeden Richtungsschlüssel eine ähnliche if-Anweisung schreiben.
Wir müssen noch eine letzte Änderung vornehmen. Wenn der Player gerade aufhört, eine Taste zu drücken, wird die letzte Animation weiter abgespielt. Wir möchten, dass es zu unserer Leerlaufanimation zurückkehrt. Dazu verwenden wir die JustUp- Methode. Ähnlich wie bei JustDown wird es ausgelöst , wenn der Spieler einen Schlüssel loslässt.
if(Phaser.Input.Keyboard.JustUp(upKey)){
gamePiece.anims.play("spin");
}Sobald der Player aufhört, die Aufwärts-Taste zu drücken, wird die Animation auf unsere Leerlauf-Spin-Animation zurückgesetzt. Sie müssen für jede Richtungstaste eine ähnliche Anweisung schreiben.
Um den endgültigen Code zu sehen, gehen Sie zu Pastebin .
Nächster Schritt: Erstellen Sie Ihre eigene Animation
Das Erstellen von Animationen in Phaser unterscheidet sich nicht wesentlich von der Verwendung eines statischen Bildes. Aber es wird Ihre Spieleentwicklung auf das nächste Level bringen! Phaser erleichtert das Hinzufügen von Animationen, sodass Sie sich auf den schwierigen Teil konzentrieren können: das Erstellen der Animation!
Vergessen Sie beim Erstellen Ihres eigenen Sprite-Blatts nicht die folgenden Hinweise:
- Die Animationsrahmen müssen alle die gleichen Abmessungen haben
- Die Frames werden in einem Array gespeichert, das bei Null beginnt
- Animationen erfordern oft andere Auslöser als die Auslöser, die die Bewegung einstellen.