Criando status do herói (HUD) no Phaser JS - Skate Platformer Game Devlog #10

Escrito em 5 de novembro de 2020 - 🕒 3 min. de leitura

Fala pessoal, no game devlog de hoje vou mostrar como eu fiz para criar o HUD com os status do herói.

A primeira coisa que fiz foi cortar o design do HUD que o Ítalo fez em pequenas partes reutilizáveis para que eu pudesse aumentar/diminuir as barras de vida à vontade. O PNG do atlas ficou assim:

Depois de ter todas as partes do HUD separadas, eu criei um GameGroup com todas as imagens, e sempre que eu precisar aumentar ou diminuir a vida do herói eu chamo as funções increasePlayerLife e decreasePlayerLife.

class PlayerHud extends GameGroup {
    constructor(scene) {
        const children = [];
        // create all the game object images
        [
            'hud_meter_border',
            'hud_meter_point_border',
            'player_face_hud',
            'player_life_hud',
            'skate_hud',
            'skate_life_hud',
            'collectable_times',
            'coin',
        ].forEach((asset) => {
            if (
              ['hud_meter_border', 'hud_meter_point_border'].includes(asset)
            ) {
                ['skate', 'player'].forEach((hudType) => {
                    const assetName = `${hudType}_${asset}`;
                    const child = new GameObjects.Image(
                        scene,
                        x,
                        y,
                        asset
                    );

                    child.setOrigin(0, 0);
                    child.setName(assetName);
                    child.setScrollFactor(0);
                    children.push(child);
                });
                return;
            }

            const child = new GameObjects.Image(
                scene,
                x,
                y,
                asset
            );

            child.setOrigin(0, 0);
            child.setName(asset);
            child.setScrollFactor(0);
            children.push(child);
        });

        super(scene, children);

        // create a dummy game object to store the data manager
        const dataGameobject = new GameObjects.Rectangle(scene, x, y);
        this.data = new Data.DataManager(dataGameobject);

        // set data manager listeners
        this.data.set(PLAYER_LIFE_DATA, initialPlayerLife);
        this.data.set(SKATE_LIFE_DATA, initialSkateLife);
        this.data.set(COLLECTED_NUTS_DATA, initialCollectedNuts);
        this.data.events.on(
          `changedata-${SKATE_LIFE_DATA}`,
          this.onSkateLifeChanged
        );
        this.data.events.on(
          `changedata-${PLAYER_LIFE_DATA}`,
          this.onPlayerLifeChanged
        );
        this.data.events.on(
          `changedata-${COLLECTED_NUTS_DATA}`,
          this.onCollectedNutsChanged
        );

        // After everythibg is set
        this.setHudPositions();
    }

    setHudPositions = () => {
        // TODO
    }

    increasePlayerLife = () => {
        // TODO
    }

    decreasePlayerLife = () => {
        // TODO
    }
}

Como eu não queria deixar a função construct grande demais, criei a função setHudPositions que seta todas as pocições das imagens do HUD.

setHudPositions = () => {
    const { width, height } = this.scene.cameras.main;
    const paddingX = 10;
    const paddingY = 10;
    const skateLife = this.data.get(SKATE_LIFE_DATA);
    const playerLife = this.data.get(PLAYER_LIFE_DATA);
    this.getChildren().forEach((child) => {
        const { name } = child;
        child.setX(paddingX);
        child.setY(paddingY);

        switch (name) {
            case 'player_face_hud': {
                // TODO
                break;
            }
            case 'player_hud_meter_border': {
                child.setX(child.x + 32);
                child.setY(child.y + 15);
                child.setScale(playerLife - 1, 1);
                child.setDepth(child.depth - 1);
                break;
            }
            case 'player_hud_meter_point_border': {
                child.setX(child.x + playerLife + 31);
                child.setY(child.y + 16);
                child.setDepth(child.depth - 1);
                break;
            }
            case 'player_life_hud': {
                child.setX(child.x + 32);
                child.setY(child.y + 16);
                child.setScale(playerLife, 1);
                child.setDepth(child.depth - 2);
                break;
            }
            case 'skate_hud': {
                child.setY(child.y + 32);
                break;
            }
            case 'skate_hud_meter_border': {
                child.setX(child.x + 32);
                child.setY(child.y + 34);
                child.setScale(skateLife - 1, 1);
                child.setDepth(child.depth - 1);
                break;
            }
            case 'skate_hud_meter_point_border': {
                child.setX(child.x + skateLife + 31);
                child.setY(child.y + 35);
                child.setDepth(child.depth - 1);
                break;
            }
            case 'skate_life_hud': {
                child.setX(child.x + 32);
                child.setY(child.y + 35);
                child.setScale(skateLife, 1);
                child.setDepth(child.depth - 2);
                break;
            }
            case 'coin': {
                child.setY(child.y + 48);
                break;
            }
            case 'nut_text': {
                child.setY(child.y + 42);
                child.setX(child.x + 25);
                break;
            }
            case 'collectable_times': {
                child.setY(child.y + 52);
                child.setX(child.x + 17);
                break;
            }
            default: {
                break;
            }
        }
    });
}

E por último as funções increasePlayerLife e decreasePlayerLife:

decreasePlayerLife = (value) => {
    const playerLife = this.data.get(PLAYER_LIFE_DATA);
    this.data.set(PLAYER_LIFE_DATA, playerLife - value);
}

increasePlayerLife = (value) => {
    const playerLife = this.data.get(PLAYER_LIFE_DATA);
    this.data.set(PLAYER_LIFE_DATA, playerLife + value);
}

Agora bastou eu adicionar gameHud.decreasePlayerLife(5) na função de colisão entre o herói e os inimigos e pronto 😄

E isso conclui o game devlog dessa semana, não esqueça de deixar o seu comentário tanto aqui quanto no vídeo sobre o que tem achado desses posts e vídeos.

pablo.gg

Posts relacionados

Publicar um comentário

Comentários