pablo.gg
🎮
coding

Creating ladders for platformer with Phaser JS - Game Devlog #18

Written in June 5, 2021 - 🕒 2 min. read

Hey everyone, I’m back with another devlog for Super Ollie. Today I will explain how I added the ladder-climbing feature to the game.

Climbing

To make this possible, I created a new property for my tileset called canClimb, and then I can set it on individual tiles. Now, whenever the player presses up I have a code that checks if the hero is in a tile where canClimb is true and then set the state to CLIMBING:

// Handle hero climbing
if (this.isUpDown() && !this.isHeroClimbing()) {
    const tile = getOverlappingTileWithGameobjectDimensions(
        this.body,
        this.scene.mapData.dynamicLayers.elements,
        'canClimb'
    );

    if (tile?.properties?.canClimb) {
        this.setHeroState(CLIMBING_UP);
    }
}

The getOverlappingTileWithGameobjectDimensions function will check on all passed layers for tiles with the property send in the last parameter:

export const getOverlappingTileWithGameobjectDimensions = (
    gameObject,
    dynamicLayer,
    property = null
) => {
    const { x, y, width, height } = gameObject;
    // get an array of layers
    const layers = dynamicLayer?.getChildren?.() || [dynamicLayer];

    let tile = null;
    layers.forEach((layer) => {
        if (tile) {
            return;
        }

        const result = layer.getTilesWithinWorldXY(
            x,
            y,
            width,
            height
        );

        result.forEach((resultTile) => {
            if (property) {
                if (resultTile?.properties?.[property]) {
                    tile = resultTile;
                }
            } else {
                tile = resultTile;
            }
        });
    });

    return tile;
};

This will properly set the state to CLIMBING, and now we need to change the hero’s physics to allow him to climb the ladder, for that, I will disable gravity for the hero’s body and slow down his X and Y velocities:

let newAccelerationX = this.body.acceleration.x;
let newAccelerationY = this.body.acceleration.y;

// Handle climbing movement
if (heroState === CLIMBING_RIGHT) {
    newAccelerationX = 30;
    this.setAllowGravity(false);
} else if (heroState === CLIMBING_LEFT) {
    newAccelerationX = -30;
    this.setAllowGravity(false);
} else if (heroState === CLIMBING_UP) {
    newAccelerationY = -30;
    this.setAllowGravity(false);
} else if (heroState === CLIMBING_DOWN) {
    newAccelerationY = 30;
    this.setAllowGravity(false);
} else if (heroState === CLIMBING) {
    newAccelerationY = 0;
    newAccelerationX = 0;
    this.setAllowGravity(false);
}

this.setAccelerationX(newAccelerationX);
this.setAccelerationY(newAccelerationY);

And of course, I also need to reset the gravity when the hero is not climbing:

// Reset gravity when is not climbing
if (!this.isHeroClimbing()) {
    this.setAllowGravity(true);
}

Aaand the animations:

// Handle hero climbing animation
if (this.isHeroClimbing()) {
    this.setAnimation('climb');
    if (heroState === CLIMBING) {
        this.pauseAnimation('climb');
    }
}

That’s all for today, see you at the next one!

Tags:

Post a comment
Comments

No comments yet.