How to make Mobile Buttons look similar to Default Mobile Buttons?

Help and Feedback Scripting Support
#1

Hello!

I am making a sprint button, I have everything working right but I want the Mobile button to look like the modern Roblox Mobile buttons we see today, I am using ContextActionService to make the sprinting system.

I want to know how I could make the mobile button look like the Default Roblox mobile button. Here is the script I am using:

local ContextActionService = game:GetService("ContextActionService")
local TweenService = game:GetService("TweenService")

local Player = game.Players.LocalPlayer
local Character = Player.Character or Player.CharacterAdded:Wait()
local Humanoid = Character:WaitForChild("Humanoid")
local Camera = game.Workspace.CurrentCamera

local Sprinting = false

local function Sprint(ActionName, InputState)
	if InputState == Enum.UserInputState.Begin then
		Sprinting = true
		Humanoid.WalkSpeed = 32
		TweenService:Create(Camera, TweenInfo.new(0.1), {FieldOfView = 80}):Play()
	else
		Sprinting = false
		Humanoid.WalkSpeed = 16
		TweenService:Create(Camera, TweenInfo.new(0.1), {FieldOfView = 70}):Play()
	end
end

ContextActionService:BindAction("Sprint", Sprint, true, Enum.KeyCode.LeftShift)

Where would I use this and how would I do this? I have seen games use the “Modern” Roblox buttons and then slapping images on them to make the mobile button fit the UI. I also want to know how I could resize it so it’s not so small.

Here is an Image for those who are still confused on what I’m talking about:

Screenshot_116

How could I do this?

1 Like
#2

I don’t really understand what your asking to know how to do.

If you wanna know how to create mobile buttons then this article from Roblox shows you how to (it also shows you how to delete and customize them if you wanna change the button to look more modern I guess):

If this is not what your looking for could you try to re-phrase/explain to me in a different way of what your looking for!

#3

So what I am trying to say is that I want to make the Mobile buttons look like the Jump button except I want to make it look different with text or an image, here is an image:

Screenshot_117

I want the button to look like the Jump button but with text or an image of somebody running

#4

For more detail, if you have ever played Nicos Nextbots on mobile before, you will see that they have a lot of buttons that look like the Jump button but with an Image of a flashlight

#5

Then just copy the jump button from the UI image button uses for the jump button (you can do this by emulating as a mobile in studio and then going to the mobile button UI and getting the url for the image) and then edit the button texture thing in an editing software and then just upload it as an image on Roblox and when creating a button change the image for the button to the one u edited and uploaded.

You change change the image via this:

image
image1144×318 29.3 KB

#6

MobileUI.rbxm (7.6 KB)

Scripts not included (just copied the default mobile UI from the local player’s ‘PlayerGui’ container).

#7

Ok so I figured it out, but there is another problem with it. Whenever the button is pressed it reverts back to the old button, in this screenshot:

Screenshot_118
The first one is when the player loads in on mobile, and it stays like that until the player presses it

Screenshot_119
Once the player pressed it, then it goes back to this

How do I fix this? Here is the script:

local ContextActionService = game:GetService("ContextActionService")

local TweenService = game:GetService("TweenService")

local Player = game.Players.LocalPlayer

local Character = Player.Character or Player.CharacterAdded:Wait()

local Humanoid = Character:WaitForChild("Humanoid")

local Camera = game.Workspace.CurrentCamera

local Sprinting = false

local function Sprint(ActionName, InputState)

if InputState == Enum.UserInputState.Begin then

Sprinting = true

Humanoid.WalkSpeed = 32

TweenService:Create(Camera, TweenInfo.new(0.1), {FieldOfView = 80}):Play()

else

Sprinting = false

Humanoid.WalkSpeed = 16

TweenService:Create(Camera, TweenInfo.new(0.1), {FieldOfView = 70}):Play()

end

end

ContextActionService:BindAction("Sprint", Sprint, true, Enum.KeyCode.LeftShift, Enum.KeyCode.ButtonL2)

ContextActionService:SetTitle("Sprint", "Sprint")

ContextActionService:GetButton("Sprint").Image = "rbxassetid://6256840888"

ContextActionService:SetPosition("Sprint", UDim2.new(.75, -50, 0, 1))

ContextActionService:GetButton("Sprint").Size = UDim2.new(.2, 0, .2, 0)
#8

MobileScripts.rbxm (5.7 KB)

You need to fork the mobile scripts.

#9

Sorry if im too late it has been 1 year, but you can do this

local function handleAction(actionName, inputState, inputObject)
	if actionName == "Sprint" then
		if inputState == Enum.UserInputState.Begin then
			
		elseif inputState == Enum.UserInputState.End or inputState == Enum.UserInputState.Cancel then
			ContextActionService:GetButton("Sprint").Image = "rbxassetid://6256840888"
		end
	end
end
#10