Weekly Creator Challenge #4: Experienced Creators

Experienced Creator Challenge: Interactive Interface

Challenge Overview

This challenge introduces you to the concept of building interactive Custom UIs. This is for experienced creators who are already familiarized with adding a Custom UI gizmo to a world and using TypeScript to modify the content of a CUI.

You’ll learn how to:

• Add border formatting to a Custom UI
• Add interactive buttons to a Custom UI to display different images
• Using Bindings to make dynamic changes to a Custom UI

Duration: Mar 17, 2025 - Mar 21, 2025

Estimated Time: 45mins

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

• Quick Start: If you are new to building Custom UIs, check out My First Custom UI challenge here.

Challenge Steps:

Create a Custom UI

• Add a Custom UI gizmo to your world.
• Create a new TypeScript script.
• Enable the horizon/ui API in the Script settings.
• Attach the script to the Custom UI and display a placeholder background color.

Display an image on the Custom UI

• Upload an image to your asset library. This will be the image displayed on the Custom UI.
• Modify the script to include a property variable that connects to a texture asset.
• Upload a texture to your asset library and assign it to the Custom UI script's property variable.
• Modify the script to include an Image node, using the property variable as an input. The final result should display the image on the Custom UI.

Add navigation buttons

• Modify the Custom UI layout to include two navigation buttons: Back and Forward.
• Use a different background color to make them stand out.
• Alternatively, use an image texture (e.g., arrow icons) as button icons.
• Create corresponding binding variables that update when the buttons are pressed. These variables will be used to display different images on the Custom UI.

Add more images and scroll through them by using the navigation buttons

• Upload additional images to your asset library.
• To keep things organized, create a folder for all images used in this challenge.
• Create an additional binding variable to specify the current image displayed on the Custom UI.
• Reference this variable in the Image node.
• Add more property variables and use them to connect texture assets to the script.
• Create a function that updates the displayed image when the pressable buttons are clicked

Make it pop!

• Enhance the style of the Custom UI elements by modifying their configuration.
• Adjust borders, including their color, thickness, and roundness.
• Add a title and modify its font attributes, including the font family.

Skills You’ll Develop: 

• Configuring the format of a UINode (View, Pressable, Image)
• Using interactive buttons (Pressables)
• Using Bindings

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
• Multiple PNGs to use as a slide show in your CUI

Helpful Resources

• Custom UIs Examples and Tutorial
• Custom UI API Introduction
• Custom UI Documentation

How to Earn Your Badge

1. Complete the steps to create your Custom UI design
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)