TS2552: Cannot find name 'AdvancedDynamicTexture'. Did you mean 'EditAdvancedDynamicTexture'?

Hello all
Im following the great tutorial on [the site]
(Setting Up A State Machine | Babylon.js Documentation)
also looking on the source code

And it gives me error :

untime modules 27.3 KiB 12 modules
./src/app.ts 2.17 KiB [built] [code generated] [1 error]

ERROR in C:\dev\my\js\babylon\proj1\src\app.ts
./src/app.ts 70:24-46
[tsl] ERROR in C:\dev\my\js\babylon\proj1\src\app.ts(70,25)
      TS2552: Cannot find name 'AdvancedDynamicTexture'. Did you mean 'EditAdvancedDynamicTexture'?
ts-loader-default_e3b0c44298fc1c14

The code :

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF";
 
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, Mesh, MeshBuilder, Color4, FreeCamera } from "@babylonjs/core";
import { AdvancedDynamicTextureTreeItemComponent } from "@babylonjs/inspector/components/sceneExplorer/entities/gui/advancedDynamicTextureTreeItemComponent";
import { EditAdvancedDynamicTexture } from "@babylonjs/inspector";

enum State { START=0,GAME=1,LOSE=2,CUTSCENE=3}

class App {

    private _scene: Scene;
    private _canvas: HTMLCanvasElement;
    private _engine: Engine;

    private _state: number = 0;

    constructor() {
        console.log("constructor!");
        var canvas = this._createCanvas();
       

        this._engine = new Engine(canvas,true);
        this._scene = new Scene(this._engine);

        var camera: ArcRotateCamera = new ArcRotateCamera("Camera",Math.PI/2,Math.PI/2,2,Vector3.Zero(),this._scene);
        camera.attachControl(canvas,true);
        var light1:HemisphericLight = new HemisphericLight("light1",new Vector3(1,1,0),this._scene);
        var sphare:Mesh = MeshBuilder.CreateSphere("sphere",{ diameter:1},this._scene);

        window.addEventListener("keydown",(ev) => {
            console.log("keydown"); 
            if(ev.key == 'i') {
                console.log("Press !!");
                if(this._scene.debugLayer.isVisible()){
                    this._scene.debugLayer.hide();
                } else {
                    this._scene.debugLayer.show();
                }
            } 
        });


        this._engine.runRenderLoop(()=>{
            this._scene.render();
        });


    }

    private _createCanvas() : HTMLCanvasElement {
        this._canvas = document.createElement("canvas");
        this._canvas.style.width = "100%";
        this._canvas.style.height = "100%";
        this._canvas.id = "gameCanvas";
        document.body.appendChild(this._canvas);
        return this._canvas;
        
    }

    private _goToStart() {
        this._engine.displayLoadingUI();
        this._scene.detachControl();
        let scene = new Scene(this._engine);
        scene.clearColor = new Color4(0,0,0,1);
        let camera = new FreeCamera("camera1",new Vector3(0,0,0),scene);
        camera.setTarget(Vector3.Zero());

        const guiMenu = AdvancedDynamicTexture.CreateFullscreenUI("UI");



    }

}

new App();

Obviously, this code is not updated. What is the replacement for it? I also don’t see any changes in the documentation of Babylon

Do you miss babylonjs-gui module?

Then you should be able to import:

import { AdvancedDynamicTexture } from "@babylonjs/gui";
2 Likes

yes tnx