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: Add a Custom UI gizmo to your world Create a TypeScript and enable the horizon/ui API Modify the script to implement the CUI framework Add your first CUI View by changing the background color Add properties variables to the script to connect texture assets Import images that will be used as textures Connect the texture assets to the CUI through the properties panel variables 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 Complete the steps to create your first Custom UI by following the steps outlined in this video Publish the world 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
Weekly Creator Challenge #7: Mobile HUD Design Challenge
Are you planning to participate in the $1M Mobile Genre Showdown Competition? If so, this challenge will help you polish your skills creating Custom UIs for HUDs. This is a great feature to include in your games to make it easier for players to stay up-to-date with their stats, progress, and world interactions. You’ll learn how to: Design a Custom UI for Heads-Up Display Create interactive objects that communicate with the HUD Update the HUD per player Duration: Apr 7, 2025 - Apr 11, 2025 Estimated Time: 45 mins 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 Challenge AMA: Mobile HUD Design on 4/8 at 11am PST / 2pm EST Challenge Steps: 1. Create the Custom UI Design for the HUD Looking for guidance on how to do it? Check out this step by step video tutorial: Intro to Custom UIs Design UI with a field that will display some type of stats (collected coins, health level, ammo…) 2. Change the Display Mode to Screen Overlay This is where the magic happens! Screen Overlays allow you to use a single CUI gizmo, and display the same layout for all the players in the world Once you enter preview mode, the custom UI will be attached to your screen Here’s some reference documentation: Non-interactive custom UI screen overlay 3. Create and connect the binding variables that will update the HUD during runtime By default, the CUI is static. If we want to change values during runtime (like updating the ammo count) we use bindings. This documentation will help you getting started - Building Dynamic Custom UIs 4. Create the events that will update the HUD We need a way of letting the HUD know that the values have to be updated, and for what player. This is where the events system comes to play Create the events that will be sent from the interactions in the world. For example, colliding with a coin could broadcast an event that would be listened by the HUD, containing the player that performed the interaction as a parameter The events system is powerful like that: allowing you to send information to the entire world without having to reference variables in the properties panel! For guidance on where to start with the events system, check out: Community Manual - Communication Between Components 5. Putting all the pieces together Add an interaction to the world (like a grabbable object), and broadcast an event when the player interacts with it. Don’t forget to include the player as a parameter! Listen to the event in the HUD script, and update the binding variable for that player (see Player-Specific Custom UI) Playtest the experience and observe the changes in your HUD! If you get stuck completing this challenge, I’ll be hosting an AMA (Ask-Me-Anything) Session on Tuesday 4/8 at 11am PST / 2pm EST. Don’t forget to bring your questions! Skills You’ll Develop: Configure the CUI to display stats on the player’s screen Update the CUI with world interaction (e.g. collecting coins) Display information for specific players What You’ll Need: Install and run the desktop editor Adding an IDE to the desktop editor Helpful Resources To complete this challenge, make sure to review the following resources: Intro to Custom UIs API Reference Custom UIs Examples Tutorial UI Component Class User-Defined Components for Custom UI How to Earn Your Badge Create a custom UI that displays stats on the player’s screen, that updates when interacting with elements in the world Publish the world Post to this thread with: Your world link A screenshot of your creation A brief description of your experience Or any follow up questions that you may have about your creationWeekly 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 Complete the steps to create your Custom UI design Publish the world 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)
