Mobile Thumbstick

Hi, I’m trying to make a Mobile Thumbstick, but I don’t know how to create a Thumbstick. Any help? It could be UIClickDetector or Input. ,´)

I already made an script without Thumbstick:

local UserInputService: UserInputService = game:GetService("UserInputService")
local GuiService: GuiService = game:GetService("GuiService")
local RunService: RunService = game:GetService("RunService")
local Players: Players = game:GetService("Players")

local player: Player = Players.LocalPlayer or Players.PlayerAdded:Wait()
local character: Model = player.Character or player.CharacterAdded:Wait()
local humanoid: Humanoid = character:WaitForChild("Humanoid")

local touchGui: ScreenGui = script.Parent
local controlFrame: Frame = touchGui:WaitForChild("TouchControlFrame")

local thumbstickFrame: Frame = controlFrame:WaitForChild("ThumbstickFrame")
local outerFrame: Frame = thumbstickFrame:WaitForChild("OuterFrame")
local stickFrame: Frame = thumbstickFrame:WaitForChild("StickFrame")
local dragDetector: UIDragDetector = stickFrame:WaitForChild("DragDetector")

local jumpButton: TextButton = controlFrame:WaitForChild("JumpButton")
local jumpImage: ImageLabel = jumpButton:WaitForChild("JumpImage")

local jumpDebounce: boolean = false
local pressing: boolean = false

local jumping: Enum.HumanoidStateType = Enum.HumanoidStateType.Jumping
local freefall: Enum.HumanoidStateType = Enum.HumanoidStateType.Freefall
local physics: Enum.HumanoidStateType = Enum.HumanoidStateType.Physics

local color150: Color3 = Color3.fromRGB(150, 150, 150)
local color50: Color3 = Color3.fromRGB(50, 50, 50)

local centerPosition: UDim2 = UDim2.new(0.5, 0.5, 0.5, 0)
local taskWait: any = task.wait

local function jump()
	if humanoid and not (humanoid.Health <= 0) then
		humanoid.Jump = true
		humanoid:ChangeState(jumping)
	end
end
jumpButton.MouseButton1Down:Connect(function()
	jumpButton.BackgroundColor3 = color150
	jumpImage.ImageColor3 = color50
	pressing = true
end)

jumpButton.MouseButton1Up:Connect(function()
	jumpButton.BackgroundColor3 = color50
	jumpImage.ImageColor3 = color150
	pressing = false
end)

RunService.Heartbeat:Connect(function()
	if pressing then
		local state = humanoid:GetState()
		if state ~= physics and state ~= freefall and state ~= jumping then
			taskWait(0.025)
			jump()
		end
	end
end)

dragDetector.DragEnd:Connect(function()
	stickFrame.Position = centerPosition
end)

local function onTouchChanged()
	touchGui.Enabled = UserInputService.TouchEnabled
end

onTouchChanged()
UserInputService:GetPropertyChangedSignal("TouchEnabled"):Connect(onTouchChanged)
GuiService.TouchControlsEnabled = false

task.wait(0.025) --task.wait(0.033)

unless there is something else

Create a draggable frame (if you can’t do it yourself, this should be helpful. When it is released (frame.InputEnded), return it to its original position (center of acceptable range). You can evaluate the thumbstick X and Y values by expressing the X and Y position of the frame as a percentage of the acceptable range (e.x. X / (0.25(screenWidth)), Y / (0.25(screenWidth))). I won’t include code here, as I’m unable to test it. However, if you need further clarification on the implementation, I would be happy to elaborate.