AdvancedDynamicTexture.CreateFullscreenUI throws error when I try to import GUI 2D element selectively

Bugs
1

I am using v5.3.0. When I try to import gui 2D element selectively to reduce overall bundle size like -

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture.js";
import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle.js";
import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock.js";

AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene)

it throws following error.

TypeError: engine.createCanvas is not a function
    at AdvancedDynamicTexture2.DynamicTexture2 [as constructor] (dynamicTexture.ts:56:35)
    at new AdvancedDynamicTexture2 (advancedDynamicTexture.ts:375:9)
    at Function.AdvancedDynamicTexture2.CreateFullscreenUI (advancedDynamicTexture.ts:1319:24)

Everything works fine if I import it like -

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

But with this, guid3D elements also gets bundled up increasing the overall size. I am using sveltekit and vite for my app.

I am using guid 2D controls as follows

		advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
		rectangle = new Rectangle("");
		advancedTexture.addControl(rectangle);
		textCtrl = new TextBlock("but1");
		rectangle.addControl(textCtrl);

		rectangle.adaptWidthToChildren = true;
		rectangle.adaptHeightToChildren = true;
		rectangle.thickness = 0;
		rectangle.linkWithMesh(character);
		rectangle.linkOffsetY = 75;
		rectangle.linkOffsetX = -10;
		rectangle.background = "rgb(0,0,0,.3)";

		textCtrl.text = "";
		textCtrl.paddingLeftInPixels = textCtrl.paddingRightInPixels = 20;
		textCtrl.paddingTopInPixels = textCtrl.paddingBottomInPixels = 10;
		textCtrl.resizeToFit = true;
		textCtrl.fontSize = "20";
		textCtrl.color = "#ffffff";
2

Is loading everything from @babylonjs/gui/2d works as expected? Would you be able to share your project? Engine.createCanvas should be a party of thin engine, so the function should be there. Unless you are calling it before creating an engine?

3

Thanks @RaananW for your reply. While trying to create a sample repo, I figured that something was wrong in my setup. It seems that there were some engine related code conflicts. Hopefully, my resolution should hold good.

In any case this is a non-issue for babylonjs. Thanks once again for the help.

2 Likes