Phaser 035 – Nahtlose Hintergründe,Tween

In Games kommt es oft vor, das Wächter oder Feinde bestimmte Bereiche bewachen. Dazu legen sie vorbestimmte Wege zurück und gehen dort Patroullie. Solche Strecken und andere Aktionen können leicht mit Scripten vorbestimmt werden

Tutorial Level: Intermediate 2.5 out of 5 stars (2,5 / 5)

Um Wächter und andere Spielfiguren bestimmte Strecken abgehen zu lassen bediene ich mich der Tween-Animation.

Beispiel

Hier geht es zu der Beispieldatei

function preload ()

In der function preload () werden wie immer die Bildelemente vorgeladen die benötigt werden. Das sind hier das Hintergrundbild (bg02.png genannt ‚wand‘) und die Flamme (flame.png genannt ‚falme‘).

function create ()

In der function create () werden die Bilder jetzt platziert und der Tween wird definiert, also die Strecke festgelegt.

 

In der Zeile 12 wird ganz normal der Wächter ‚flame‘ platziert und angezeigt.

  • game.add.tween bedeutet einfach dem Game wird eine Tween Animation hinzugefügt.
  • In Klammern (flamme) wird angesagt es soll der „Container“ sein in dem das Bild ‚flame‘ ist und der heisst Flamme.
  • Dann kommt .to({ y: 290} das heisst, der Tween soll von der Position 200 (dort wurde das Bild ‚flame‘ in Zeile 12 platziert, bis zu 290 auf der Y Achse wandern.
  • Die 2000 sind Millisekunden, also 2 Sekunden ist die Zeit um die Strecke abzugehen.
  • Phaser.Easing.Quadratic.InOutEasing ist eine Methode um Bewegungen am Ende abzubremsen.
  • Hier wurde Quadratic gewählt. Und das Ganze soll am Anfang und am Ende der Strecke stattfinden, daher das InOut.
  • Nochmal die komplette Zeile: game.add.tween (flamme).to({y:290}, 2000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true);
Easing

Interessant ist das Phaser beim Easing (Nachlassen, Abdämpfen) gleich mehrere Methoden mitbringt, was uns die Arbeit erleichtert. Ich habe hier im Beispiel Quadratic verwendet, aber probiert auch einmal andere Varianten aus.

Back
Bounce
Circular
Cubic
Elastic
Exponential
Linear
Quadratic (ist hier im Beispiel verwendet worden)
Quartic
Quintic
Sinusoidal

Script – Copy & Paste

 

Das könnte Dich auch interessieren …

Translate »