Introduction
Greetings Roblox Developers
There is a lot of Mobile Users in Roblox, that’s why i decided to made a Module that help you to manage Mobile Buttons easier as an alternative way instead of ContextActionService.
The main objective is to increase the mobile users experience quality by having customized buttons to fit with your game style.
This module allow you to create an unlimited amount of mobile buttons which are 100% customizable, updatable and usable at any time.
Ressource
MobileTouch - Version 2
Last Update: 11 January 2023
Global Improvements Update
- Some verifications and “warn” messages has been added and adjusted.
- [Activated] function name changed to [Button_Activated], and it now support a Button TableName as a first parameter.
- [Updade_Button] function now support a Button TableName as a first parameter.
- Added a new function [Button_SetNewTemplate], it allow you to change the button template design in real time.
- The default starter local script has changed a litle bit.
Tutorial
Everythings is also approximatively explained in the default starter local script !
Template Informations
Ui Templates are the buttons design you’re going tu use for your mobile buttons.
Frame
The Frame, it is the main parent of the template, it is invisible as it mostly serve as a storage to put all the design Ui inside it.
His Name will be your Template name you have to use in the settings table while creating a button in the script (Theme = Template.YourTemplateName).
Once you created a button in the script, the Frame Name will be changed to your Button Name you choosen (Name = "ButtonName").
You don’t need to change it’s size and position as it will be set into the script while creating a button.
Button
The Button, it is the button which will be used to tap on, each template must to have only 1 button, no more, no less.
Of course you can use ImageButton and TextButton, the button have to be inside the main frame and keep his name “Button”.
Infos Folder
The Info folder, there is an Image and a Title inside it, these are the informations hover the button that approximatively say to the user what the button do.
A button can have only 1 info to be shown, a Title text or an Image, so only the selected info will become visible and it’s settings will be applied once you created your button inside the script.
You don’t have to change anything in the Image properties as his Id will be set inside the script, you still can eventualy change his size and position.
You can change the Title however you want, font, color, stroke ect…
Same as the Button, all the objects Info, Title and Image have to keep their name and placement.
RatioConstraint
The UIAspectRatioConstraint, It is just a modifier to make your button keeping his shape and avoid getting deformed in differents screen size.
Other
Other than that, you can edit the Template however you want to do your own button design for your game, just take care to don’t name decoration object as the same name as these important objects.
Some Template are already created by me as a free features and also as examples, you still can duplicate them and put them into a ScreenGui inside the StarterGui, then inspect them and edit them.
Creating Buttons
A new button can be created inside the local script by using a table to refer the main button settings then call the required module function.
Create a new Table
local TableName = {
}
Set the Button Name
Name = "ButtonName";
Set the Button Theme (Template of Button Design)
Theme = Template.DesignName;
Set the Button Info (Image or Title)
Info = {"Title", "Text"};
or
Info = {"Image", "ImageID"};
Set the Button Position
Position = UDim2.fromScale(0.75, 0.55);
Set the Button Size
Size = UDim2.fromScale(0.1, 0.167);
Call the Module Function
MobileTouch.Create_Button(TableName)
Full Example Script
local MobileTouch = require(script.MobileTouch) --Require the module
local Template = script.Template --Get the folder where there is all the buttons designs
local Button1 = { --The button table settings
Name = "Test1"; --Choose the Button Name
Theme = Template.Classic; --Choose the visual Button design (in template folder)
Info = {"Title", "Text"}; --Choose the Button information
Position = UDim2.fromScale(0.75, 0.55); --Change the Button Position
Size = UDim2.fromScale(0.1, 0.167); --Change the Button Size
}
local Button2 = { --The button table settings
Name = "Test2"; --Choose the Button Name
Theme = Template.Classic; --Choose the visual Button design (in template folder)
Info = {"Image", "http://www.roblox.com/asset/?id=11636169482"}; --Choose the Button information
Position = UDim2.fromScale(0.85, 0.4); --Change the Button Position
Size = UDim2.fromScale(0.1, 0.167); --Change the Button Size
}
MobileTouch.Create_Button(Button1) --Create the "Button1" (Name of the Table)
MobileTouch.Create_Button(Button2) --Create the "Button2" (Name of the Table)
Updating Buttons
Once your buttons are created, you have the ability to update their main settings at any time (Exept the button name and template design).
Create a new Function
Don’t forget to put a parameter to the function, it is refering the [selected button] you want to update.
You can choose the parameter name of your choice.
local function Updating(Button) --Function created to update a Selected Button
Button.Info.Title.Text = "Updated" --Change his Title text info
Button.Position = UDim2.fromScale(0.5, 0.1) --Change his position
Button.Size = UDim2.fromScale(0.2, 0.334) --Change his size
wait(1)
Button.Info.Title.Text = "Text"
Button.Position = UDim2.fromScale(0.75, 0.55)
Button.Size = UDim2.fromScale(0.1, 0.167)
end
Call the Module Function
3 options are available for the first parameter while calling this function.
--(TableName, FunctionName)
MobileTouch.Updade_Button(Button1, Updating)
--(TableName.Name, FunctionName)
MobileTouch.Updade_Button(Button1.Name, Updating)
--("ButtonName", FunctionName)
MobileTouch.Updade_Button("Test1", Updating)
Full Example Script (including the button creation)
local MobileTouch = require(script.MobileTouch) --Require the module
local Template = script.Template --Get the folder where there is all the buttons designs
local Button1 = {
Name = "Test1";
Theme = Template.Classic;
Info = {"Title", "Text"};
Position = UDim2.fromScale(0.75, 0.55);
Size = UDim2.fromScale(0.1, 0.167);
}
local Button2 = {
Name = "Test2";
Theme = Template.Classic;
Info = {"Image", "ImageID"};
Position = UDim2.fromScale(0.85, 0.4);
Size = UDim2.fromScale(0.1, 0.167);
}
MobileTouch.Create_Button(Button1)
MobileTouch.Create_Button(Button2)
------------------------------------------------------------
local function Updating(Button) --Function created to update a Selected Button
Button.Info.Title.Text = "Updated" --Change his Title text info
Button.Position = UDim2.fromScale(0.5, 0.1) --Change his position
Button.Size = UDim2.fromScale(0.2, 0.334) --Change his size
wait(1)
Button.Info.Title.Text = "Text"
Button.Position = UDim2.fromScale(0.75, 0.55)
Button.Size = UDim2.fromScale(0.1, 0.167)
end
wait(10)
MobileTouch.Updade_Button(Button1, Updating) --(TableName, FunctionName)
--MobileTouch.Updade_Button(Button1.Name, Updating) --(TableName.Name, FunctionName)
--MobileTouch.Updade_Button("Test1", Updating) --(ButtonName, FunctionName)
Activating Buttons
Buttons can be activated at any time using 4 differents activation modes.
Same as the buttons updates, you have to create a new function first, then use it to do whatever you want when tapping on the buttons.
Create a new Function
local function Action() --Function created to do something when the Selected Button is activated
print("Button Activated")
end
Call the Module Function (4 activation modes)
Mode n°1 - “Pressed”
Play the function when the button is simply pressed.
--(TableName, "ActivationMode", FunctionName)
MobileTouch.Button_Activated(Button1, "Pressed", Action)
Mode n°2 - “PressDown”
Play the function when the button is pressed down.
--(TableName, "ActivationMode", FunctionName)
MobileTouch.Button_Activated(Button1, "PressDown", Action)
Mode n°3 - “PressUp”
Play the function when the button is pressed up.
--(TableName, "ActivationMode", FunctionName)
MobileTouch.Button_Activated(Button1, "PressUp", Action)
Mode n°4 - “HoldPress”
Repeatedly playing the function every (WaitTime) while the user is hold pressing the button, it stop playing when the user stop hold pressing it.
--(TableName, "ActivationMode", FunctionName, WaitTime)
MobileTouch.Button_Activated(Button1, "HoldPress", Action, 0.25)
Like the [Update_Button] function, there is also 3 options for the first parameter.
--(TableName, "ActivationMode", FunctionName)
MobileTouch.Button_Activated(Button1, "Pressed", Action)
or
--(TableName.Name, "ActivationMode", FunctionName)
MobileTouch.Button_Activated(Button1.Name, "Pressed", Action)
or
--("ButtonName", "ActivationMode", FunctionName)
MobileTouch.Button_Activated("Test1", "Pressed", Action)
Full Example Script (including buttons creation & update)
local MobileTouch = require(script.MobileTouch)
local Template = script.Template
local Button1 = {
Name = "Test1";
Theme = Template.Classic;
Info = {"Title", "Text"};
Position = UDim2.fromScale(0.75, 0.55);
Size = UDim2.fromScale(0.1, 0.167);
}
local Button2 = {
Name = "Test2";
Theme = Template.Classic;
Info = {"Image", "ImageID"};
Position = UDim2.fromScale(0.85, 0.4);
Size = UDim2.fromScale(0.1, 0.167);
}
MobileTouch.Create_Button(Button1)
MobileTouch.Create_Button(Button2)
------------------------------------------------------------
local function Updating(Button)
Button.Info.Title.Text = "Updated"
Button.Position = UDim2.fromScale(0.5, 0.1)
Button.Size = UDim2.fromScale(0.2, 0.334)
wait(1)
Button.Info.Title.Text = "Text"
Button.Position = UDim2.fromScale(0.75, 0.55)
Button.Size = UDim2.fromScale(0.1, 0.167)
end
local function Action() --Activation Function
print("Button1 Activated") --Print to see if it work
MobileTouch.Updade_Button(Button1, Updating) --Include a Button Update function
end
MobileTouch.Button_Activated(Button1, "Pressed", Action) --(TableName, ActivationMode, FunctionName)
Setting a new Button Template [NEW]
This function allow you to set a new button template (design) to the selected already created button in real time at any time using only one line of code !
Call the module function
--(TableName, Template.DesignName)
MobileTouch.Button_SetNewTemplate(Button2, Template.Classic)
or
--(TableName.Name, Template.DesignName)
MobileTouch.Button_SetNewTemplate(Button2.Name, Template.Classic)
or
--("ButtonName", Template.DesignName)
MobileTouch.Button_SetNewTemplate("Test2", Template.Classic)
Planned Updates
- Ability to change the default design of “Jump” and “Moving” mobile buttons.
- Ability to set different visual effects to the created buttons while taping on them or permanent moving effects.
- Adding a lot of new Template design for you to use.
Current Template Included
Feel free for you to share your own created templates for free to the community in comments !
Polls
- Yes
- No
0 voters
- Very bad
- Bad
- Medium
- Good
- Very Good
0 voters
Conclusion
Thank you for reading ! 
Having any questions, feedbacks or suggestions, feel free to share them in comment !