Weekly Creator Challenge #4: New Creators

New Creator Challenge: My First Custom UI

Challenge Overview

This challenge introduces you to the process of creating a Custom UI in Horizon Worlds, even if you have never scripted with TypeScript before! Custom UI (User Interface), is a React-based feature that allows you to display dynamic and enriched content, display images, and receive inputs from users. 

You’ll learn how to:

• Find and implement the Custom UI Gizmo
• Add a Custom UI oriented script to the world (using TypeScript)
• Apply basic formatting to a Custom UI
• Upload textures to display on CUIs
• Display an Image on a CUI

Duration: Mar 17, 2025 - Mar 21, 2025

Estimated Time: 45 minutes

Mentor: PigeonNo12

Rewards:

• Challenge Champion Badge 🏆

• Challenge Trifecta Badge 🏆🏆🏆 after completing three challenges

Need Help?

• Forum Support: I’ll be actively monitoring this thread during the Challenge duration to help you succeed
• Live AMA: Join my office hour Build with a Mentor: CUI on 3/20/2025

Challenge Steps:

Follow the instructions in this video to complete this challenge:

Video link:

 

The steps are:

1. Add a Custom UI gizmo to your world
2. Create a TypeScript and enable the horizon/ui API
3. Modify the script to implement the CUI framework
4. Add your first CUI View by changing the background color
5. Add properties variables to the script to connect texture assets
6. Import images that will be used as textures
7. Connect the texture assets to the CUI through the properties panel variables
8. Modify the script to display the image in the CUI

Skills You’ll Develop: 

After the completion of this challenge, you will learn how to:

• Create a Custom UI
• Import images to display in a Custom UI gizmo
• Use TypeScript to make basic changes to a Custom UI display

What You’ll Need:

These are the technical requirements to complete this challenge:

• Meta Quest Link and the ability to launch Horizon Worlds desktop editor
• Visual Studio Code
• A PNG image of your preference

Helpful Resources

• Get started installing the Desktop Editor
• Official Documentation for Custom UIs
• How to configure Visual Studio Code to script in Horizon Worlds

How to Earn Your Badge

1. Complete the steps to create your first Custom UI by following the steps outlined in this video 
2. Publish the world
3. Post to this thread with:
• Your world link
• A screenshot of your creation
• A brief description of your experience (difficulty level, what you learned, suggestions for future challenges)

P.S. Want more of a challenge? Try out the experienced creator challenge here:

https://communityforums.atmeta.com/t5/Events-Competitions/Weekly-Creator-Challenge-4-Experienced-Creators/td-p/1304552