Moin Moin,
in der letzten Zeit habe ich mich etwas mit Javascript Gameengines beschäftigt. Ich habe viele Engines ausprobiert, doch letztendlich hat mich das Konzept und die Einfachheit von der Engine „Phaser“ überzeugt.
Phaser ist OpenSource und bietet von Haus aus viele Funktionalitäten zur Spieleprogrammierung. Dazu gehören mehrere PhysicEngines (arcade, p2, ninja), Sprites, Animationen, Sound, ein Partikelsystem, Kollisionserkennung, Eingabeerkennung (Cursor, Touch, Controller) und vieles mehr.
In diesem Beitrag möchte ich euch ein einfaches „Hello World“ mit Phaser zeigen. Ich möchte zeigen, welches Konzept hinter Phaser steckt und wie man Sprites auf eine Bühne (Canvas) zeichnen kann. Anschließend soll das Sprite per Cursor-Tasten bewegt werden können.
Los geht’s.
Zuert müssen wir eine Gameinstanz erzeugen. Zur Initialisierung geben wir die gewünschte Breite und Höhe des Spiels an. Außerdem sagen wir der Engine, dass unser Spiel in einem Canvas-Element gerendert werden soll. Der letzte Parameter beinhaltet die Id des HTML-Elements, in welchem das Canvas Element erscheinen soll (optional).
var GAMEWIDTH = 400; var GAMEHEIGHT = 400; var game = new Phaser.Game(GAMEWIDTH, GAMEHEIGHT, Phaser.CANVAS, 'stage');
Bereits an dieser Stelle, solltet ihr das Canvas-Element innerhalb eures DOMs sehen.
In Phaser gibt es ein einfaches Zustandsmodell. Ein Spiel besteht meistens aus mehreren Zuständen (ein Menü, Highscore-Ansicht, das Spiel an sich, usw.).
Während des Spiels, kann man von Zustand zu Zustand wechseln (bspw. vom Menü zum Spiel).
Ein Zustand besitzt im Wesentlichen drei unterschiedliche Funktionen, welche nacheinander ausgeführt werden.
1. Funktion „preload“
Innerhalb dieser Funktion können Assests wie Sprites, Texturen, Tilemaps usw. für die weitere Verwendung innerhalb des jeweiligen Zustandes vorgeladen werden.
2. Funktion „create“
In dieser Funktion können zuvor geladene Assests auf die Bühne gezeichnet werden. Außerdem lässt sich hier die eigentliche Spiellogik initialisieren (Physik, Gegner/Spielfigur platzieren, Eingaben aktivieren, …)
3. Funktion „update“
Diese Funktion wird in jedem Frame aufgerufen. Sie stellt den eigentlich Gameloop dar. Es können Eingaben abgefragt werden, Kollisionen geprüft werden, Bewegungen vorgenommen werden usw.
Der Grundaufbau eines Zustandes (states) sieht dann so aus.
Game.Main.prototype =
{
preload : function()
{},
create : function()
{},
update : function()
{}
};
Um Assets vorzuladen, genügt die folgende Funktion innerhalb der Preload-Funktion.
this.game.load.image('hero', 'assets/hero.png');
Über den Key „hero“ lässt sich dieses Bild später ansprechen.
this.game.add.sprite(100, 100, 'hero');
Die ersten beiden Parameter der Funktion beinhalten die X- und Y-Position des Sprites, der 3. Parameter ist der Key des jeweiligen Assets.
Damit man das Sprite mit den Cursor-Tasten bewegen kann, muss die Funktion „createCursorKeys“ aufgerufen werden.
this.cursors = this.game.input.keyboard.createCursorKeys();
Die Abfrage, ob eine Taste gedrückt wurde, wird in der Update-Funktion geprüft.
if (this.cursors.up.isDown)
{
this.hero.y -= 1;
}
if (this.cursors.down.isDown)
{
this.hero.y += 1;
}
Um einen Zustand (state) laden zu können, muss man diesem zunächst einmal zu der Game-Instanz hinzufügen.
game.state.add('Main', Game.Main);
game.state.start('Main');
Das Ergebnis könnt ihr hier testen (auf die Figur klicken und per Cursor bewegen):
Die komplette Implementation sehr ihr hier: Tutorial Teil 1
Viele nützliche Beispiele findet man hier.
Im nächsten Teil werde ich etwas über die Kollisionserkennung und zur Physik schreiben.