How to create a button in Niantic Studio

Can someone give me a short guide on creating a button?

I searched and the only tutorial online is creating a button using the code editor. I don’t know how they are similar or how they work.

Just make the button do something as simple as ‘hello world’

1 Like

If you’re talking about a button in 3D you can look at this sample project:

Hey George,

I was looking for screen UI buttons instead of the ones in a 3D space.

Able to guide me?

If you take a look at the Spatial Audio sample project, you can change the UI type from ‘3d’ to ‘overlay’ to bring it onto the screen. From there you can add more properties.

Okay, I noticed by changing it to overlay, the button image is now on the screen.

But I can no longer press the button.

I tried modifying the code but to no avail. Could you please help again?

The only way I could make it word is to put the image as a child right in front of the camera.


One of the previous winner of the challenge even manage to create a dropdown menu and enter button.

Something seems missing here

Looks like for that project they injected HTML using Javascript. Since Studio experiences are client side web apps you can manipulate the page and add in your own elements, with event listeners etc.

Would you be able to show us an example of how we would inject HTML and still be able to interact with ecs?

I’m running into a similar issue. I have created some UI for a project but now I can’t seem to get events to trigger. They seem to trigger fine when the ui element is set to 3D. I don’t quite understand why we would need to work around this issue.

Another issue is with text alignment. We don’t have the option to center text in any way. What’s the workaround for that?

Alright, one issue at a time.

The goat Declan Johnson in 8th Wall created a game call ‘Mineshaft Mayhem’ and allowed everyone to clone it.

Inside the game has all the UI buttons function that I am looking for that doesn’t require injecting HTML. You just have to reverse engineer the scripts and method he got it to work. (thanks John)

Do open a new thread for text alignment, as I faced the same issue last round.

Assuming I am looking at the right project. They seem to be using planes which is essentially the same as using 3D UI Elements. So basically I will need to re-create my UI in world space.

In addition to overlay elements not triggering events, it seems they also block the globalId events from firing as well. For example, the below works when there is no UI in the way.

world.events.addListener(world.events.globalId, ecs.input.SCREEN_TOUCH_START, (e) => {
          console.log('Triggered')
        })

I have not figured it out so I could not comment on your situation.

Perhaps after I tried it myself or George would be able to help.

I will reply you here once I manage to get it working. You as well, do let us know if you figured it out!

I have been working trying to work with overlay buttons as well. It doesn’t seem like the ecs.input.SCREEN_TOUCH_START works for an overlay like it does for a 3D UI Asset entity. The SCREEN_TOUCH_START event is called when the user has a successful raycast onto a 3D object and when we start using overlays I think they become normal HTML and CSS elements. In that case the raycast won’t work.

In Mineshaft Mayhem I used a combination of Planes nested to the camera and overlay UI components and didn’t have any issues. All of the buttons were planes with an image for a texture. All of the text UI (score) was done with an overlay. I did not use 3D UI because I saw the message “The type of UI. Note: only available to root UI component” in the docs under the type under properties. I didn’t know if 3D UI would work or not if the UI was nested inside of another entity so I just avoided trying it.

Hopefully that all makes sense.

You were right to avoid nesting UI Elements. They either stop displaying or stop triggering events. UI in general is a mess right now.