Hotspot images

Has anyone figured out how to integrate images into hotspots? I think I should be able to create a custom component based on hotspot.ts , but before I do so, is there a tried & true solution?

Original Post on Discord

by user 962902844049096704

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…

Hello sensorsovercensors, it seems that there is not a default solution provided for integrating images directly into hotspots in the current Needle Engine documentation. However, customizing the existing hotspot.ts or creating your own component seems to be a viable way to achieve this. If you plan to create a custom component based on hotspot.ts, you can use the rich component system of Needle Engine to extend its functionality.

Here’s a basic outline of steps for creating a component that adds image functionality to hotspots:

  1. Define a new class that extends Behaviour.
  2. Add a @serializable(Texture) field to hold the image texture.
  3. In the start or awake method, create a Sprite or a Mesh with a PlaneGeometry and apply the texture to its material.
  4. Align and position the sprite/mesh relative to the hotspot location.

Feel free to ask if you need an example of how to implement this, and I can provide a code snippet to get you started.

1 messages left GPT 4
thread_wPGV7LofG5BN6Twf1jqYs5VE
Thanks for your feedback!

can you provide me with an example of how to implement this

by user 962902844049096704

@Needle Engine Assistant can you provide me with an example of how to implement this

by user 962902844049096704

Here is what I found for you :brain: Discord

Sure, here’s an example of how you might create a custom component to add image functionality to hotspots:

import { Behaviour, serializable, Object3D, Texture, Mesh, PlaneGeometry, MeshBasicMaterial } from '@needle-tools/engine';

export class ImageHotspot extends Behaviour {
  @serializable(Texture)
  imageTexture: Texture;

  start() {
    // Create a plane geometry to hold the image
    const geometry = new PlaneGeometry(10, 10); // Adjust the size as needed

    // Create a material using the image texture
    const material = new MeshBasicMaterial({ map: this.imageTexture });

    // Create a mesh with the geometry and material
    const imageMesh = new Mesh(geometry, material);

    // Position the image relative to the hotspot
    imageMesh.position.set(0, 0, -5); // Adjust the position as needed

    // Add the image as a child of the hotspot
    this.gameObject.add(imageMesh);
  }
}

In this example, we define a new class ImageHotspot that extends Behaviour. The @serializable(Texture) decorator is used to define a field to hold the image texture. In the start method, we create a plane geometry, a mesh with a basic material using the image texture, position the image mesh, and then add it as a child to the hotspot object.

Make sure to adjust the sizes, positions, and any other parameters as needed for your specific use case. This is just a starting point, and you may need to tailor it to fit your exact needs.

0 messages left GPT 3.5
thread_wPGV7LofG5BN6Twf1jqYs5VE

@Needle Engine Assistant where would I append this custom component

by user 962902844049096704

You have reached your limit of 2 messages… please try again in a few hours

I think you can just add a new image component to the hotspot
pot canvas ui (the hotspot template) and assign the texture to the image component after the hotspot instance has been created

@marcel :cactus: can you elaborate ?

by user 962902844049096704

Hey :wave: you can do it in the exact same way as the 2 text fields that are defined for every hotspot and then are applied to the template.

Let me know if you need further help @sensorsovercensors

@kipash :cactus: Unfortunately it’s not working for me. When I attempt to modify hotspot.ts none of the changes are propogating to the C# scripts, and when I try to create a custom component based off of hotspot.ts It tells me that ‘rawimage’ cannot be accessed due to it’s protection level, so the C# cant be generated there either.

by user 962902844049096704

@Needle Engine Assistant is there a reason why I can’t modify hotspot.ts and generate c# ?

by user 962902844049096704

Here is what I found for you :brain: Discord

Sensorsovercensors, it seems that you may not be able to modify and generate C# for hotspot.ts due to the following reasons:

  1. You have explicitly disabled the generation of the C# component by using the //@dont-generate-component attribute at the top of your Typescript class. This directive tells the TS to C# Component Compiler to skip the generation of the correlated C# script.

  2. The fields in the Typescript component may not have explicit types declared. For the compiler to generate the corresponding C# fields accurately, you must declare Typescript types explicitly, like myField: number = 5.

  3. There could be syntax errors or unsupported constructs in the Typescript file that the compiler cannot translate into C#.

Please check for any of these issues in your code. If the intention is to generate the C# component, ensure that the //@dont-generate-component directive is not present and that the Typescript types are declared explicitly for your component fields. If none of these apply or if the problem persists, please provide more details for further assistance.

1 messages left GPT 4
thread_8mHM7Cm11F6SOMwt1kcMQjRp
Thanks for your feedback!

Hey :wave: thats because the whole sample is in a unity package which doesnt allow changes when downloaded like this.

Option A:
You can inherit from the classes from samples and override and replace the logic from the sample class

Option B:
Copy the scripts to your project and rename the class names. Edit as you see fit.

Option C:
Clone / fork the samples repo and add the package from it directly to your project. Then all changes wont rollback.

Hey @kipash :cactus: I was able to figure it out (I think? )

by user 962902844049096704

I basically copied the original component and renamed the classes like so

by user 962902844049096704

export class imagehotspotBehaviour extends Behaviour {
    
    @serializable(Text)
    label?: Text;

    @serializable(Text)
    content?: Text;

    @serializable(RawImage)
    mainimage?: RawImage;

by user 962902844049096704