Phaser 009 – Bildanker versetzen, anchor.setTo

In Phaser ist es möglich Bilder auszurichten, sie zu drehen, rotieren und zu verschieben. Wie ein Objekt ausgerichtet, oder rotiert, oder gedreht wird, hängt vom Bildanker (Anchor) ab. Bildanker können per Script versetzt werden.

Im Bild unten ist der Bildanker standardgemäß in der linken oberen Ecke (siehe rote Markierung).

 

Phaser Anchor

Oben, links

Für z.B. Hintergründe ist die Platzierung des Anchor gut, aber für Spieleelemente wie Münzen, Spielfigur usw. oft ungünstig.

Das Problem

In der Zeile var player = game.add.sprite (160, 250, ‚gesicht‘); wird die bestimmt die Position des Bildes (Gesicht) bestimmt. Nur gesicht wird auf diese Art niemals genau in der Spielfeldmitte landen! Nur der Bildanker von gesicht.

Blidanker von "player" exakt in der Spielfeldmitte, "player" selbst leider nicht

Bildanker links oben

Wie das dann ausschaut kann man im  Bild oben betrachten. Wirklich in der Mitte sitzt gesicht nicht, nur der Bildanker ist mittig platziert.

Wenn später noch Bewegung ins Spiel kommt und Kollisionen mit dem Rand, oder anderen Objekten, dann wirds sonderbar. Genau deshalb kann der Bildanker versetzen kann.

Die Lösung

Zu diesem Zweck gibt es bei Phaser den Befehl player.anchor.setTo.

In der komplette Beispielzeile player.anchor.setTo (0.5, 0.5); sind es die beiden Werte 0.5. die die Position des Anchor (Anker/Bildanker) bestimmen. Das bedeuten, das er Anker in die Bildmitte von gesicht gesetzt wird.

Wie breit oder hoch das Bild ist, muss gar nicht gemessen werden, 0.5 0.5 besagt, dass es sich um die Hälfte, also Bildmitte handelt. Von beiden Seiten, oben und unten.

Anker in Mitte

Nach der Eingabe von 0.5,0.5 sieht das dann auch schon anders auf dem Spielfeld aus (siehe Bild unten).

Phaser Anchor

Exakt in Bildmitte

Sonderfälle

In der Regel schaut eine Rotation von der Bildmitte besser aus. Es gibt allerdings Fälle wo eine Drehung an anderer Stelle gewünscht ist (siehe Bild unten).

Phaser Anchor

Anchor variabel

Beim Bild oben rotiert das Gesicht um den Bildanker in Standardposition oben links, das Bild rechts rotiert um den in die Bildmitte versetzten Bildanker.

Zwei weitere Beispiele

Zu guter Letzt zwei weitere Beispiele für das versetzen des Ankers und die entsprechenden Scriptzeilen dazu (siehe Bild unten).

Phaser Anchor

Set Anchor To

Linke Abbildung anchor.setTo (0.5, 1); Bildanker in der Mitte und unten.
Rechte Abbildung zeigt anchor.setTo (1, 1); Bildanker unten links.

Das könnte Dich auch interessieren …

Translate »