BlogJogos

Criando uma "Monkey Bar" para se pendurar com o Phaser JS - Game Devlog #19

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

Fala pessoal, o devlog de hoje será muito semelhante ao anterior, mas em vez de subir uma escada, vou para implementar uma “Monkey Bar” na qual o herói possa se pendurar.

Monkey Bar

Como sempre, criei uma nova propriedade chamada canHang no meu tileset, e usei a função getOverlappingTileWithGameobjectDimensions que implementei no último devlog para procurar um tile com essa propriedade.

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

    if (tile?.properties?.canHang) {
        this.setHeroState(HANGING);
        return;
    }
}

Agora que tenho o código para definir o estado do herói para HANGING, preciso adicionar o código para lidar com movimentações para a esquerda e direita, e pular.

if (this.isHeroHanging()) {
    // Handle hero jump when hanging
    if (this.isAButtonJustDown()) {
        this.setHeroState(JUMPING_START);
        return;
    }

    const tile = getOverlappingTileWithGameobjectDimensions(
        this.body,
        this.scene.mapData.dynamicLayers.elements,
        'canHang'
    );

    if (tile?.properties?.canHang) {
        if (tile.customCollider) {
            const { y, height } = tile.customCollider;
            const adjustedPosY =
                this.body.height + y + height + 2;

            if (this.y !== adjustedPosY) {
                this.setY(adjustedPosY);
            }
        }

        if (this.isLeftDown()) {
            this.setHeroState(HANGING_LEFT);
        } else if (this.isRightDown()) {
            this.setHeroState(HANGING_RIGHT);
        } else {
            this.setHeroState(HANGING);
        }

        return;
    }

    this.setHeroState(IDLE);
    return;
}

O próximo passo é lidar com o movimento físico quando o herói estiver se pendurando:

// Handle hanging movement
let newAccelerationX = this.body.acceleration.x;
let newAccelerationY = this.body.acceleration.y;

if (heroState === HANGING_RIGHT) {
    newAccelerationX = 30;
    this.setAllowGravity(false);
} else if (heroState === HANGING_LEFT) {
    newAccelerationX = -30;
    this.setAllowGravity(false);
} else if (heroState === HANGING) {
    newAccelerationY = 0;
    this.setVelocityX(0);
    this.setAccelerationX(0);
    this.setAllowGravity(false);
}

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

Claro, eu também preciso reiniciar a gravidade quando o herói não estiver pendurado:

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

A única coisa que falta agora são as animações:

// Handle hero hanging animation
if (this.isHeroHanging()) {
    this.setAnimation('hang');
    if (heroState === HANGING) {
        this.pauseAnimation('hang');
    } else if (heroState === HANGING_RIGHT) {
        this.setFlipX(false);
    } else if (heroState === HANGING_LEFT) {
        this.setFlipX(true);
    }
}

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

Tags:


Publicar um comentário

Comentários

Nenhum comentário.