PlayCanvas Module Library File Equivalent

Help & Support
1

Hi, I was wondering if PlayCanvas has a module library equivalent? For example, on my server-side code, I can use a combination of module.exports and require to achieve pull functions and classes from one file into another, like so:

//Library file (Lib.js)
module.exports = {
  test: function() {
    console.log('test!');
  }
};

//Main file
const lib = require('./Lib');
lib.test();

I spent a bit of time trying to figure out how to do this in PlayCanvas, as I know require() won’t work in-browser, but I kept getting stumped and eventually just made a blank entity object and attached the Lib script to it. This isn’t terribly ideal, as I wish I could keep non-editor data out of the editor.

Otherwise, the entity attachment method + some event handlers does seem to work, so at least that’s a relief. Otherwise just looking to organize my projects where possible.

2

Hi @TingleyWJ,

Indeed ES6 module imports don’t work right now in Playcanvas. But if you have been doing web dev before the ES6 era, attaching a library to a global object is kind of normal.

The Playcanvas app instance is available in the same manner, even outside of entity attached scripts. For example you can type the following in your browser console and it will work:

pc.app.root.findByName('Camera');
3

Hi @Leonidas, thanks for the response.

I’m not sure I understand how this would work though. pc.app.root.findByName('Camera'); does indeed work, but it returns an entity component. Although if I understand this correctly, that was merely an example for how the PC app instance is global, which I do understand.

But if you have been doing web dev before the ES6 era, attaching a library to a global object is kind of normal.

Can you elaborate on this bit in particular? I’ve only picked up web dev recently, so I never encountered pre-ES6 functionalities. If it’s not too much trouble, what would an example ES5 library look like (as compared to the module.exports ES6 version? And how would you attach the library to a global object (which I can assume might be the Playcanvas object in this example)?

4

So in Javascript running in the browser, whatever variable is defined in the global scope is automatically appended to the window object.

That means when defining this outside of any local scope or statement:

var myVar = 9;

On any other Javascript script that comes next, you can use that var:

if( myVar >= 9){ }

// you can also do this, since it's the same
if( window.myVar >= 9){ }

To your question, if for example I wanted to create a small utilities library, easily accessible by any other Playcanvas script I would do this.

var Utilities = pc.createScript('utilities');

Utilities.convertToString = function(){
   //...
};

Utilities.parseNumber = function(){
   //...
};

// initialize code called once per entity
Utilities.prototype.initialize = function() {
    
};

// update code called every frame
Utilities.prototype.update = function(dt) {
    
};

Now I can call these methods from any other script: Utilities.convertToString() etc.