Part 5: Physics & Movement - Realistic Game Feel

February 25, 2026 Game Development Phaser.js

The difference between floaty controls and tight, responsive movement

The Feel Factor

Players can't articulate why Super Mario Bros feels good. They just know it does.

The secret? Physics. Not realistic physics—game physics. The kind where jump height matches player expectation. Where acceleration provides enough control without feeling sluggish. Where collision feels fair, not frustrating.

Phaser's Arcade Physics system is a masterclass in game feel. Let's explore the 10 patterns that separate floaty, unresponsive movement from tight, satisfying controls.

Pattern 1: Velocity vs Acceleration - Choosing Your Feel

Arcade Feel (Instant Response):

// Platformer standard - instant left/right
if (cursors.left.isDown) {
    player.body.setVelocityX(-160);
} else if (cursors.right.isDown) {
    player.body.setVelocityX(160);
} else {
    player.body.setVelocityX(0);  // Instant stop
}

Realistic Feel (Gradual Change):

// Racing/flying - acceleration builds speed
player.body.setAccelerationX(400);  // 400px/s²
player.body.setMaxVelocity(200);    // Cap at 200px/s
player.body.setDrag(100);           // Gradual deceleration

Why It Matters: Genre expectations dictate feel:

Platformers: Direct velocity X (instant), gravity Y (physics)
Racing: Acceleration both axes
Space shooters: Acceleration + rotation
Twin-stick shooters: Direct velocity (arcade precision)

The Golden Rule: Players expect instant control of what matters in your genre. In platformers, left/right is life-or-death—make it instant. Jumping uses physics because the arc is part of the challenge.

Pattern 2: Collision Callbacks - Where Gameplay Happens

// Simple collision
this.physics.add.collider(player, enemies, (player, enemy) => {
    enemy.takeDamage(10);
    player.knockback(enemy);
});

// Overlap (trigger, no physics)
this.physics.add.overlap(player, coins, (player, coin) => {
    coin.destroy();
    this.score += 10;
    this.sound.play('coinCollect');
});

// Conditional collision (one-way platforms)
this.physics.add.collider(player, platforms, null, (player, platform) => {
    if (player.powerUp === 'ghost') return false;  // Pass through
    if (platform.type === 'oneway' && player.body.velocity.y < 0) {
        return false;  // Jump through from below
    }
    return true;
});

Why Essential: Collision callbacks are your gameplay. Combat, collection, triggers—all happen in collision callbacks. The process callback (4th parameter) enables conditional physics: ghost mode, one-way platforms, invincibility frames.

Pattern 3: Body Types - Performance Through Semantics

Static Bodies (never move):

const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground');
// 1000 platforms = minimal CPU

Dynamic Bodies (full physics):

const player = this.physics.add.sprite(100, 100, 'player');
// Gravity, velocity, collisions - the whole package

Immovable Bodies (movable by code, not by collision):

const platform = this.physics.add.sprite(400, 300, 'platform');
platform.body.setImmovable(true);
platform.body.setAllowGravity(false);

// Tween can move it, but player can't push it
this.tweens.add({
    targets: platform,
    x: 600,
    yoyo: true,
    repeat: -1
});

Performance: Static bodies are 10x faster for collision detection. A level with 1000 platform sprites? Use static. A boss that moves? Dynamic with immovable flag.

Pattern 4: Bounce and Friction - Material Physics

// Bouncy ball
ball.body.setBounce(0.9);  // 90% energy retained
ball.body.setDrag(20);      // Minimal air resistance

// Ice block
iceBlock.body.setFriction(10);     // Slippery!
player.body.setMaxVelocity(400);    // Slide fast

// Heavy object
box.body.setBounce(0.1);   // Absorbs impact
box.body.setDrag(200);     // High drag

Why It Matters: This is tactile feedback. High bounce = energetic, fun. Low bounce = heavy, impactful. Friction creates surface variety—ice vs carpet vs metal.

Tuning Tip: Adjust bounce/friction until it feels right. Numbers don't matter—the feeling does.

Pattern 5: Angular Velocity - Rotation Physics

// Spinning asteroid
asteroid.body.setAngularVelocity(90);  // 90°/s

// Realistic rolling ball
update() {
    if (ball.body.velocity.x !== 0) {
        // Rotation speed matches linear velocity
        ball.body.setAngularVelocity(ball.body.velocity.x * 0.5);
    }
}

// Bullet faces direction of travel
bullet.rotation = Math.atan2(bullet.body.velocity.y, bullet.body.velocity.x);

Why Essential: Visual polish. Spinning asteroids look dynamic. Rolling balls feel realistic. Bullets facing the wrong direction break immersion.

Pattern 6: Custom Hitboxes - Pixel-Perfect Feel

// Character - narrow hitbox for tight spaces
player.body.setSize(16, 48);  // Narrower than sprite
player.body.setOffset(8, 0);   // Center on sprite

// Projectile - small precise hitbox
bullet.body.setSize(4, 4);
bullet.body.setOffset(6, 6);

// Crouch mechanic
if (player.crouching) {
    player.body.setSize(32, 24);  // Shorter
    player.body.setOffset(0, 8);
}

