Mobile

Cross-Platform Best Practices

Horizon Creator Academy

Hands-On Challenge: Cross-Platform Best Practices

Hands-On Challenge Overview

This challenge shows how to detect the local player’s device. You will practice conditional visibility and choosing the right overlay interaction mode depending on the player's device.
You’ll learn how to:
  • Configure Non Blocking vs Blocking overlay modes
  • Transfer ownership of overlay entities
  • Read Player Device Type (VR / MOBILE / WEB)
Estimated Time: 1 hour

What You'll Need:

  • Windows PC
  • Access to the Worlds Desktop Editor
  • Visual Studio Code

Challenge Steps:

1. Place Custom UIs
  • Add two Custom UI gizmos and rename them for clarity: CrossScreenOverlay and VrOverlay.
  • CrossScreenOverlay → Set the Mode to Screen Overlay, Interactive Non Blocking
  • VrOverlay → Set the Mode to Screen Overlay, Interactive Blocking
2. Transfer UI Ownership
  • Create a server-executing script (e.g. OverlayOwnerAssigner).
  • Add entity props for the two overlay entities.
  • On player enter world: assign the entering player as owner of the overlays.
  • On player leave: clear ownership of the overlays.
3. Add UI Script
  • Enter Preview Mode to test the interaction.
  • Observe how your avatar's hand attaches to the object. Does it look natural? If not, exit preview mode and continue adjusting the grab anchor settings until it feels right.
  • Test our throwing the physics-enabled object.
4. Detect Device Type
  • Add a property definition for isCrossScreen
  • On the Custom UI properties panel,
    • Toggle it on for the CrossScreenOverlay
    • Toggle it off for the VrOverlay
  • On start: Get entity owner and read the device type.
    • If isCrossScreen is true and device type is VR, the entity visibility should be set to false
    • If isCrossScreen is false and device type is VR, the entity visibility should be set to true
  • On initializeUI: Check isCrossScreen and return a view with a text view that says whether it is cross screen or not.
5. Test On Device
  • In VR: only VrOverlay appears
  • In Mobile/Web: only CrossScreenOverlay appears

Level Up:

  • Create a simple piece of gameplay that changes using the same PlayerDeviceType check.
  • Experiment with grip poses to see how grabbable objects animate the avatar in Mobile and Desktop.

Need Help?

Related Links