HUD_text_image.ts

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

 public onStart(): void {
    const playerUI = AdvancedDynamicTexture.CreateFullscreenUI("UI");
    const stackPanel = new StackPanel();
    stackPanel.height = "100%";
    stackPanel.width = "100%";
    stackPanel.top = "14px";
    stackPanel.verticalAlignment = 0;
    playerUI.addControl(stackPanel);

    const blockCount = new TextBlock();
    blockCount.name = "clock";
    blockCount.textHorizontalAlignment = TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    blockCount.fontSize = "48px";
    blockCount.color = "white";
    blockCount.text = "blocks 0/8";
    blockCount.resizeToFit = true;
    blockCount.height = "96px";
    blockCount.width = "220px";
    blockCount.fontFamily = "Viga";
    stackPanel.addControl(blockCount);

    const heart = new Image("heart0","../scenes/scene/files/heart.png");
    heart.width =0.07;
    heart.height="50px";
    heart.horizontalAlignment = Image.HORIZONTAL_ALIGNMENT_RIGHT;
    heart.verticalAlignment = Image.VERTICAL_ALIGNMENT_TOP;
    heart.top ="50px";
    heart.left="-10px";
    playerUI.addControl(heart);

    const heart1 = new Image("heart1","../scenes/scene/files/heart.png");
    heart1.width =0.07;
    heart1.height="50px";
    heart1.horizontalAlignment = Image.HORIZONTAL_ALIGNMENT_RIGHT;
    heart1.verticalAlignment = Image.VERTICAL_ALIGNMENT_TOP;
    heart1.top ="50px";
    heart1.left="-70px";
    playerUI.addControl(heart1);

    const heart2 = new Image("heart2","../scenes/scene/files/heart.png");
    heart2.width =0.07;
    heart2.height="50px";
    heart2.horizontalAlignment = Image.HORIZONTAL_ALIGNMENT_RIGHT;
    heart2.verticalAlignment = Image.VERTICAL_ALIGNMENT_TOP;
    heart2.top ="50px";
    heart2.left="-130px";
    playerUI.addControl(heart2);
 }