Kreeba

Referencing Babylon.GUI in NPM / TypeScript

Recommended Posts

    <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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.