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â
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.
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.