Overriding onClick behaviour of individual game objects and call as though its a JSX button?

🌵 Needle Engine
1

Hello! Say, I set up a scene with 10 buttons in Unity.

Is it possible to hook onto the different buttons and execute javascript onClick code for them?

I exported the sample for React but it seems to be all wrapped in NeedleEngine- As a simple example, how would I go about prompting a javascript alert when I pick up the trash can object?

Original Post on Discord

by user 884695972863688724

2

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

3

Here is what I found for you :brain: Discord

4

Hello Kaeya,

Yes, it is possible to execute JavaScript code when interacting with buttons or objects in Needle Engine. When working with React, you can still use the Needle Engine API to interact with your scene’s elements and attach event listeners.

For prompting a JavaScript alert when you pick up a trash can object, you would typically use Needle Engine’s event system, specifically by implementing the IPointerEventHandler interface on a component attached to the trash can object.

The process would be something like this:

  1. Create a custom component that extends Behaviour and implements the IPointerEventHandler interface.
  2. In the start method of that component, ensure that an ObjectRaycaster is present in the parent hierarchy or add one if it’s missing.
  3. Implement the onPointerDown method to execute the JavaScript alert function.
  4. Attach this component to the trash can object in Unity before exporting.
  5. Once the scene is exported and loaded in the browser, picking up the trash can object should trigger the alert.

Here is a simple example component in TypeScript:

import { Behaviour, ObjectRaycaster, IPointerEventHandler } from '@needle-tools/engine';
import { serializable } from '@needle-tools/engine/engine.serialization-decorators';

export class TrashCanPickup extends Behaviour implements IPointerEventHandler {

    awake() {
        this.gameObject.getOrAddComponent(ObjectRaycaster);
    }

    onPointerDown(event) {
        alert('Picked up the trash can!');
    }
}

thread_43wPozHUYRtnnDho1QXKudB9

5

Did the bot answer or help with your question? You can also use the click event of the button component to call methods

6

It answered the example I had but not really what we had in mind, what about if I need to make a call from an external javascript library?

by user 884695972863688724

7

Or if I had to reference another function from another javascript file-

by user 884695972863688724

8

I’m assuming this won’t work since it’s defined in Unity

by user 884695972863688724

9

Yes it will - we have samples for those cases :slightly_smiling_face: and remember: Unity is only used to setup the scene but once you’re in the browser you’re working with a web engine just like you would with react three fiber, playcanvas or others - so you can import and export everything from packages the same way.

10

Here’s one example Javascript Communication | Needle Engine

11

The react sample also shows one way to access components from JSX: React Sample | Needle Engine (code: GitHub - needle-engine/react-sample)

12

Yay! Thanks for the references

by user 884695972863688724

13

No problem