Better scripts workflow

Help & Support
1

I want to improve my user experience in the code editor. So that my fields and other things are recognized from other scripts (hints and so on).

Found solution for myself

Change this

var Game = pc.createScript('game');

to this

class Game extends pc.ScriptType{}
pc.registerScript(Game, 'game');

So i have

class Game extends pc.ScriptType{}
pc.registerScript(Game, 'game');

/**@type {Game} */
Game.instance = null;

Game.prototype.initialize = function() {
    Game.instance = this;
    this.testString = '';
    this.testNum = 0;
};

Game.prototype.update = function(dt) {
    //this.test... hints works
};

Now the questions about this:

  1. Should I pay attention to the warning in my context? Because the ‘Script’ class does not work the same way. You should not use 'ScriptType' with class syntax. Extend the 'Script' class instead.
    image
    image1591×538 54.3 KB
  2. Is there any better approach?
  3. Is it possible to somehow achieve the same for attributes without unnecessary duplication or manual annotations, etc.?
  4. Is it possible to change the script template that is created from the editor?

It is important to note that support for older versions of chromium (~53) is required. External hosting.

2

I personally use classes for my larger projects that you can see here PlayCanvas 3D HTML5 Game Engine

Better code completion and types in the code editor. I can also use jsdocs with this to further annotate the code/APIs I write if I need it

If older browser support is needed, then I would consider running the published script file(s) through babeljs

2 Likes
3

It’s not going to be perfect for your use case but gets me close enough with the occasional jsdoc annotation and also requires all files to be open in the code editor for it to know how to complete the types

Otherwise your other option is to use typescript outside the browser code editor and the workflow that comes with using external code editors with PlayCanvas