Xyon • ui library specially for buttons [REWORKING]



XYON • UI LIBRARY SPECIALLY FOR BUTTONS


Preview:


Update Logs:

V1.2: The Mobile Update

New Setting:

  • largerMobileButton

UI:

  • Arrow added for mobile, clicking it will show 1 to 4 buttons maximum. Can be disabled using
xyon:editSetting({multipleButtonActivated = false, largerMobileButton = false})
V1.1: The Optimisation Update

Fix:

  • Mobile UI scale bug (ui size was too big for mobiles)
  • Multiple Button Option Bugging when Disabled

New Functions:

xyon:Show(buttonID)
xyon:Hide(buttonID)
xyon:editSetting({})
-- example: xyon:editSetting({MultipleButtonActivated = false, largerMobileButton = true})

Removed Function:

xyon:Start(false)
-- Don't need it, it's starting by himself when you create a button.

Module renamed (UX → XYON) on the module + module improvement

V1.0@fix: The Fixing Update

Fix:

  • UI not scalling properly
  • Mobile can’t use the module
  • button Transparency not changed when mouse release

Module renamed (UX → XYON) on the devforum

V1.0: The Release

New Functions:

 xyon:Start(multipleButtonActivated: boolean) -- NOT WORKING ANYMORE
 xyon.newButtons(buttonId: number, imageId: number)
 xyon:CreateKeyCode(keycode: Enum.KeyCode, buttonId)
 xyon:Lock(buttonId)
 xyon:Unlock(buttonId)

New Events:

 local button = ux.newButtons(1, 13673234122)
 button.MouseEnter:Connect(function() end)
 -- Event activated when the mouse enter the button.
 local button = ux.newButtons(1, 13673234122)
 button.MouseLeave:Connect(function() end) 
  -- Event activated when the mouse leaved the button.
 local button = ux.newButtons(1, 13673234122)
 button.MouseDown:Connect(function() end) 
 -- Event activated when the mouse click down on the button.
 local button = ux.newButtons(1, 13673234122)
 button.Activated:Connect(function() end) 
 -- Event activated when the button is clicked. working for both mouse and keycode.

Tutorial:

  1. Download the module.
  2. Put it in your place.
  3. Create a localScript in StarterGui or anything that can run in local.
  4. Create your script! here is an example if that help:
local xyon = require(game:GetService('ReplicatedStorage').XYON)
xyon:editSetting({MultipleButtonActivated = false})

local button1 = xyon.newButton(1, 13673234122)
xyon:CreateKeyCode(Enum.KeyCode.One, 1)

local button2 = xyon.newButton(2, 13673739165)
button2.Activated:Connect(function()
	print('Button Activated!')
end)

xyon:CreateKeyCode(Enum.KeyCode.Two, 2)


Any suggestion are appreciated!

9 Likes

Why would we use your module, rather than simple buttons? From your video, I can also see that scaling/positioning is done wrong…

3 Likes

In my video, there is the output, the scale of the widget can bug the things (like every widget). If I test on roblox on every device this will scale properly. Concerning the utilisation of my module, You can use simple buttons but like every modules it is not necessary to use it. It is a help tool.

It wouldnt if you have used offset in Y.

Y position should be around 1, -50 ( mess with offset obviously )

1 Like

Currently working on the V1.0@fix, I founded multiple bugs that can make games don’t working, here the list:

  • UI not scalling properly and UI totally not scalling (fixed)
  • Mobile can’t press buttons (bis)
  • Small Transparency bug (bis)
  • Button Activated Detection bug (working on it)
  • others

I recommend a different name, as UX is already a common term in development, this will definitely cause confusion.

thanks, i’ll rename it xyon instead of ux.

UPDATE V1.1

Fix:

  • Mobile UI scale bug (ui size was too big for mobiles)
  • Multiple Button Option Bugging when Disabled

New Functions:

xyon:Show(buttonID)
xyon:Hide(buttonID)
xyon:editSetting({})
-- example: xyon:editSetting({MultipleButtonActivated = false})

Removed Function:

xyon:Start(false)
-- Don't need it, it's starting by himself when you create a button.

Module renamed (UX → XYON) on the module + module improvement

What’s the next Update

the next update will be for mobile and probably fix of bugs. There is no bug at the moment. You will have an option named ‘BiggerGuiForMobile’, it will be a boolean, if you put true, it will show a arrow. Clicking on it and the buttons will be at the center and much bigger. It can be usefull if mobile player can’t click the button.

UPDATE V1.2

New Setting:

  • largerMobileButton

UI:

  • Arrow added for mobile, clicking it will show 1 to 4 buttons maximum. Can be disabled using
xyon:editSetting({multipleButtonActivated = false, largerMobileButton = false})

What’s the next Update

Probably adding custom errors, if you have any suggestion, submit it!