Criando escadas para platformer com o Phaser JS - Game Devlog #18

Escrito em 5 de junho de 2021 - 🕒 2 min. de leitura

Fala galera, estou de volta com outro devlog para o jogo Super Ollie. Hoje vou explicar como adicionei o recurso de subir escadas ao jogo.

Subindo a escada

Para fazer isso, eu criei uma nova propriedade para o meu tileset chamada canClimb, e então posso adicionar-la individualmente em qualquer tile do meu tileset. Agora, sempre que o jogador pressiona para cima, eu tenho um código que verifica se o herói está em um tile onde canClimb é true e, em seguida, troco o estado do herói para 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);
    }
}

A função getOverlappingTileWithGameobjectDimensions verificará todas as layers por um tile com a propriedade enviada no último parâmetro da função:

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;
};

Isso definirá corretamente o estado para CLIMBING, e agora precisamos mudar a física do herói para permitir que ele suba a escada, para isso irei desativar a gravidade para o body do herói e também diminuir as velocidades X e Y de movimentação:

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);

E, claro, também preciso reiniciar a gravidade quando o herói não estiver subindo escadas:

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

Eeee as animações:

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

E por hoje é isso, até o próximo devlog!

pablo.gg

Posts relacionados

Publicar um comentário

Comentários