Virtual Joystick for Stride

A responsive, event-driven virtual joystick component for the 'Stride Game Engine', designed for mobile projects that require smooth, intuitive directional input. This implementation uses two companion libraries for performance and ergonomics:

• Sharp — general-purpose utilities
• Sharp.Collections — lightweight, allocation-friendly collections

The joystick integrates seamlessly with Stride’s UI system and provides both absolute and relative directional input, angle tracking, and radius information.

Features

• 'Absolute & Relative Input' Provides normalized input vectors in both world-aligned and object-relative modes.

• 'Angle & Radius Output' Emits angles in radians and degrees, plus a normalized radius (0–1).

• 'Event-Driven Architecture' Subscribe to:

  • StartedDragging
  • StoppedDragging
  • AbsoluteInputChanged
  • RelativeInputChanged
  • RadiusChanged
  • AbsoluteAngleChanged
  • RelativeAngleChanged

• 'Resolution-Independent UI' Automatically scales and repositions UI elements when the window size changes.

• 'High-Performance Internals' Uses:

  • CommunityToolkit.HighPerformance for Span-based iteration
  • Sharp for functional helpers (Value, Reference, etc.)
  • Sharp.Collections for custom event handler lists

• 'Drop-in Stride UI Integration' Works with Stride’s UIComponent, Canvas, and ImageElement.

Installation

1. Add dependencies

Install or include the following libraries in your Stride project:

• 'Sharp'
• 'Sharp.Collections'

You can add them manually (NuGet packages are not available yet).

2. Add the Virtual Joystick script

Place the following files anywhere inside your Stride game project:

• VirtualJoystick.cs
• IVirtualJoystick.cs
• Angle.cs
• UIElementExtensions.cs

UI Setup in Stride

Your UI layout must contain the following elements:

'Surface' — root Canvas
 ├── 'Zone' — the interactive area (Canvas)
 ├──── 'Threshold' — outer ring image (ContentDecorator)
 └────── 'Thumbstick' — inner stick image

These elements must be named exactly:

Zone
Threshold
Thumbstick

The script automatically locates them using FindVisualChildOfType.

Attach the VirtualJoystick script to the same entity that contains your UIComponent.

Using the Joystick

Subscribing to events

public override void Start()
{
    var joystick = Entity.Get<IVirtualJoystick>();

    joystick.AbsoluteInputChanged += OnAbsoluteInput;
    joystick.RelativeInputChanged += OnRelativeInput;
    joystick.StartedDragging += pos => { /``` ... ```/ };
    joystick.StoppedDragging += pos => { /``` ... ```/ };
}

Example: Move a character

private void OnRelativeInput(Vector2 input)
{
    var direction = new Vector3(input.X, 0, input.Y);
    CharacterComponent.Move(direction);
}

What the Joystick Provides

Absolute Input

Normalized vector based on thumbstick position: (-1..1, -1..1)

Relative Input

Same as above, but rotated by the yaw of 'RelativeObject'.

Radius

Distance from center (0–1).

Angles

• AbsoluteAngleInRadians
• AbsoluteAngleInDegrees
• RelativeAngleInRadians
• RelativeAngleInDegrees

Example

float angle = joystick.AbsoluteAngleInDegrees;
float radius = joystick.Radius;
Vector2 input = joystick.AbsoluteInput;

Architecture Overview

Sharp.Collections

• References — lightweight event listener lists
• Reference — optional single delegate
• Value — optional value wrapper

CommunityToolkit.HighPerformance

• Span-based iteration over Stride pointer events
• DangerousGetReferenceAt for zero-allocation access

Stride UI

• Absolute positioning via SetCanvasAbsolutePosition
• Custom resolution scaling logic

Resolution & Scaling

The joystick:

• Tracks previous and current resolution
• Scales UI elements proportionally
• Recomputes absolute positions on window resize
• Maintains consistent feel across devices

Example Scene Structure

UI Entity  
 ├── UIComponent (with Page containing Surface/Zone/Threshold/Thumbstick)  
 └── VirtualJoystick (script)  

Usage Notes

Remember to enter correct page design resolution in VirtualJoystick parameters to keep correct scaling.

The VirtualJoystick provides a direction based on the orientation of your chosen relative object, allowing your e.g. character to move exactly where the VirtualJoystick points to within that object’s local space.