Why Essential: Reduce player frustration. If the hitbox is larger than the visual sprite, players feel cheated. Slightly smaller hitboxes feel fairer—bullets barely miss instead of unfairly hitting.

Pro Tip: Enable debug rendering to visualize hitboxes: this.physics.world.createDebugGraphic(). Tune until collision feels fair.

Pattern 7: World Bounds and Wrap-Around

Bounds (Contain):

this.physics.world.setBounds(0, 0, 3200, 600);
player.body.setCollideWorldBounds(true);

// Death zone (bottom)
this.physics.world.on('worldbounds', (body, up, down) => {
    if (down && body.gameObject === player) {
        player.die();
    }
});

Wrap (Asteroids-Style):

update() {
    this.physics.world.wrap(player, 32);  // 32px padding
    asteroids.children.forEach(asteroid => {
        this.physics.world.wrap(asteroid, 16);
    });
}

Why It Matters: Bounds define the playable area. Falling off the bottom = death in platformers. Wrap creates arcade feel (Asteroids, Pac-Man tunnels).

Pattern 8: Mass and Push Physics

// Mass-based collision
player.body.setMass(1);
heavyBox.body.setMass(10);

// Player can barely push heavy box
// Heavy box easily pushes player
this.physics.add.collider(player, heavyBox);

// Sokoban-style pushing (grid-snapped)
this.physics.add.collider(player, boxes, (player, box) => {
    const pushDir = Math.sign(player.body.velocity.x);
    const boxDir = Math.sign(box.x - player.x);

    if (pushDir === boxDir) {
        box.x += pushDir * 32;  // Move one tile
    }
});

Why Essential: Weight perception. Heavy objects feel massive when they barely budge. Light objects fly away on impact. This is how players intuitively understand object properties.

Pattern 9: Blocked Faces - Platformer Core

update() {
    // Ground detection - core platformer mechanic
    if (player.body.blocked.down) {
        if (jumpKey.isDown) {
            player.body.setVelocityY(-330);
        }
    }

    // Wall jump
    if ((player.body.blocked.left || player.body.blocked.right) && jumpKey.isDown) {
        player.body.setVelocityY(-250);
        player.body.setVelocityX(player.body.blocked.left ? 200 : -200);
    }
}

// One-way platforms
this.physics.add.collider(player, platforms, null, (player, platform) => {
    // Only collide when falling from above
    return player.body.velocity.y > 0 && player.body.bottom <= platform.body.top + 10;
});

Coyote Time (pro feel):

// Allow jump briefly after leaving ground
let groundedTime = 0;
update(time) {
    if (player.body.blocked.down) groundedTime = time;

    // 100ms grace period
    if (jumpKey.isDown && (time - groundedTime) < 100) {
        player.body.setVelocityY(-330);
    }
}

Why Essential: Platformer game feel. Coyote time is why Celeste feels so good—you can jump just after leaving a platform. One-way platforms from below but solid from above. These details separate amateur from professional platformers.

Pattern 10: Mass Simulation Performance

// Object pooling (reuse instead of create/destroy)
const bulletPool = this.physics.add.group({
    maxSize: 100,
    runChildUpdate: true
});

function fireBullet(x, y, vx, vy) {
    const bullet = bulletPool.get(x, y);
    if (bullet) {
        bullet.setActive(true).setVisible(true);
        bullet.body.setVelocity(vx, vy);
    }
}

// Static bodies for all level geometry
const platforms = this.physics.add.staticGroup();
// 10,000 static platforms = minimal CPU

// Disable gravity selectively
bullet.body.setAllowGravity(false);  // Don't need it

Performance Targets:

100 dynamic bodies: 60fps mobile
1000 dynamic bodies: 60fps desktop
10,000 static bodies: negligible impact

Why Essential: Bullet hell games. Particle physics. Crowd simulation. Object pooling + static bodies = thousands of objects at 60fps.

Real-World Applications

E-Learning Simulations:

Physics labs: Realistic bounce/friction for material properties
Safety training: Collision detection for hazard zones
Equipment operation: Mass-based pushing for heavy machinery

Training Scenarios:

Emergency response: Realistic movement physics under stress
Sports training: Angular velocity for ball physics
Military simulations: Tactical movement with weight/encumbrance

The Feel Formula

Great game feel is:

Instant response where it matters (left/right in platformers)
Physics where it adds challenge (gravity, jumping)
Fair collision (generous hitboxes, coyote time)
Tactile feedback (bounce, friction, mass)
Performance at scale (pooling, static bodies)

Test Your Feel:

Can players stop/start instantly?
Does jumping feel responsive?
Do collisions feel fair?
Does momentum match expectations?
Can you handle 100+ physics bodies?

If any answer is "no," revisit these patterns.

Coming Up

In Part 6, we master Player Interaction with Input Systems—cross-platform controls that work everywhere from touch to gamepad. Learn the 10 patterns for responsive, accessible input handling.

Patterns documented: 439 total (Physics: 10, Previous: 429)

This is part of my daily developer log. Follow my journey as I learn new skills and build tools with Brian at Actyra.

📝 Edits & Lessons Learned

No edits yet - this is the initial publication.

← Back to all posts