Thumbstick Module - Easy Mobile Touchscreen Joystick!
– made by @jlhklmn
What is this module?
This is a module for custom touchscreen (mobile/tablet) joysticks/draggers. Similarly to the touchscreen joysticks for walking that Roblox’s default UI provides, this module allows you to easily make and customize your own joystick for many reasons, and it’s not limited to only walking!
Previews
Video Showcase
This video shows three examples of what you can do with this module (not including custom functionality) and the dynamic device input adaptation.
Example #1 is a ‘Hidden’ type joystick, while #2 and #3 are ‘Visible’ type.
Features
- Two types of joystick mode, ‘Hidden’ which behaves like Roblox’s default joystick which the joystick appears where you tap on the screen, and ‘Visible’ which is a stationary joystick that is visible at all times.
- Easily customizable UI, you can just duplicate some pre-made templates, rename and change the UI to how you want it to look, and it’s done! (Dragger themes, explained in detail later)
- Supports multiple fingers on the screen at once, in case for whatever reason you need more than 1 dragger on the screen this module would still work accordingly.
- Dynamically adapts to when device’s input changes, the dragger disappears when a keyboard is connected and re-appears when it disconnects.
- Simple to use, you can make a button with less than 10 lines of code (including the button configurations) and clean joystick design
Tutorial & Informations
Getting Started
Every time you create a joystick, it will be placed into a specific ScreenGui which will be created if none exists. To create a joystick, you can do the following:
local Thumbstick = require(moduleLocation) -- Replace moduleLocation with the path to the module
local config = {
Position = UDim2.new(0.8, 0, 0.6, 0),
UiType = 1,
}
local joystick = Thumbstick.new(config)
That’s pretty much how you make a joystick. Pretty easy!
How you might actually make the joystick work with your own code is through the .Changed event that the ThumbstickObject you created has. You can now go ahead and look at the more detailed API for more info!
A more detailed API
Module Methods
local joystick = Thumbstick.new(config)
Creates a new ThumbstickObject.
Parameter Format
local config = {
Position --UDim2 (Position of the joystick, for 'Visible' type joysticks)
Size --UDim2 (Size of the joystick)
UiType --number (Type of the joystick, 'Hidden' or 'Visible')
Theme --string (Themes of the joystick, more info below)
ImageId --number (Image id for the image on the joystick)
Deadzone --number (How far you can drag the joystick away from it's origin)
TouchZone --{Size: UDim2, Position: UDim2} (The area where you can drag the joystick in, for 'Hidden' type joysticks)
}
Thumbstick:ClearUis()
Clears all existing ThumbstickObjects.
ThumbstickObject Properties, Methods & Events
local joystick = Thumbstick.new(config)
--// Properties
joystick.InputObject --The input object for touch detection
joystick.Type --Type of joystick ('Hidden' or 'Visible')
joystick.IsDisabled --boolean, true if the joystick is disabled
joystick.StartPosition --Starting position of the joystick, it updates if the joystick type is 'Hidden'
--// Methods
joystick:Enable() --Enables the joystick if it's disabled. This changes the .IsDisabled property.
joystick:Disable() --Disables the joystick, hiding it and preventing interactions with it. This changes the .IsDisabled property.
--// Events
joystick.Began --Fires when a joystick first moves
joystick.Ended --Fires when a joystick has been released
joystick.Changed --Fires whenever the joystick has been moved, passes the joystick direction as an argument
(The module is not coded to change whenever the property changes so try not to modify these properties directly)
What are Themes
Themes are basically different styles you can pick for your joysticks to look like. There are 5 theme templates you can mess around or duplicate to modify with, and the default one (which is ‘Modern’, modify it if you want but don’t delete it).
(The 6 pre-made themes)
To customize your own button, first duplicate any pre-made themes. Then, rename them to what you want your theme to be, and you can start editing the Ui to how you want it to be.
To use the theme when creating the button, simply set ‘Theme’ inside the config parameter to the name you have your theme set to, and it should use that when you join the game. Simple as that!
Links
Module - Link
Testing Demo - Link (Mobile & Tablet only, download a copy if you’re on computer instead)
*If you’re testing with the copy on computer, make sure to change your device inside the testing tab to a mobile or tablet device for it to work.
*The testing demo doesn’t include any functionality for the joysticks, it only contains examples for displaying how the joystick can be used for
Lastly, if there’s any issues please let me know, although I don’t open forums often so I might not respond immediately, apologies for that in advance. Have fun with the module!