Is there any way to modify the html canvas besides with document.querySelector?

Like, for example I’m doing a script for an npc and I’m doing an onTriggerEnter and I want to render text when the player aproaches. Is there any way to do that with something like a component for vue for example? like onTriggerEnter(){ VueComponent }, where in VueComponent I then would have my html and css ?

Original Post on Discord

by user 483253293477265409

Sure you can e.g. raise events on your components and then receive those events for example in vue to update vue component state. There’s a small sample (without a framework) that does a little bit of that (the Javascript Interop folder in the samples)

every component can raise events btw
this.dispatchEvent(...)

So from vue you can query e.g. all those components (or have one manager for it) in the engine and listen to them (or use a static class/method)

So if I’m getting that right I can create a file in whatever framework and then import it and slap it on a .ts file?

by user 483253293477265409

Not sure what you mean by the last part.

Your vue component has a script part. In that script part you can import types from needle engine and query needle engine types with e.g. getComponentInChildren or findObjectOfType. Just like in the sample i mentioned above

Vue.js sample: Needle Engine Samples
In the repo there’s also a Svelte sample
React too :slightly_smiling_face:

the vue sample doesnt communicate with the engine tho (i did remove that part)