Create a clean game HUD for Worlds

Learn what it takes to build a great mobile Heads-Up Display (HUD) in a session driven by real creator questions and expert answers. Join mentor PigeonNo12 as she answers the community’s most pressing questions about designing and scripting mobile UIs. This technical Q&A provides the building blocks for more advanced UIs, with a focus on scripting interactive animations and optimizing your UI for performance on any device.

Build a Mobile HUD in Worlds: Step-By-Step

Build a fully functional mobile Heads-Up Display (HUD) from scratch in this step-by-step technical workshop. Follow along with mentor PigeonNo12 as she designs and scripts a dynamic HUD for a coin collection game. The session covers the entire creation process, detailing the UI layout with flexbox and the scripting required for real-time health and score updates.

📚 RESOURCES & DOCUMENTATION

This session explores a wide range of topics related to building for mobile and measuring performance.

➡️ Designing Worlds For Mobile: https://developers.meta.com/horizon-worlds/learn/documentation/create-for-web-and-mobile/designing-worlds-for-mobile-and-web/designing-worlds-for-mobile

➡️ Using Performance Tools from Web and Mobile: https://developers.meta.com/horizon-worlds/learn/documentation/performance-best-practices-and-tooling/performance-tools/using-performance-tools-from-web-and-mobile

➡️ Create for Web and Mobile Overview: https://developers.meta.com/horizon-worlds/learn/documentation/create-for-web-and-m

➡️ Mobile HUD Scripts: https://github.com/MHCPCreators/worlds-documentation/tree/main/docs/creating-a-world/utils/Mobile%20HUD

➡️ Custom UI Controls: https://developers.meta.com/horizon-worlds/learn/documentation/desktop-editor/custom-ui/custom-ui-controls

➡️ Custom UI Optimization: https://developers.meta.com/horizon-worlds/learn/documentation/performance-best-practices-and-tooling/performance-best-practices/custom-ui-optimization

➡️ Using Performance Tools from Web and Mobile: https://developers.meta.com/horizon-worlds/learn/documentation/performance-best-practices-and-tooling/performance-tools/using-performance-tools-from-web-and-mobile