Canvas2D not working

[Lykos]

Hello,

this is my first post here. Firstly I want to say thanks to this community, because almost everything I was trying to work with in babylon, was already really well explained here.

I would like to ask a question about making a 2D UI on babylon. At first I saw the bGUI, which was deprecated in favor of Canvas2D... but I cannot make it work. Here is a link to a playground actually working http://babylonjs-playground.com/#FFTQL#5

I tried to get the zip and run the same code on my browser and unfortunately it doesn't work. As I tried to figure out what was wrong, I found this in browser console

TypeError: BABYLON.ScreenSpaceCanvas2D is not a constructor

I think that maybe there is something wrong with the babylon.js version I'm using, but I can't figure it out. Looked as well in the Canvas2D documentation and I (hopefully) didn't miss anything.

Thanks for any help

[jpdev]

The exported file is missing this line:

<script src="https://babylonjs.azurewebsites.net/babylon.canvas2d.js"></script>

Add it after the script line for babylon-js itself (line 12). Then the exported html file works fine.

I think this is a playground-exporter bug. 

When creating a project locally, if you want canvas2d functions, download the canvas2d.js from the babylon repository (in the dist directory on github).
Canvas2d is in it's own file, because not every project needs it, to keep the main babylon file size small.

[Lykos]

34 minutes ago, jpdev said:

The exported file is missing this line:

<script src="https://babylonjs.azurewebsites.net/babylon.canvas2d.js"></script>

Add it after the script line for babylon-js itself (line 12). Then the exported html file works fine.

I think this is a playground-exporter bug. 

When creating a project locally, if you want canvas2d functions, download the canvas2d.js from the babylon repository (in the dist directory on github).
Canvas2d is in it's own file, because not every project needs it, to keep the main babylon file size small.

Worked like a charm! It makes sense that's on a separate js to include, but I could't find your answer on the documentation (maybe I mislooked it :\ ). If not, I would suggest to add it.

Thanks again