Tutorial 1
Ziele:
- HTML- sowie CSS-Kenntnisse auffrischen
- Die HTML5-Spieleengine Phaser kennenlernen
- Multimediainhalte laden und anzeigen
Links
Vorhang auf, Bühne frei!
- Laden Sie Phaser von der oben angebenen Webseite herunter.
- Erstellen Sie eine HTML-Datei, binden Sie die Datei phaser.min.js und das folgende Skript ein und fügen sie ein
div-Element mit der id bmmp hinzu.
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
}
function create() {
}
function update() {
}
Ein Hintergrundbild anzeigen
Laden Sie innerhalb der Funktion preload() die Datei background.png und zeigen Sie das Bild in der Funktion create() im Spiel an.
Benötigte Methoden:
Benötigte Methoden:
game.load.image(), game.add.sprite()
Eine Animation abspielen
Laden Sie wieder innerhalb der Funktion preload() das Spritesheet sprite.png. Fügen Sie das Spritesheet in der Funktion create() dem Spiel hinzu. Erstellen und starten Sie eine Animation mit dem Namen walk, die mit 10 fps im Loop abläuft.
Benötigte Methoden:
Benötigte Methoden:
game.load.spritesheet(), game.add.sprite(), sprite.animations.add(), sprite.animations.play()
Ein TileSprite einfügen
Laden Sie innerhalb der Funktion preload() das Bild ground.png. Das Bild soll als sogenanntes TileSprite in einer Endlosschleife nach links scrollen.
Benötigte Methoden:
Benötigte Methoden:
game.load.image(), game.add.tileSprite(), sprite.autoScroll()
Einen Bewegungstween erstellen
Die Figur soll nun vom linken Bildrand langsam bis zum rechten Bildrand laufen. Sobald die Figur rechts aus dem Bild verschwunden ist, soll sie links wieder ins Bild laufen.
Benötigte Methoden:
Benötigte Methoden:
game.add.tween()
Sound abspielen
Suchen Sie im Internet (z.B. auf www.freesound.org) ein Geräsch, das zur Szene passt und spielen Sie es in der Szene ab.
Benötigte Methoden:
Benötigte Methoden:
game.load.audio(), game.add.audio(), sound.play()
Layout mit CSS
Verschönern Sie das gesamte HTML-Dokument. Informieren Sie sich auch über die Funktionen von CSS3, die zum Teil schon in den gä Browsern implementiert sind.