Phaser 008 – Mehrere Bilder laden

Was bei Phaser mit einem Bild funktioniert, funktioniert auch mit zwei, drei und vielen Bildern. Im Beispiel wird das Hintergrundbild (Spielfeld) geladen und ein Spielball dazu, der sich in späteren Folgen bewegen kann.

User Level: Basics 1 out of 5 stars (1 / 5)

Beispiel


Es wird zuerst, der Reihe nach, wie es in der function preload () festgelegt ist, der Spielfeld-Hintergrund geladen und der Ball geladen.

In der function create () werden anschliessend beide Bilder ausgegeben. Es gilt zu beachten, dass würde man die Scriptzeilen in der function create vertauschen, läge der Ball unsichtbar unter dem Spielfeld.

Der Scriptcode

Und hier ist der Scriptcode von der main.js

function preload ()

In dieser Funktion werden beide Bilder (im voraus) geladen.

Im voraus deshalb, weil Bilder müssen nicht zwingend auch gleich angezeigt werden! Es gibt bei Games auch Bilder, die erst bei Ereignissen erscheinen sollen.

function create ()

In der function create () hat sich etwas mehr getan. Zwar hätte man den Ball theoretisch auch mit der Methode game.add.image anzeigen lassen können, aber in diesem Fall nur theoretisch, denn der Ball benötigt noch mehr Informationen, spätestens für Bewegungen. Daher hier game.add.sprite.

Des weiteren wurde in der Zeile var player = game.add.sprite (120, 150, ‚ball‘); mitgeteilt, dass die Position von „ball“ bei 120, 150 Pixeln liegt. Dort befindet sich die Spielfeldmitte und Position des Balles.

Über player.anchor.setTo (0.5, 0.5); wurde der Bildanker über die Werte 0.5, 0.5 in die Mitte verlegt.

 

Das könnte Dich auch interessieren …

Translate »