Tutorial 1

Ziele:

  • HTML- sowie CSS-Kenntnisse auffrischen
  • Die HTML5-Spieleengine Phaser kennenlernen
  • Multimediainhalte laden und anzeigen

Links

Responsive image

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