Phaser 015 – Scrolling Background, Kamera

Bewegung ist das Salz in der Game-Suppe. Zu dem Bereich Bewegung kann auch das Thema Kamera gehören. Hier wird eine Kamera einem Jet folgen, wodurch der Eindruck erweckt wird, dass sich der Hintergrund bewegt.

Beispiel

Bitte Spielfeld anklicken und Pfeiltasten zum steuern verwenden.

Wie funktionierts?

Man nimmt eine Grafik für den Hintergrund, die zum Beispiel dreimal so hoch und doppelt so breit ist wie das Spielfeld.

Die sichtbare Größe ist natürlich nur über die festgelegte Spielfeldbereich festgelegt. Der Rest des Hintergrundes liegt nun solange unsichtbar verdeckt hinter diesem Sichtfeld (Spielfeldgröße), bis man mit dem Jet hinein gleitet.

Es bewegt sich nicht das Spielfeld, oder der Hintergrund, sondern die Kamera die dem Jet folgt.

Hier kann man sich die main.js für dieses Beispiel fertig herunterladen.

Das Script

Das sichtbare Spielfeld ist 260 x 320 Pixel groß. Dreimal so hoch und doppelt so breit ist das Hintergrundbild. Das macht: 260 x 3 = 780 in der Höhe und 320 x 2 = 640 in der Breite.

Jetzt muss man dem Script mitteilen, wie man diesen Rest sichtbar machen kann, sobald sich der Jet in eine Richtung bewegt (links, rechts, oben, unten) bewegt.

 

Die Zeile game.world.setBounds(0, 0, 780, 640); grenzt die Spielfigur ein, indem sie an den Rand stößt. Wie festhgelegt ist das sichtbare Spielfeld zwar nur 260 x 320 Pixel groß, aber die Bounds (Boundaries = Grenzen/Abgrenzungen) werden auf 780 x 640 gesetzt. So groß wie das Hintergrundbild.

Mit game.camera.follow(jet); wird eine unsichtbare Kamera platziert, die in diesem Fall dem Jet folgt. Und zwar so lange, bis 780×640 Pixel erreicht sind.

Letztendlich ist noch eine weitere neue Funktion hinzugekommen, die function render () Da steht zwar sonst nichts drin zur Zeit, dient aber zur Darstellung des Bildes.

Script – Copy & Paste

 

Das könnte Dich auch interessieren …

Translate »