← На главную
Серия руководств

Шаг 14. Интерфейс

Создание платформера с PixiJS • Шаг 14 из 15

Выведем счёт игрока на экран. Создадим класс LabelScore, наследующийся от PIXI.Text:

import * as PIXI from "pixi.js";
import { App } from "../system/App";

export class LabelScore extends PIXI.Text {
    constructor() {
        super();
        this.x = App.config.score.x;
        this.y = App.config.score.y;
        this.anchor.set(App.config.score.anchor);
        this.style = App.config.score.style;
        this.renderScore();
    }

    renderScore(score = 0) {
        this.text = `Score: ${score}`;
    }
}

Вынесем параметры положения и стиля текста в глобальную конфигурацию Config.js:

export const Config = {
    score: {
        x: 10,
        y: 10,
        anchor: 0,
        style: {
            fontFamily: "Verdana",
            fontWeight: "bold",
            fontSize: 44,
            fill: ["#FF7F50"]
        }
    },
    // ...
};

Создадим экземпляр этого класса и добавим его на игровую сцену:

export class GameScene extends Scene {
    create() {
        // ...
        this.createUI();
    }

    createUI() {
        this.labelScore = new LabelScore();
        this.container.addChild(this.labelScore);
        this.hero.sprite.on("score", () => {
            this.labelScore.renderScore(this.hero.score);
        });
    }
}

Осталось добавить отправку события score в объект героя при сборе алмаза:

export class Hero {
    // ...
    collectDiamond(diamond) {
        // ...
        this.sprite.emit("score");
    }
}