gui_example.ts

import { AdvancedDynamicTexture, TextBlock, Control, Image, StackPanel } from "@babylonjs/gui";

    /**
     * Defines the reference to the GUI advanced texture.
     */
    public gui: AdvancedDynamicTexture = null;
    /**
     * Called on the node is being initialized.
     * This function is called immediatly after the constructor has been called.
     */
    public onInitialize(): void {
        this.gui = AdvancedDynamicTexture.CreateFullscreenUI("ui", true, this);

        // Create start game text
        this._gameMessageControl = new TextBlock("startGame", "Please press space bar to start");
        this._gameMessageControl.color = "white";
        this._gameMessageControl.fontSize = 40;
        this._gameMessageControl.fontFamily ="Viga";
        this.gui.addControl(this._gameMessageControl);

        // Create blocks counter
        this._counterControl = new TextBlock("counter", "Blocks 0 / 8");
        this._counterControl.color = "white";
        this._counterControl.fontSize = 24;
        this._counterControl.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
        this._counterControl.textVerticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        this._counterControl.paddingTop = 20;
        this._counterControl.fontFamily ="Viga";
        this.gui.addControl(this._counterControl);

        // Create lifes controls
        this._lifesStackControl = new StackPanel("lifes");
        this._lifesStackControl.isVertical = false;
        this._lifesStackControl.adaptHeightToChildren = true;
        this._lifesStackControl.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
        this._lifesStackControl.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        this._lifesStackControl.top = 50;
        this.gui.addControl(this._lifesStackControl);

        for (let i = 0; i < 3; i++) {
            const lifeControl = new Image("life", "./scenes/scene/files/heart.png");
            lifeControl.width = "64px";
            lifeControl.height = "64px";
            lifeControl.left = 100 * i;
            this._lifesStackControl.addControl(lifeControl);
        }
    }