How to flip gravity in a Phaser 4 platformer

0

21

How to flip gravity in a Phaser 4 platformer

Put a golden egg on the ceiling and give the player a duck that can walk but can’t jump. The room looks impossible until the player presses Space and falls upwards. If you’re looking for a small mechanic for Game Off’s Shift theme, that change of direction could carry a whole level.

Emanuele Feronato has made a playable Phaser 4 and TypeScript walkthrough of Gravity Duck, the Flash game by Woblyware. His version uses Arcade Physics and draws the collision shapes on screen. You can see exactly what the duck is standing on when you try the gravity-flip step.

Give the player its own gravity

For a first room, use a floor, a low ceiling and an exit suspended above the starting point. Keep the walls static. Set the world’s vertical gravity to zero and give the player’s dynamic body a positive vertical gravity. Pressing the flip key changes the sign of that one body’s gravity. The walls, goal and any other moving objects can keep their own rules.

The useful detail is the meaning of grounded. Arcade Physics tells you which side of a body is blocked. With gravity pulling down, the player can launch from a blocked lower edge. With gravity pulling up, standing on the ceiling means the upper edge is blocked. If you always check the lower edge, the first flip succeeds and the duck gets stranded overhead.

Here is the input check for a room with vertical gravity. It assumes that body is the player’s Arcade body, its vertical gravity is already nonzero, and flipKey was created once when the scene started.

const pressed = Phaser.Input.Keyboard.JustDown(flipKey);
const standing = body.gravity.y > 0 ? body.blocked.down : body.blocked.up;

if (pressed && standing) {
  body.setGravityY(-body.gravity.y);
}

Read the fresh press on every update. Holding Space through a landing should produce a single trip across the room. Put a second obstacle beyond the landing point and you’ll feel the difference immediately. If the player bounces straight off the ceiling, a held key has probably been treated as another press.

Build a puzzle that teaches the rule

For the first landing, leave the ceiling clear and let the egg sit a few steps to the right. The player learns two things in one trip. Space changes which surface supports them, and left and right still do what they expect. A single arrow beside the starting position can explain more here than a paragraph of controls.

For the next room, put a short row of spikes directly above the start. Leave a safe strip of ceiling further along the corridor. The player now has a reason to walk before pressing Space. Draw a straight line between the two surfaces when designing the room. That line is the path the player must judge, so give both its ends enough contrast to read at a glance.

Try the layout with the artwork switched off. If people can solve it with rectangles, the decoration can do a more interesting job later. A loose feather drifting upward, for instance, can tell the player that gravity has changed even while the character is hidden behind a platform. Feronato takes the same one-rule starting point much further, including wells that turn gravity sideways, in the full tutorial and commented source.

Try to break the second flip

Test three inputs before building another room. Hold Space during the whole crossing. Tap it halfway to the ceiling. Then tap it again just after landing. In this version, the first and third actions can start a flight from a surface. The midair tap is spent. If you later add a short input buffer to make landings more forgiving, repeat the same sequence and decide exactly how early a press should count.

A tiny playable prototype like this is also a good way to revisit the tools from our Build it with Phaser challenge. Give somebody the two-room build and let them discover the egg. The moment they choose to walk past the spikes before flipping is a pretty good signal that the first room did its job.