Tutorial 1

Ziele:

  • Ein erstes Spiel implementieren
  • Arcade physics kennenlernen
  • Mit einer Tilemap arbeiten

Links

Responsive image

BMMP Racing

Es soll ein kleines Rennspiel entwickelt werden. Auf einer Rennstrecke soll ein Rennwagen fahren, der sich mit den Pfeiltasten steuern lässt. Kommt das Fahrzeug von der Strecke ab, wird es wieder auf die Startposition gesetzt. Zusätzlich soll eine Handbremsenfunktion modelliert werden, mit deren Hilfe man mit dem Fahrzeug schlittern kann.
Optional: Implementieren Sie eine einfachen Spiellogik so dass immer fünf Runden gefahren werden müssen und dabei die gefahrene Zeit gemessen wird. Der Spielfortschritt soll dabei immer ersichtlich sein. Weiterhin soll bei Betätigung der Handbremse Staub aufgewirbelt werden - versuchen sie dies durch einen Partikeleffekt zu realisieren.

Die Renstrecke mit Tilemaps anzeigen

Laden Sie innerhalb der Funktion preload() die Tilemap (tiles.json) und das dazugehörige Bild tiles.png. Zeigen Sie die Strecke innerhalb der create()-Funktion an.
Benötigte Methoden: game.load.tilemap(), game.load.image(), game.add.tilemap()tilemap.addTilesetImage()tilemap.createLayer() layer.resizeWorld()

Das Auto einbinden

Binden Sie die Datei car.js in ihre HTML-Datei ein und laden Sie das entsprechende Bild in der preload()-Methode.
Erzeugen Sie innerhalb der create()-Methode eine Instanz des Autos und zeigen Sie es an.
Benötigte Methoden: game.load.image(), game.add.existing()

Keyboardsteuerung

Implementieren Sie eine Keyboardsteuerung. Die Pfeiltasten sollen auf die entsprechenden Funktionen des Autos (accel, brake, steerLeft, steerRight) gemappt werden und die Leertaste die Handbremse steuern.
Benötigte Methoden: game.input.keyboard.addKeyCapture(), game.input.keyboard.addKey(), game.input.keyboard.createCursorKeys()

Physik und Autosteuerung

Phaser hat verschiedene Physik-Engines eingebaut. Mit game.physics.startSystem(Phaser.Physics.ARCADE) können Sie eine einfache Physik-Engine aktivieren. Dann können Sie Spielelemente (z.B. Bilder) als Körper in der Physikwelt aktivieren. Beim Auto ist dies bereits der Fall. Vervollständigen Sie die Fahrfunktionen des Autos.

Kollisionen

Die Tilemap stellt zudem Methoden bereit, mit deren Hilfe festgelegt werden kann, mit welchen Tiles eine Kollision stattfindet. Erkennen Sie mithilfe der Physik-Engine, wenn das Auto die Strecke verlässt.
Benötigte Methoden:game.physics.arcade.overlap()tilemap.setCollision()