Hi, non-coder here, so please excuse me if this is super simple to solve.
I’ve created a simple game in 8th Wall Studio based on the recent walkthrough made by 8th Wall themselves (https://www.youtube.com/watch?v=SSzvLGHgGfY&t=2221s), but I would like to add a start screen to the experience (which is not part of the tutorial) that pops up once the game is loaded - and that seems to be a monumental task for me.
I’ve tried the internet and worked with both ChatGPT and Gemini to create a component file in Studio that does the job, but it just doesn’t work.
I currently have a component file that manages to add a solid color screen with generated text, but it’s far from what I wish. Here’s a screenshot of the setup with the component file.
Any help would be much appreciated!
Hi Soren! Welcome to the forums! 
I’m currently working on a sample project to demonstrate this since it’s a frequently asked question.
At a high level, the approach involves creating a start-menu component powered by a State Machine. It would begin in an idle state, waiting for a button tap. Once the button is tapped, the State Machine transitions to the next state, broadcasting a global event to notify all entities that “The experience has started!”
To add a few comments with the provided code:
1- are you attaching the custom component to an entity in the scene?
2- relative paths need to be wrapped with require() in js/ts files. i.e. require('./assets/Loadscreen.png')
While it’s possible to dynamically inject HTML into the DOM as you’ve done here - a better approach would be to utilize Studio’s built-in UI system.
Hi George! Thanks, happy to be here!
Sounds really nice that you are looking into this! Looking forward to try it out.
Thanks for your reply, Evan!
1- I’ve attached the custom component to the camera in the scene and I do get the solid background and the generated text from the custom component (when it loads), that can be tapped to dismiss at the start - just not the image.
2- Thanks for the tip! “require” is getting “Cannot find name ‘require’. Do you need to install type definitions for node? Try npm i --save-dev @types/node.(2580)” which is beyond my non-coder knowledge sadly.
I did try using Studio’s built-in UI system, but I can’t see how to get the ‘tap to dismiss/start’ functionality in it - i.e. if tap, then close. Is that something that is already in there? As far as I can see it’s basically only position, scale and opacity (I have tried activating all properties to be sure). I’ve also looked at your documentation, but it doesn’t reveal anything in that direction.
