INTRODUCTION
NubHud is a module in which you can create customizable buttons for touch-enabled devices.
It works in a simple way, allowing you to create, edit, and delete buttons with just a few lines of code.
Why Use this?
Unlike the conventional buttons in Roblox, created with Context Action Service, the buttons created with NubHud can be almost fully customized, allowing you to create a more attractive mobile HUD for players. The module already comes with editing functions, enabling the player to edit the position and size of each button.
ACCESS
You can get it from Roblox Marketplace
API
Methods
NubHud.Enable()
Enable all buttons visibility
NubHud.Disable()
Disable all buttons visibility
NubHud.new(ButtonName : string) : Button
Create a new button
Button:GetConfigs() : table
Return a table with button Position and Size
Button:SetLabel(Text : string)
Set button label
Button:SetImage(Image : string)
Set button image
Button:SetSize(Size : UDim2)
Set button size
Button:SetPosition(Position : UDim2)
Set button position
Button:BindToFunction(BindName : string, Function)
Bind button events to a function
Button:UnbindFunction(BindName : string)
Unbind the function
Button:Destroy()
Destroy the button.
Events
NubHud.HudChanged : table
Fires when the HUD is modified by the player
Return all buttons configs
Button.TouchStarted
Fires when player starts pressing the button
Return button name and input state
Button.TouchEnded
Fires when player stop pressing the button
Return button name and input state
Properties
Button.IdleImageId
Button Idle Image
Button.PressedImageId
Button Pressed Image
Button.Locked
Defines whether the player can edit the button
Examples
Creating a button
local UserInputService = game:GetService("UserInputService")
if UserInputService.TouchEnabled then
local NubHud = require(game.ReplicatedStorage.NubHud)
local ExampleButton = NubHud.new("Example Button")
end
By simply doing this, you will already have a button that can be used, with the default HUD settings.
It is not recommended to require the module if the player doesn’t have touch enabled, as the HUD is already created when you require it.
Setting up the button
By default, the button will appear in the center of the screen with a size of 50 pixels and without an image or text. You can edit the button using some simple methods.
local UserInputService = game:GetService("UserInputService")
if UserInputService.TouchEnabled then
local NubHud = require(game.ReplicatedStorage.NubHud)
local ExampleButton = NubHud.new("Example Button")
ExampleButton:SetLabel("Example button")
ExampleButton:SetPosition(UDim2.new(0.8, 0, 0.375, 0))
ExampleButton:SetSize(UDim2.new(0, 100, 0, 100))
local ExampleButton2 = NubHud.new("Example Button 2")
ExampleButton2:SetImage("http://www.roblox.com/asset/?id=9011713759")
ExampleButton2:SetPosition(UDim2.new(0.9, 0, 0.3, 0))
end
Using the button events
The button has 2 events that can be used to detect when the player presses and releases the button, as well as a method that allows you to connect both events directly to a function.
local UserInputService = game:GetService("UserInputService")
local function OnButtonEvent(ButtonName, InputState, BindName)
print(`{ButtonName} touch {InputState.Name}`)
end
local function OnTouchStarted(ButtonName, InputState)
print(`{ButtonName} touch started`)
end
local function OnTouchEnded(ButtonName, InputState)
print(`{ButtonName} touch ended`)
end
if UserInputService.TouchEnabled then
local NubHud = require(game.ReplicatedStorage.NubHud)
local ExampleButton = NubHud.new("Example Button")
ExampleButton:SetLabel("Example button")
ExampleButton:SetPosition(UDim2.new(0.8, 0, 0.375, 0))
ExampleButton:SetSize(UDim2.new(0, 100, 0, 100))
ExampleButton.TouchStarted:Connect(OnTouchStarted)
ExampleButton.TouchEnded:Connect(OnTouchEnded)
ExampleButton:BindToFunction("Example Bind", OnButtonEvent)
end
There are other things in the API that I didn’t explain the usage of in the examples, as they are for more specific cases.
Any bug reports, please comment here so I can resolve them as quickly as possible. 
