Hi,
Is it possible to user 3rd party javascript code/modules in my play game?
Either indirectly (loading from external domain, or by simply pasting the module code into the game files directly). Also, can this code interact with external API’s and bring data into the game?
thanks!
In terms of 3rd party code, you can just add the JS file into the project and change the loading type to be ‘Before Engine’.
Alternatively, you can go into project settings and add the URL to External Scripts
As for modules, I believe they have to be loaded in a particular way? @Leonidas or @will might have some more info on that.
Hi @Sesshomurai,
You can import npm modules directly in a Playcanvas script, unless they provide a browser version which you load as @yaustar adviced.
For npm modules the best approach is to code in your local IDE using a builder like webpack or rollup and sync the code automatically using the playcanvas-sync tool:
Cool. So I do have some node modules I need to import. I already have a webpack/Vue/Node based project/build environment and want to introduce my playcanvas files into that project. Build it into my app and distribute it, hosting the play app myself.
In this scenario, would I just use the playcanvas sync to pull the game files into my project, into some folder and then build my project normally from there? Noting that the hosting is my responsibility?
No CORS related issues there as well?
I guess the other question I’m still unclear about is if I need those node modules in the game on playcanvas server in order for it to work properly (e.g. testing and development)? How do those node modules get imported in that case? Is there a node_modules concept in playcanvas games?
Not via the online Editor. If you would like to use node_modules, you would have to generate the code offline and upload the built JS code to the online Editor. https://github.com/playcanvas/playcanvas-sync can help with getting a workflow set up for this.
If you want a whole PlayCanvas project into a Vue/Node app (e.g like a configurator, that’s where it gets a bit tricky)
@iso74 has done something similar here: PlayCanvas and Vue.js
I’m a little unclear on how you would like to use node_modules at the moment.
I am developing a backend service to visually design complex branching stories and narratives and game entities and need to pull that data into the game at runtime (JSON data). The client API for my game quest service is a node module and needs to run in the context of the game as well as the AI for determining things like NPC behavior. Which is also a node module.
EDIT: I assume I can embed a playcanvas game into any HTML app. I had a separate question about this and the answer was yes. So in my case, the game canvas will be just a HTML tag wrapped by my app and shown/run when needed.
You could build this into a library that is browser runnable (e.g using WebPack) and use that within a PlayCanvas project in the online Editor.
Gotcha. That should work. But how would I introduce it to the playcanvas app from my webpack local build? Do I have to manually put the built node files into the playcanvas project and use require(‘api’)? Then playcanvas-sync to push it up to the server?
Depending on how it’s built, you should just upload the JS file via drag and drop/REST API/playcanvas-sync and it ‘just work’ as long as the API is exposed to the global scope.
Ok, I will start with an experiment for this. Thanks for the help.
Hello dear, were you able to figure out the best way for this playcanvas and HTML (any web app) interaction?
Are you talking about ES6 modules or NPM modules?