Emanuele Feronato has published a detailed technical tutorial on how to simulate rotating gravity and perimeter-based movement in Phaser, inspired by the platformer Be Brave, Barb by Thomas K. Young. The result is a fully working prototype where a character walks along the outer edge of floating shapes, jumps with direction-dependent gravity, and lands smoothly on any surface, all without a physics engine.

Perimeter-Based Movement Without Trigonometry

Starting from a Tiled map, the approach uses greedy perimeter extraction to generate the outer loop of a shape and an expanded version offset outward. Each segment of that loop stores a terrain property with four possible values: UP, DOWN, LEFT, or RIGHT, indicating where the solid surface is relative to the segment.

This single property eliminates the need for trigonometry entirely. Movement along the perimeter is fully deterministic: instead of velocity, the character's position is tracked via a segment index and a segmentT value between 0 and 1, calculated each frame using linear interpolation. The result is frame-rate independent and numerically stable.

Four Gravity Directions, No Rotation Math

When the character jumps, gravity direction is derived directly from the current segment's terrain property. Each of the four orthogonal cases defines a gravity vector and a jump vector pointing away from the surface. There is no rotation math and no world transforms involved.

During the jump, position is updated each frame using simple Euler integration, accumulating the gravity vector over time.

Landing Without Tunneling

The trickiest part is collision detection on landing. The solution uses continuous collision detection: a line is built from the previous position to the next position each frame, then tested against all perimeter segments for intersection. The closest valid intersection is found and the character snaps exactly to that point, avoiding penetration even at low frame rates.

Geometry Over Physics: Why It Works Better

The tutorial makes a strong case for this geometry-based approach over Arcade Physics for this specific mechanic. The system is deterministic, free of penetration errors, mathematically transparent, and behaves identically at 60 FPS and 240 FPS. It is also portable into any other language or framework.

The complete Vite project is available to download and experiment with, alongside a free Phaser and TypeScript minibook for developers looking to get started.

Read the Full Tutorial