Feature Spotlight: Focused Interaction
Have you ever wanted to know what exactly your web and mobile users are pointing at on screen? You can't get their real life hand positions like you can with VR players. That’s where Focused Interaction mode comes to the rescue.
What is Focused Interaction?
With Focused Interaction, you can turn the mobile or desktop view screen into a 'touch sensitive surface' that you can read from your game code! You can find out the x/y position on screen where they have pressed, and even get 'swipe' information as they drag their finger across the screen (or mouse across the window in desktop), to wherever they release.
Additionally, you also get a point in 3D world space and a vector direction that you can use to find out what might be under their finger/cursor in the 3D world.
Important Limitation:
When in Focused Interaction, the player loses some ability to 'move around', as their screen clicks and drags are no longer being interpreted as turning or moving, so you don't want to use this except when you need them to 'focus in' on manipulating some in-world item.
Implementation:
To use focused interaction, you must have a local script owned by the player. You then call
player.enterFocusedInteractionMode()to put the player into FI mode, and when you're done use
player.exitFocusedInteractionMode()to take them back out. Players can also leave by clicking the X in the upper right.
Event Handling
You can listen to CodeBlockEvents for when the player enters or exits focused interaction:
this.connectCodeBlockEvent(this.entity, CodeBlockEvents.OnPlayerEnteredFocusedInteraction, (player) => this.enterFI(player));
this.connectCodeBlockEvent(this.entity, CodeBlockEvents.OnPlayerExitedFocusedInteraction, (player) => this.exitFI(player));Tracking Interactions
While in Focused Interaction, you can subscribe to local broadcast events on the local script to get press, drag, and release information:
this.connectLocalBroadcastEvent(PlayerControls.onFocusedInteractionInputStarted, ({interactionInfo}) => this.onFIPress(interactionInfo));
this.connectLocalBroadcastEvent(PlayerControls.onFocusedInteractionInputMoved, ({interactionInfo}) => this.onFIDrag(interactionInfo));
this.connectLocalBroadcastEvent(PlayerControls.onFocusedInteractionInputEnded, ({interactionInfo}) => this.onFIRelease(interactionInfo));Interaction Data
Each of these events delivers the same sort of info, an array of InteractionInfo structures containing the screenPosition, worldRayOrigin, and worldRayDirection vectors of the user interaction. On mobile, it supports multitouch, by tracking the interactionIndex of each InteractionInfo structure for each finger!
For desktop/web, the interactionIndex will always be 0 and there will always be only one info structure for the mouse cursor.
See It In Action
For an example of Focused Interaction in action, check out my simple "Laser Pen Mechanic (TS)" world:
https://horizon.meta.com/world/10160537969641146/?locale=en_US
Learn More
Documentation on Focused Interaction can be found at the Developer Learn Hub here:
There is also a tutorial module on Focused Interaction here:
As well as a topic in the Horizon Creator Manual:
Note that at the end of the month on 03-27-2025 at 5pm PST / 8pm EST, I will be holding a Build with a Mentor session where we will build up this laser pen from scratch over Zoom, and take questions.
Creative Applications
With some extra math, you can use focused interaction to allow a mobile or desktop player to 'reach in' and drag things around in the world, as well as figure out what they're pointing at.
What will you build with Focused Interaction? Drop your ideas in the comments!
