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 #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)April Programming: Elevate Your Mobile Horizon Worlds Skills
This April, we're focusing on key skills to elevate your mobile Horizon Worlds development through two structured learning pathways, all centered around essential creator topics: building for mobile, world planning, and 3D model optimization. Immersive Learning Pathway: Experience comprehensive skill development through workshops, challenges, and dedicated office hours in mobile HUD creation, mobile player controls, and world planning. Accelerated Learning Pathway: Dive directly into hands-on challenges followed by expert support sessions to rapidly build your skills in 3D modeling, _Masked textures, and design optimization. Additionally, we're offering stand-alone sessions including a 3D modeling demonstration and a Building in Mobile AMA where you can bring questions on any aspect of your Horizon Worlds mobile projects. This is a great opportunity to refine your skills for the Meta Horizon Creator Competition: Mobile Genre Showdown. Join us this month to strengthen your technical abilities, refine your creative process, and connect with mentors who can help take your worlds to the next level! Register for all events using the newly launched MHCP events Calendar. Immersive Learning Pathway: For the topics of Building in Mobile and World and Game Design, we offer a comprehensive learning sequence: 🧑💻🛠️Attend a Workshop or Build-Along where our mentor demonstrates specific skills or concepts ⚙️Apply what you've learned in a Challenge designed to develop these specific skills 💬 Join AMA during the challenge week to ask questions, get personalized feedback, and refine your approach Hosted by PigeonNo12: 📱🛠️ Build-Along: Mobile Heads-Up Display (HUD) Thursday, April 3rd 5 PM PT | 12 AM GMT | 8 PM ET Register: Sign up here Bring your world’s game's design to the next level by creating a heads up display (HUD) to accommodate interactions and stats information. Watch as PigeonNo12 builds a functional HUD step-by-step and learn techniques you can apply to your own projects. 📱⚙️ Mobile HUD Design Challenge: April 7-11 Take your mobile world to the next level with a functional heads-up display. Design an interface that clearly displays game information while maintaining player immersion. 📱💬 Challenge AMA: Mobile HUD Design Tuesday, April 8th 11 AM PT | 6 PM GMT | 2 PM ET Register: Sign up here Connect with PigeonNo12 during the Game HUD Design Challenge AMA to get feedback, troubleshoot issues, and deepen your understanding of effective HUD development. Hosted by Shards632: 🎮🧑💻Workshop: Mobile Player Controls and Focused Interaction Wednesday, April 16th 5 PM PT | 12 AM GMT | 8 PM ET Register: Sign up here Learn how to use the PlayerControls API to set up event handlers for mobile and web players while still accounting for VR players in the same world. See how to utilize focused interaction for web and mobile users with an example [Interactive Laser Pen](link to video) 🎮⚙️Mobile Focused Interaction Challenge: April 21-25 Create an experience that uses Focused Interaction on web/mobile to allow flat-screen users to 'reach in' and manipulate the world. Challenge yourself to design intuitive controls that provide a seamless experience across different platforms 🎮🛠️ Build-Along: Mobile Focused Interaction Tuesday, April 22th 11 AM PT | 6 PM GMT | 2 PM ET Register: Sign up here Connect with Shards632 during the Mobile Focused Interaction Challenge AMA to get feedback, troubleshoot issues, and deepen your understanding of cross-platform interaction design. Hosted by SeeingBlue: 🌎🧑💻Workshop: World Planning Made Simple Thursday, April 23rd 11 AM PT | 6 PM GMT | 2 PM ET Register: Sign up here Learn how to plan your world creation effectively before diving into production. Watch as SeeingBlue guides you through using a comprehensive world planning document that covers audience, core experience, aesthetics, and monetization. Walk away with access to the new Game Design and World Planning sheet to jump start your next world. 🌎⚙️ World Planning Challenge: April 28- May 2 Apply game design principles and strategies by utilizing the World Planning document from SeeingBlue’s workshop. Challenge yourself to thoroughly plan your next world creation across key categories before beginning production. 🌎💬 Challenge AMA: World Planning Tuesday, April 29th 11 AM PT | 6 PM GMT | 2 PM ET Register: Sign up here Feeling stuck on your world concept? Need a thought partner to refine your ideas? Join SeeingBlue for expert guidance on your World Planning Challenge submissions and get answers to all your world design questions. Accelerated Learning Pathway We're also offering two additional skill-building opportunities in 3D Modeling: ⚙️Dive directly into hands-on Challenges designed for active learning 💬Connect with mentors during dedicated AMA to get feedback, troubleshoot issues, and deepen your understanding Both pathways are designed to help you build real-world skills through guided practice and expert support. Choose the topics and formats that best fit your learning style and creative goals! Hosted by SpaceGlitterUnicorn: 🎨⚙️ _Masked 3D Texture Challenge: March 31-April 4 Spring into April with a fun, festive asset challenge designed to inspire and motivate you. Learn how to create and import an asset with the _Masked texture. 🎨💬 Challenge AMA: _Masked 3D Texture Challenge Tuesday, April 1st 11 AM PT | 6 PM GMT | 2 PM ET Register: Sign up here Connect with SpaceGlitter Unicorn during the _Masked 3D Flower Challenge AMA to get feedback, troubleshoot issues, and deepen your understanding of utilizing the _Masked texture. 🎨⚙️ Color Scheme Optimization Challenge: April 14-18 Create an asset that adheres to our specific color palette while keeping your vertex count under the limit. Challenge yourself to balance creative expression with technical efficiency. 🎨🛠️ Build-Along: Color Scheme Optimization Tuesday, April 15th 11 AM PT | 6 PM GMT | 2 PM ET Register: Sign up here Connect with SpaceGlitter Unicorn during the Color Scheme Optimization Challenge AMA to get feedback, troubleshoot issues, and deepen your understanding of designing within creative and technical constraints. Additional Programming: Stand-alone experiences that focus on the month’s broader topics but are not integrated into a learning sequence: 📱💬AMA: Building in Mobile Thursday, April 10th 5 PM PT | 12 AM GMT | 8 PM ET Host: Shards632 Register: Sign up here Shards632 will answer your questions live on how to make worlds that appeal to mobile users. Bring any issues or road blocks you’re experiencing, and hear other creators work through their design process. 💻💬AMA: Getting Started with Typescript Thursday, April 17th 5 PM PT | 12 AM GMT | 8 PM ET Host: SeeingBlue Register: Sign up here Typescript got you down? Join this beginner-friendly session to better understand scripts, comprehend the API documentation, and fix common errors. Bring your questions and coding frustrations for practical solutions that will help build your confidence and get you started. 🎨🛠️ Build-Along: 3D Asset creation Thursday, April 24th 5 PM PT | 12 AM GMT | 8 PM ET Host: SpaceGlitterUnicorn Register: Sign up here Watch as SpaceGlitterUnicorn demonstrates the art of efficient 3D modeling from scratch! In this improvised modeling session, you'll see real-time decision-making and techniques for creating optimized 3D assets. Learn valuable tips for balancing visual quality with performance as SpaceGlitterUnicorn shares her process and optimization strategies throughout the build. ✈️ Mentor World Tour Thursday, May 1st 5 PM PT | 12 AM GMT | 8 PM ET Host: MHCP Mentors Register: Sign up here Join the MHCP mentors for a Zoom tour around inspiring worlds. See real-world examples of advanced mechanics, art styles, and gameplay loops and learn how to begin implementing them in your own builds.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 creation
Tint and Color Accuracy
Hi all, My team and I are working on a project where color matching is very important. As such, we have an RGB value (one example: 0.0078,0.5333,0.6470 in the blue image) that we are using across both game asset Tints and Custom UI elements. On the custom UI, the color appears correct, but when used as a tint, it's a very different color. This is most noticeable with reds, which appear pink. All of our assets are unlit. With red: Is there a way to make "Tint" function more like a full recolor than whatever it's doing? SpaceGlitterUnicornbecause 3D assets!
Battle for Steel city Universe
For the past year, I've been building a 5-6 world universe. Currently, I have Zone One and Zone Wars live, with Zone 2 and Zone 3 in progress. The initial Zone One project started as a proof of concept—an experiment to see what was possible. At first, it was just an awesome build with no clear idea of how to make it immersive or retain players. Given the complexity of Horizon Worlds, I knew Zone One might appeal more to an older crowd. To help new players, I created a Mod Team to run Steel City and guide newcomers. It worked for a while, but with the long development times of the other worlds, we may have lost some momentum. With our latest addition, 5v5 Zone Wars, I was hoping for a big rollout and strong traffic, especially given Zone One’s popularity. It’s only been a week, so I’ll give it a month to see how things progress. The success of Zone Wars will determine whether I continue this massive project or shift focus. Looking ahead, I’ve learned what works in Horizon and how to streamline experiences. My goal is tomake things easier to understand and more engaging. I plan to create experiences and mini-games under the Battle for Steel City brand to build retention, grow an audience, and establish a universe that can sustain itself with community involvement. This year, I plan to release Zone 2 and Zone 3, along with Zone Racing and an inner-city sport called Blitz Board. There will also be several cinematic story experiences, including rescue missions, defense missions, and the epic battle for Steel City. Exciting times ahead—let’s see where this journey takes us!
