Forum Discussion

PigeonNo12's avatar
PigeonNo12
Partner
9 months ago

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?

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:

Helpful Resources

To complete this challenge, make sure to review the following resources:

How to Earn Your Badge

  1. Create a custom UI that displays stats on the player’s screen, that updates when interacting with elements in the world
  2. Publish the world
  3. 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

 

CustomUI
mobile
mr
TypeScript
Web

3 Replies

Recent Discussions