Physik

Phaser wird mit drei verschiedenen Physik-Engines geliefert — Arcade Physics, P2 und Ninja Physics — mit einer vierten Option, Box2D, die als kommerzielles Plugin verfügbar ist. Für einfache Spiele wie unseres können wir die Arcade Physics-Engine verwenden. Wir benötigen keine aufwändigen geometrischen Berechnungen — schließlich ist es nur ein Ball, der von Wänden und Ziegeln abprallt.

Zuerst initialisieren wir die Arcade Physics-Engine in unserem Spiel. Fügen Sie die Methode physics.startSystem() am Anfang der create-Funktion (als erste Zeile innerhalb der Funktion) hinzu, wie unten gezeigt:

game.physics.startSystem(Phaser.Physics.ARCADE);

Als nächstes müssen wir unseren Ball für das Physiksystem aktivieren - die Phaser-Objektphysik ist standardmäßig nicht aktiviert. Fügen Sie die folgende Zeile am Ende der create()-Funktion hinzu:

game.physics.enable(ball, Phaser.Physics.ARCADE);

Wenn wir unseren Ball auf dem Bildschirm bewegen wollen, können wir velocity auf seinem body setzen. Fügen Sie dazu die folgende Zeile, wiederum am Ende von create(), hinzu:

ball.body.velocity.set(150, 150);

Erinnern Sie sich daran, unsere alte Methode zum Hinzufügen von Werten zu x und y aus der update()-Funktion zu entfernen:

function update() {
  ball.x += 1;
  ball.y += 1;
}

wir behandeln dies nun ordnungsgemäß mit einer Physik-Engine.

Der neueste Code sollte so aussehen:

let ball;

function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.stage.backgroundColor = "#eee";
  game.load.image("ball", "img/ball.png");
}

function create() {
  game.physics.startSystem(Phaser.Physics.ARCADE);
  ball = game.add.sprite(50, 50, "ball");
  game.physics.enable(ball, Phaser.Physics.ARCADE);
  ball.body.velocity.set(150, 150);
}

function update() {}

Versuchen Sie, index.html erneut zu laden - Der Ball sollte sich nun ständig in die gegebene Richtung bewegen. Im Moment hat die Physik-Engine die Schwerkraft und Reibung auf null gesetzt. Das Hinzufügen von Schwerkraft würde dazu führen, dass der Ball nach unten fällt, während Reibung den Ball schließlich stoppen würde.

Mit Physik können Sie viel mehr tun, zum Beispiel durch Hinzufügen von ball.body.gravity.y = 100; setzen Sie die vertikale Schwerkraft des Balls. Dadurch wird er nach oben geschleudert, fällt dann aber aufgrund der Schwerkrafteinwirkungen wieder nach unten.

Diese Art von Funktionalität ist nur die Spitze des Eisbergs — es gibt verschiedene Funktionen und Variablen, die Ihnen helfen können, die Physik-Objekte zu manipulieren. Schauen Sie sich die offizielle Physik-Dokumentation an und sehen Sie die große Sammlung von Beispielen mit den Arcade- und P2-Physiksystemen.

Sie können den fertigen Code für diese Lektion im untenstehenden Live-Demo überprüfen und mit ihm spielen, um besser zu verstehen, wie er funktioniert:

Jetzt können wir zur nächsten Lektion übergehen und sehen, wie der Ball von den Wänden abprallt.

• Zurück
• Weiter