NubHud - A CUSTOMIZABLE MOBILE HUD

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. :heart:

34 Likes

this module is very good, you’re the goat, akanub! :heart_eyes:

2 Likes

THIS IS SO FIRE!

Thank you so much, I will be using this extensively.

I will definitely will be using this! Great module :white_check_mark::white_check_mark:

This is a great module, the buttons created by CAS look gray and outdated (and also don’t fit with the new buttons).

Where method chaining bruhhhhhhhhhhhh

I will for sure be using this module. Great stuff, keep it up! :coefficients: :coefficients: :coefficients: