Referencing Babylon.GUI in NPM / TypeScript

[Kreeba]

Hi. I have the latest alpha 3.0 version of BabylonJS from NPM. Babylon.GUI is included in the files. However, how do I reference it into my project?

Thanks in advance

[GameMonetize]

We have an open issue :

https://github.com/BabylonJS/Babylon.js/issues/2569

You can still reference it from https://preview.babylonjs.com/gui/babylon.gui.js 

[Kreeba]

Thanks. I saw this and the conversation chain with dyw in this topic:

I will reference it from the CDN for now.

 

Thanks for all your hard work

[Kreeba]

    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>

    <script>
        SystemJS.config({
            //First peramiter is the the name of the module from node. The second parameter is the express route to pick it up from (assuming default extension also)
            map: {
                'babylonjs': 'babylon',
                'socket.io-client': 'socket.io',
                'babylonjs.gui': 'https://preview.babylonjs.com/gui/babylon.gui.js'
            },
            //Assume that all files have a .js at the end
            packages: {
                '/': { defaultExtension: 'js' }
            }
        });

        //Entry point (with default extention)
        SystemJS.import('client');
    </script>

Could I ask for some guidance on how best to reference it in? I am currently just doing this in my index html, and am getting a error:

Error: Cannot read property 'textures' of null
  Evaluating http://localhost:8999/client.js
  Loading client
    at AdvancedDynamicTexture.t (babylon.js:11)
    at AdvancedDynamicTexture.i [as constructor] (babylon.js:11)
    at AdvancedDynamicTexture.i [as constructor] (babylon.js:26)
    at new AdvancedDynamicTexture (babylon.gui.js:sourcemap:23)
    at Function.AdvancedDynamicTexture.CreateFullscreenUI (babylon.gui.js:sourcemap:335)
    at new UI (ui.ts:11)
    at new Client (client.js:16)
    at Object.eval (client.js:205)
    at eval (client.js:207)
    at eval (client.js:208)

Do I also have to reference it in my TypeScript file? What as an import or a ///reference? How do I do that without loosing the reference for the core babylon import?

[Kreeba]

Anyone have any guidance on this?

[GameMonetize]

Still working on figuring out what we can do: https://github.com/BabylonJS/Babylon.js/issues/2569

[Kreeba]

Thanks! I will give it a week to see what you come up with.

[Kreeba]

Can anyone give me some advice on using the GUI module with TypeScript just by referencing it externally? I have tried a few different combinations but it isn't working.

Thanks

[GameMonetize]

Did you try adding this:

/// <reference path="babylon.gui.d.ts"/>

[Kreeba]

Thanks, I tried your suggestion above, both as it is and also changing the path to the exact location. For everything I have tried I get the same result:

In the IDE (VSCode) I get this error over the GUI class/namespace section of the advancedTexture code

[ts] Property 'GUI' does not exist on type 'typeof BABYLON'.

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");

In the browser console I then get:

Uncaught (in promise) Error: Cannot read property 'AdvancedDynamicTexture' of undefined

I also tried:

/// <reference path="../../node_modules/babylonjs/dist/preview release/gui/babylon.gui.js" types="../../node_modules/babylonjs/dist/preview release/gui/babylon.gui.d.ts"/>

with the same results

[Kreeba]

Good day,

 

Are there no suggestions/support for this issue? I believed that TypeScript and NPM was well supported with this community (being that BabylonJS itself is written in TypeScript). Is there the option of paid support with Babylon?

 

Kind Regards

[GameMonetize]

Can you zip a simple folder with your compilation setup so I can try to reproduce it locally?

[Kreeba]

I will PM you

 

[noalak]

Hi Kreeba,

 

I have worked on a solution for your project based on the zip you sent to Deltakosh.

 

The easiest way to use babylon gui module is to import it directly like so:

import BABYLONGUI = require("babylonjs-gui")

And then access the gui content with BABYLONGUI (no coma) instead of BABYLON.GUI

 

To use the express library with typescript you need to add a dependency:

"@types/express": "^4.0.36",

 

Finally, the babylonjs gui module is currently bugged and compilation will fail because of that. We are deploying a fix for that issue.

We will tell you once the fix is live. I send you a zipped with corrections made to your project and the babylonjs gui file to copy / paste inside the appropriate node module.

 

Also note that in your client.js file you can reference the babylonjs library inside the babylonjs gui module, like so:

import BABYLON = require("babylonjs-gui/node_modules/babylonjs")

This way, both your client.js file and the babylon gui module use the same version of babylon.

 

Good day!

[Kreeba]

Thank you for all your assistance, I will have a good look at this today and let you know if I run into any issues.

Thanks again.

[Kreeba]

The file you mentioned in your last point isn't in the current published version (3.1.0-alpha1.3) of BGUI on the NPM:

Quote

Also note that in your client.js file you can reference the babylonjs library inside the babylonjs gui module, like so:

import BABYLON = require("babylonjs-gui/node_modules/babylonjs")

This way, both your client.js file and the babylon gui module use the same version of babylon.

 

The code is compiling OK now. However, when opening the web browser to run the game, I am getting the errors:

babylonjs-gui.js:7 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at __extends (babylonjs-gui.js:7)
    at babylonjs-gui.js:17
    at BABYLON.GUI.BABYLON.GUI (babylonjs-gui.js:346)
    at BABYLON (babylonjs-gui.js:348)
    at babylonjs-gui.js:349
__extends @ babylonjs-gui.js:7
(anonymous) @ babylonjs-gui.js:17
BABYLON.GUI.BABYLON.GUI @ babylonjs-gui.js:346
BABYLON @ babylonjs-gui.js:348
(anonymous) @ babylonjs-gui.js:349


system.js:4 Uncaught (in promise) Error: Object prototype may only be an Object or null: undefined
  Evaluating http://localhost:8999/babylonjs-gui.js
  Evaluating http://localhost:8999/client/ui.js
  Evaluating http://localhost:8999/client/ship.client.js
  Evaluating http://localhost:8999/client.js
  Loading client
    at setPrototypeOf (<anonymous>)
    at __extends (babylonjs-gui.js:7)
    at eval (babylonjs-gui.js:17)
    at BABYLON.GUI.BABYLON.GUI (babylonjs-gui.js:346)
    at BABYLON (babylonjs-gui.js:348)
    at eval (babylonjs-gui.js:349)
    at eval (<anonymous>)
    at Re (system.js:4)
    at system.js:4
    at j (system.js:4)

I think the second error is related to using SystemJS as my package manager. I still don't fully grasp this area of TypeScript development, and am very happy to change over to something else if recommended.

I did, however also just do a normal script tag at the top of my html viewer page:

<script src="/babylonjs-gui.js"></script>

Which correctly routes to the file located in:

app.get('/babylonjs-gui.js', function (req, res) {
  res.sendFile(path.join(__dirname, '../node_modules/babylonjs-gui/', 'babylon.gui.js'))
})

Do I simply have a referencing issue? Or is there still something conflicting?

[brianzinn]

I didn't realize that babylon-gui was an NPM.  When the fix is ready I can give it a test in my typescript project, too.

On 8/10/2017 at 3:34 AM, noalak said:

We will tell you once the fix is live.

 

[Kreeba]

Keeping an eye on the Git issue for this, it seems that there has been a decision to restructure Babylon's codebase to better support extendable modules with NPM.

Thank you for all your hard work on this.

[Kreeba]

Good day. Is there any news on this?

 

Thanks

[GameMonetize]

Nope..We will announce it but the change is not trivial as we have to go through ALL code to make it "imports" compatible.

[Kreeba]

Thanks. I have opened this thread to, basically, ask if there is anything I can do now to get it up and running so I can continue my project.

 

[GameMonetize]

Please share your project in the other thread. I've asked a friend of mine to unblock you in the meantime