Implementing a Virtual Joystick for Mobile Games
A virtual joystick seems simple until the first playtest. Eight lines of code using Input.GetTouch and Vector2.Normalize work on the developer's device. On a 5.4" phone in landscape mode, your thumb covers the joystick zone, and the player loses their positional reference.
Key Implementation Parameters
Fixed vs Floating Joystick. Fixed—center always at the same screen position. Floating—center appears where the player first touched. For shooters and action games, floating is preferable: it adapts to your grip. But it has its own issue—if the activation zone is too large, the joystick can appear on accidental UI touches.
In Unity, implement via RectTransform in Canvas with ScreenSpace - Overlay. The joystick center is backgroundRect.anchoredPosition, the knob is knobRect.anchoredPosition. Calculate direction:
Vector2 delta = touchPosition - joystickCenter;
float distance = delta.magnitude;
Vector2 direction = delta / Mathf.Max(distance, radius); // normalize considering radius
knobRect.anchoredPosition = direction * Mathf.Min(distance, radius);
inputDirection = direction; // [-1,1] per axis
Dead Zone. Without a dead zone, the character jerks from tiny finger movements. Usually 0.15–0.2 of the radius—depends on the game. Racing games have smaller dead zones, strategy games larger.
Responsive Feel
Smoothness—via Vector2.Lerp or Vector2.MoveTowards when updating knob position:
knobRect.anchoredPosition = Vector2.Lerp(
knobRect.anchoredPosition,
targetKnobPos,
Time.deltaTime * followSpeed
);
followSpeed 15–25 gives inertia that feels "physical." Above 40, inertia disappears, the knob moves instantly—good for shooters, not for platformers.
On Godot 4 similarly: Control node with custom _draw() for background and knob, update via _input(event) on InputEventScreenDrag.
Multitouch
Movement joystick and aiming joystick—two independent objects. Each locks its touch's fingerId on TouchPhase.Began and only processes events with that fingerId. Without this, quickly lifting one finger and touching another zone can transfer control to the wrong joystick.
Integration: 2–3 days. Cost calculated individually.