Mobile Optimized Interaction Buttons

Resources Community Resources
,
#1

This is a simple module script that will help you create buttons for any mobile interface.

image
image1369×778 40.8 KB

image
image1335×807 39.9 KB

Buttons can only be located near the jump button along the top edge.

How to create a button?

Step 1
Create a local script in StarterGui and place the module in it.

image

Step 2
Require the module and create a new button using the following command

local ActionButton = require(script.ActionButton)

-------------------------------------------------

local Button = ActionButton.new()

Screenshot
Screenshot1363×697 41.9 KB

You’ve created your first button, now let’s style it!

Step 3
For styling we will use the following commands

:SetIcon(Image: string)

Sets an icon, although I think you yourself understood this!

:SetStrokeStyle(Params: {any})

These are normal properties and values in table.

:SetIconStyle(Params: {any})

Another one!

Let’s write some simple code

local ActionButton = require(script.ActionButton)

-------------------------------------------------

local Button = ActionButton.new()

Button
	:SetIcon("11932783331")
	:SetStrokeStyle {
		Thickness = 3,
		Transparency = 0,
		Color = Color3.fromRGB(255, 170, 0)
	}
	:SetIconStyle {
		ImageColor3 = Color3.fromRGB(255, 170, 0)
	}
	:SetPadding(10)

Screenshot
Screenshot1364×696 42.2 KB

Wow! We managed to make the button beautiful, but how to make it work?

Step 4
Let’s make our button work, for this we will use the .Clicked method

Let’s create a button for endless jumping!

local ActionButton = require(script.ActionButton)

local Player = game.Players.LocalPlayer
local Humanoid = Player.Character:WaitForChild("Humanoid")

-------------------------------------------------

local Button = ActionButton.new()

Button
	:SetIcon("11932783331")
	:SetStrokeStyle {
		Thickness = 3,
		Transparency = 0,
		Color = Color3.fromRGB(255, 170, 0)
	}
	:SetIconStyle {
		ImageColor3 = Color3.fromRGB(255, 170, 0)
	}
	:SetPadding(10)
	.Clicked:Connect(function()
		Humanoid:ChangeState(Enum.HumanoidStateType.Jumping)
	end)


Now everything works great!

Get it on Marketplace

8 Likes
#2

That looks interesting, I’ll definetly use it for my game !

1 Like
#3

Update 1.1
New methods

style<name>

:GetButtonSize(): UDim2

StyleRules<Type>

Now you can create gradients with Color
Set the corner radius directly in the frame with CornerRadius

local ActionButton = require(script.ActionButton)
local style = require(script.ActionButton.style)

--------------------------------------------------

local Button = ActionButton.new()

Button
	:SetStyle {
		Color = ColorSequence.new {
			ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 255, 255)),
			ColorSequenceKeypoint.new(1, Color3.fromRGB(161, 203, 255))
		},
		BackgroundTransparency = .4,
		CornerRadius = UDim.new(.5, 0)
    }

You can also create your own style rules!

  • Type errors have been fixed.
1 Like