typescript

6 Topics

📅 Join Us for This Week’s MHCP Programming 4/14/25 - 4/18/25
Three weeks remain in the Meta Horizon Creator Competition: Mobile Genre Showdown. Don’t miss the future of Gen AI tools in Meta Horizon Worlds. Learn with MHCP mentors this week in live events designed to improve your art direction, mobile controls, and scripting skills. 🧑‍💻Monday, April 14th 11 AM PT | 6 PM GMT | 2 PM ET - Meta Presents: Using the Power of Gen AI to Master Horizon Worlds Creation Host: Ryan Short, Product Manager, Debraj Ghosh, Product Marketing Manager, and Abhishek Nath, Engineering Manager Register: Sign up here Learn how to rapidly ideate with Meta Horizon’s Gen AI Tools and the future of creating. 👀 See worlds and assets created with currently available and soon to be released Gen AI Tools. 📚 Learn how to use new Gen AI tools within desktop editor to improve your workflows. 🗣 Ask questions from the team developing the latest in Gen AI tooling. 🎨Tuesday, April 15th 11 AM PT | 6 PM GMT | 2 PM ET - Build-Along: Color Scheme Optimization Host: @SpaceGlitterUnicorn Register: Sign up here In this session, you'll learn to create assets that follow specific color palettes while keeping vertex counts optimized. This is your chance to connect with SpaceGlitterUnicorn, troubleshoot, and learn to design within several creative and technical constraints. 👨‍💻 Tuesday, April 15th 12:30 AM PT | 7:30 PM GMT | 3:30 PM ET - Meta Presents: Mobile Genre Showdown Technical Office Hours Register: Sign up here We will be live on Zoom for 30 minutes to chat through your technical questions related to the Mobile Genre Showdown Competition. If you have any bugs, blockers, or technical questions please feel free to post them in advance with any images, videos, etc. and we'll answer them live. 📱Wednesday, April 16th 1 PM PT | 8 PM GMT | 4 PM ET - MHCP Onboarding Host: MHCP Community Manager, William Chandler, and MHCP Program Manager, Marlowe Shaeffer Register: Sign up here If you’ve recently joined the Meta Horizon Creator Program, we invite you to attend an Onboarding call. This call will walk you through the program benefits, orient you into the community, help you start creating, and inform you about upcoming events. And with plenty of time for Q&A, we’ll be ready to answer any questions you may have. 📱Wednesday, April 16th 5 PM PT | 12 AM GMT | 8 PM ET - Workshop: Mobile Player Controls and Focused Interaction Host: Shards632 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. 🖥️ Thursday, April 17th 5 PM PT | 12 AM GMT | 8 PM ET - AMA: Getting Started with Typescript Host: SeeingBlue Register: Sign up here Struggling with Typescript? This beginner-friendly session will help you understand scripts, navigate the API docs, and fix common errors. Bring your questions and coding challenges for practical solutions to build your confidence. 💡 Creators of all skill levels are welcome, so bring your specific questions and learn from the community discussion. Don’t forget to register using the links above to receive reminder emails and add events to your personal calendar.
Ben.SH
3 months ago Place Events & Competitions
347Views
0likes
0Comments
Weekly Creator Challenge #5: New Creators
New Creator Challenge: Simple Asset Spawning Challenge Overview This challenge introduces you to simple asset spawning using the desktop editor and Typescript. You’ll learn how to: Create a Template Asset Edit a Template Asset Use Simple Spawning to spawn your asset. Duration: Mar 24, 2025 - Mar 28, 2025 Estimated Time: 30-45 Minutes Mentor: SeeingBlue 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 Asset Spawning and World Streaming AMA on 3/25/2025 @ 12PM PST. Register here Skills You’ll Develop: Creating an Asset Why: It is the first step to creating expansive dynamic worlds. Uses: Saves objects to be used later in your world or other worlds. Edit an Asset Why: Allows you to correct mistakes or add features to an asset. Uses: Update an asset once and propagate the change to all the worlds that use it. Spawn an Asset Why: Allows you to control the amount of resources being used in your world by determining when, where, and how an asset arrives in your world. Uses: Spawn creatures only when a player is near a specific area, create a grabbable that replenishes each time a player grabs one, and much more! What You’ll Need Meta Quest Link Horizon Worlds desktop editor VSCode Helpful Resources Meta Developers Learn Center: Introduction to Asset Spawning Creator Manual: Simple Spawning Challenge Steps: Download the Challenge PDF in this post and follow the steps. How to Earn Your Badge Complete all the steps in this challenge. Document the changes you made to your asset. Optional: Publish a world with a trigger zone gizmo to spawn your asset. Post to this thread with: A description of your asset. List of changes you made to the asset. Screenshots showing your asset spawned in the world. Optional: A link to a published world with the ability to spawn your asset. P.S. Want more of a challenge? Try out the Experienced Creator Challenge: World Streaming. Join my AMA: Asset Spawning and World Streaming on 3/25/2025 @ 12PM PST. Register here
SeeingBlue
3 months ago Place Events & Competitions
1.8KViews
13likes
7Comments
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
PigeonNo12
3 months ago Place Events & Competitions
1.3KViews
7likes
6Comments
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
PigeonNo12
3 months ago Place Events & Competitions
879Views
6likes
3Comments
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)
PigeonNo12
4 months ago Place Events & Competitions
1.2KViews
8likes
7Comments
Weekly Creator Challenge #5: Experienced Creators
Experienced Creator Challenge: World Streaming Challenge Overview This challenge introduces you to World Streaming in Horizon Worlds. You’ll learn how to: Create a sublevel Dynamically load and unload sublevels Duration: Mar 24, 2025 - Mar 28, 2025 Estimated Time: 1 Hour Mentor: SeeingBlue 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 Asset Spawning and World Streaming AMA on 3/25/2025 @ 12PM PST. Register here Quick Start: If you are new to Spawning, check out my New Creator Challenge: Simple Asset Spawning challenge. Skills You’ll Develop: Creating a Sublevel: This is the first required step to using World Streaming. It allows you to design each level of your world before you load it into the main experience. Dynamically load and Unload Sublevel: This is what makes World Streaming great. It allows you to create larger experiences and recover resources. What You’ll Need Meta Quest Link Horizon Worlds desktop editor VSCode Helpful Resources Meta Developers Learn Center: World Streaming Creator Manual: Sublevels Challenge Steps: Download the Challenge PDF in this post and follow the steps. How to Earn Your Badge Complete all the steps in this challenge Publish your world. Post to this thread with: Your world link A screenshot of your creation A brief description of your experience
SeeingBlue
4 months ago Place Events & Competitions
1.3KViews
12likes
3Comments