Touch Screen Joysticks

This project is an open-source tool for composing multiple, customized touch screen joysticks with the objective of improving the tooling available to Roblox developers for mobile games.

Installation

roblox-ts

Simply install to your roblox-ts project as follows:

npm i @rbxts/touch-screen-joysticks

Wally

Wally users can install this package by adding the following line to their Wally.toml under [dependencies]:

TouchScreenJoysticks = "bytebit/touch-screen-joysticks@1.0.8"

Then just run wally install.

From model file

Model files are uploaded to every release as .rbxmx files. You can download the file from the Releases page and load it into your project however you see fit.

From model asset

New versions of the asset are uploaded with every release. The asset can be added to your Roblox Inventory and then inserted into your Place via Toolbox by getting it here.

Links

• API Documentation

Example

^{Click here to watch a video demonstration.}

It only takes one line of code to create a joystick! Below is an example of just a handful of lines of code that can be used to quickly generate two joysticks, one on each side of the screen, and print their inputs:

import { CompositeJoystickRenderer, JoysticksManager, RectangleGuiWindowRegion, SolidFilledCircle } from "@rbxts/touch-screen-joysticks";
import { Workspace, GuiService } from "@rbxts/services";

do { wait() } while (!Workspace.CurrentCamera)

wait(1); // To wait for screen to flip to appropriate orientation

const [ guiInsetTopLeft, guiInsetBottomRight ] = GuiService.GetGuiInset();
const realTopLeft = guiInsetTopLeft;
const realBottomRight = Workspace.CurrentCamera.ViewportSize.sub(guiInsetBottomRight);
const guiWindow = realBottomRight.sub(realTopLeft);

const joysticksManager = JoysticksManager.create()

const leftJoystick = joysticksManager.createJoystick({
    activationRegion: new RectangleGuiWindowRegion(new Vector2(0, 0), new Vector2(guiWindow.X / 2, guiWindow.Y)),
    gutterRadiusInPixels: 50,
    inactiveCenterPoint: new Vector2(80, guiWindow.Y - 80),
    initializedEnabled: true,
    initializedVisible: true,
    priorityLevel: 1,
    relativeThumbRadius: 0.6,
    renderer: new CompositeJoystickRenderer(new SolidFilledCircle(Color3.fromRGB(0, 170, 255), 0.8), new SolidFilledCircle(Color3.fromRGB(0, 170, 255), 0)),
});

leftJoystick.inputChanged.Connect(newInput => {
    print("left input", newInput);
});

const rightJoystick = joysticksManager.createJoystick({
    activationRegion: new RectangleGuiWindowRegion(new Vector2(guiWindow.X / 2, 0), new Vector2(guiWindow.X, guiWindow.Y)),
    gutterRadiusInPixels: 50,
    inactiveCenterPoint: new Vector2(guiWindow.X - 80, guiWindow.Y - 80),
    initializedEnabled: true,
    initializedVisible: true,
    priorityLevel: 1,
    relativeThumbRadius: 0.6,
    renderer: new CompositeJoystickRenderer(new SolidFilledCircle(Color3.fromRGB(255, 85, 0), 0.8), new SolidFilledCircle(Color3.fromRGB(255, 85, 0), 0)),
});

rightJoystick.inputChanged.Connect(newInput => {
    print("right input", newInput);
});