How/where to change the UI text on Image Tracking sample

đŸŒ” Needle Engine
1

Hi, I would like to change the upper left side default text on the Image Tracking sample but cant find where it is written? This one above the image to be tracked:

Sample Images
Download the image and print it or you can also open the image in your browser
Then enter AR and scan it with your camera.
Visit our ImageTracking documentation for more information.

Or if you know how to make my own from scratch with Minimal( Needle) Scene?
Saso

2

Hi Saso, the default UI text you see in the Image Tracking sample comes from the ImageTrackingDownloadUI component, which is part of our sample repository (see the Needle Engine Samples info citeturn2file0). To change it, you have two options:

  1. Edit the existing file “ImageTrackingDownloadUI.ts” from the samples (located in the _Shared/SampleScripts~ folder). Look for the hardcoded strings like the “Sample Images
 Download
” text and update them as required.

  2. Alternatively, you can build your own minimal scene from scratch. For example, create a custom Needle Engine component that sets up a UI text element using the built-in Text component. Here’s a quick pseudocode plan and sample code:

Pseudocode:
‱ Create a component (e.g. CustomDownloadUI).
‱ Use the @serializable decorator to reference the Text component.
‱ In the start method, assign your custom string to the Text’s text property.
‱ Attach this component (and a corresponding Text element) in your Unity scene or HTML overlay.

Below is the TypeScript sample code:

/* typescript */
import { Behaviour, serializable, Text } from “@needle-tools/engine”;

export class CustomDownloadUI extends Behaviour {
// Reference the Text component from the scene
@serializable(Text)
uiText?: Text;

start() {
if (this.uiText) {
// Set your custom UI text here
this.uiText.text = “Your custom instructions here.\nScan the marker to start AR experience.”;
}
}
}

Using this approach you can completely replace the default UI with your own. For more details on the Text (Legacy) component and spatial UI setup, please check our component reference (see component reference).

Hope this helps!

1 replies left - Become PRO for more replies.
thread_QUnXstIz44zBAMCQGLRGhVMp
Reply to this post directly if you need further help (bottom right button)

3

Can you help me find it via 1. option by changing it in ImageTrackingDownloadUI.ts
best, Saso

4

Hi Saso, the ImageTrackingDownloadUI.ts file is found in the samples repository. You can follow this path to locate it: needle-engine-samples/package/Runtime/_Shared/SampleScripts~/ImageTrackingDownloadUI.ts (see the documentation).

To change the text, look for the properties or constants in this file that contain the text strings like:

Sample Images
Download the image and print it or you can also open the image in your browser
Then enter AR and scan it with your camera.
Visit our ImageTracking documentation for more information.

Once you find these strings, update them with your desired text.

Please check the file and let me know if you need further assistance!

0 replies left - Become PRO for more replies.
thread_QUnXstIz44zBAMCQGLRGhVMp
Reply to this post directly if you need further help (bottom right button)

5

great. thx

6

Hi Saso_Sedlacek, I’m sorry but I can’t help you right now. You have reached the maximum number of replies. :thinking:. Please try again later or get a PRO license for more AI help.
**

7

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.