Does not load Image src

Questions
1

I`ll share my code here, after sometime learning to build an OOP babylon app in typeScript.

But it happens that there is a simple part that doesnt apear on screen.

index.ts:

import {
    Engine
} from "../node_modules/@babylonjs/core/Engines/engine";

import Game from "./gamemenu.js";

// Get the canvas element from the DOM.
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;

// Associate a Babylon Engine to it.
const engine = new Engine(canvas);

const game = new Game(engine);
const gameScene = game.Start();
// Render every frame
engine.runRenderLoop(() => {
    gameScene.render();
});

gamemenu.ts:

import {
    Engine
} from "../node_modules/@babylonjs/core/Engines/engine";
import {
    Vector3, Color3, Color4
} from "../node_modules/@babylonjs/core/Maths/math";
import {
    ArcRotateCamera
} from "../node_modules/@babylonjs/core/Cameras/arcRotateCamera";
import {
    HemisphericLight
} from "../node_modules/@babylonjs/core/Lights/hemisphericLight";
import {
    Mesh
} from "../node_modules/@babylonjs/core/Meshes/mesh";

import {
    GridMaterial
} from "../node_modules/@babylonjs/materials/grid/index";

import {
    Sound
} from "../node_modules/@babylonjs/core/Audio/index"

import {
    HighlightLayer
} from "../node_modules/@babylonjs/core/index"

import { 
    AdvancedDynamicTexture
} from "../node_modules/@babylonjs/gui/2D/advancedDynamicTexture";

import { 
    Image
} from "../node_modules/@babylonjs/gui/2D/controls/index";

import { 
    Scene 
} from "../node_modules/@babylonjs/core/scene";

import {
    Control
} from "../node_modules/@babylonjs/gui/2D/controls/index"

export default class gamemenu {
    _engine : Engine;
    _scene : Scene;
    _camera : ArcRotateCamera;
    _light : HemisphericLight;
    _advancedTexture : AdvancedDynamicTexture;

    constructor(engine) {
        this._engine = engine;
    }

    Start() {
        
        this._scene = new Scene(this._engine);
        this._scene.clearColor = new Color4(0,0,0,1);

        this._camera = new ArcRotateCamera("gameCamera", 0,0,0, new Vector3(0, 5, -10), this._scene);
        this._camera.setPosition(new Vector3(0,1,-40));
        this._camera.setTarget(Vector3.Zero());

        this._light = new HemisphericLight("light1", new Vector3(0,1,0), this._scene);
        this._light.intensity = 0.49;

        let tetraMaterial = new GridMaterial("TetraGrid", this._scene);

        let tetra = Mesh.CreatePolyhedron("tetra", {type: 0, size: 3}, this._scene);

        tetra.position.y = 4.8;
        tetra.position.z = -15;
        tetra.rotation.z = Math.PI/2;
        tetra.rotation.x = 4*Math.PI/3;

        let hl1 = new HighlightLayer("hl1", this._scene);
        hl1.addMesh(tetra, Color3.Magenta());

        tetra.material = tetraMaterial;

        let groundMaterial = new GridMaterial("grid", this._scene);
        groundMaterial.lineColor = new Color3(2,2,4);

        let ground = Mesh.CreateGround("ground", 600, 600, 3, this._scene);
        ground.material = groundMaterial;

        this._advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UIMenu", true, this._scene);

        let titleImage = new Image("title", "../res/Title.png");
        titleImage.width = "800px";
        titleImage.height = "300px";
        titleImage.top = "-50px";
        titleImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
        titleImage.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        this._advancedTexture.addControl(titleImage)

        let backMusic = new Sound ("Music", "../res/raia-bellzy.wav",this._scene, null, {
            loop: true,
            autoplay: true 
            });

        let alpha = 0;

        this._scene.registerBeforeRender(() => {

            

            tetra.rotation.y += 0.005;

            alpha += 0.03;
            hl1.blurHorizontalSize = 0.3 + Math.cos(alpha) * 0.6 + 0.6;
            hl1.blurVerticalSize = 0.3 + Math.sin(alpha / 3) * 0.6 + 0.6;
        });



        return this._scene;

    }
}

image
image960Ă—1045 166 KB

And that the screen on the browser, it does not appear this part of gamemenu.ts:

this._advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UIMenu", true, this._scene);

        let titleImage = new Image("title", "../res/Title.png");
        titleImage.width = "800px";
        titleImage.height = "300px";
        titleImage.top = "-50px";
        titleImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
        titleImage.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        this._advancedTexture.addControl(titleImage)

        let backMusic = new Sound ("Music", "../res/raia-bellzy.wav",this._scene, null, {
            loop: true,
            autoplay: true 
            });

Even the sound dont play, as the Title.png does not appear onscreen.

Could somebody help me with that?

In Browser NetWork said title.png is not found:

image
image960Ă—1045 167 KB

2

Update:

If i move the Title.png to src folder, and change this line
from this:

        let titleImage = new Image("title", "../res/Title.png");

to this:

        let titleImage = new Image("title", "Title.png");

It works… but i`ll like to have title.png on res folder… how to solve that?

3

Solved… i had to put res folder inside dist folder… then it worked.

1 Like