Выведем счёт игрока на экран. Создадим класс 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");
}
}