Introducing updated Playcanvas JS/Typescript Template

Just did this up yesterday from Tobias ’ fork and integrating other Typescript forks on github, trying to find the best workflow for Hot-reloading on http within Playcanvas editor/launch runtime and VIsual Studio Code.

I tested the Typescript example which I modified/fixed to confirm it’s working as expected. Also works with normal JS as well. I’m using this template for actual stuff (not just poc examples).

With Typescript, the objective is to try to get the best intellisense (and I’m getting really good results with Visual studio code so far), and best possible DRY as in the following example: https://github.com/Glidias/playcanvas-typescript-babel-intellisense-template/blob/master/src/example.ts . But even on the normal example.js version, you can still get good typings nevertheless, with the .prototype class approach.

In order to get Typescript classes to work with domain-specific Playcanvas’ script instances, I used somewhat a similar approach to what I did with Haxe classes to Vue component objects. But of course, in Typescript, without Macro-ing (in Haxe), runtime decorators have to be used with a slight processing overhead per script. Generally though, I’d use this mainly to manage high application level scripts only, so it shouldn’t be too much of an issue. Notice that I also added script @attrib decorators as well to ensure your attribute names and declared attribute variables (supplied from Playcanvas editor) line up easily with full type-checking within your class!

4 Likes

Thanks @Glenn_Ko for sharing!

Having more options for doing local development in your favorite IDE against the Playcanvas editor is always useful.

Be sure to check out the other branches for different build types. Take note that any different${root}/blahblah/blah root branch implies a completely different set of node_modules dependencies to be installed. (do not mix them up, back up if needed before deleting and switching branches to reinstall everything again)

  • typescript (now the main branch): Just Typescript alone. But it should be the latest webpack and typescript versions.
  • js-ts : As of above but also allows for both Javascript or Typescript. It’s up to you.
  • master: the old deprecated branch that merely updated the old templates to work.

For Vue

  • js-ts/vue : As of above, but with added Vue. But i haven’t tested Typescript in .vue files yet but generally i find Vanilla is suitable enough for vue file. I’ve set the package.json setting to --hot-only instead of hot to avoid refreshing the page everytime you do changes in the .vue file. The only caveat is you need to manually refresh your page if you make changes to your Playcanvas scripts. (Which is pretty fine i think assuming your Playcanvas editor is running in same protocol as well, it could do script-reloading via swap() for those cases and generally manual refresh may be better for some people in general (--hot-only).
  • js-ts/m/vue : Similar to above but uploading and trying experiment with using 2 seperate (multiple) entry files (one for GUI and the other for component scripts). The idea is so you can update app.build.js (GUI stuff) without refreshing the whole browser in Hot Module Reload since main.build.js (which contains Playcanvas scripts) remains unchanged. Take note that since it uses --hot in package.json script it would mean as long as any main.build.js playcanvas scripts gets altered, a refresh will be triggered as well.

For React

  • tsr-js/react : Typescript or Javascript… up to you. Managed to get hot module reload of React components to work with React components with --hot setting, and using only a single entry main file. You may use --hot-only if you do not wish to auto-refresh page when changing your Playcanvas scripts.
1 Like