Delta
Why delta?
Delta is made for speed and ease. Delta is like Roact (and rodux) but organized differently.
Using Delta is also a major time saver. Themes can help save time with built in components, color pallete, fonts, and functions.
Installation guide
Toolbox
Simply purchase the item from the marketplace and import it to your game.
(other methods coming soon)
Tutorial
Tutorial 1: Color changing
This guide will teach you on how to make a simple button that can change colors when clicked!
Chapter 1: Basics
Using the ModuleScript you made in the installation guide, you want to parent it under a new LocalScript.
For the LocalScript you want to write the following code:
local Delta = require(script.Delta) -- Use the module
Now you will have the module defined, But we want to make UI. So we need to create a new “window”
local window = Delta.new()
With the new window you can make your UI, but now we want to assign a theme, Assigning a theme can help us a lot, giving us access to more features and components.
In order to add a theme change the line to
local window = Delta.new(Delta.themes.uiBlox)
This will fetch a default theme from Delta called uiBlox
uiBlox
Chapter 2: Creating an object
To create a object all you need to do is
local object = window("component/type")
Now your probably wondering “the heck is * component/type*”
-
Components are built in with the theme (for example the text component)
-
Types are not required but can give extra details, For example for text it defines the font. (For example h1, or Body:15 Font:FontSize)
So if we want text with the font “h1” we will write
local text = window("text/h1")
or how about a button?
local text = window("text.button/h1")
The possibilities are endless, but for this tutorial we will use a “back” component. (Which does not require a type) so we will just write
local back
back = window("back")
But we need to position it, size it.
So just add the following lines
.size(UDim2.fromScale(.5,.5)) -- Set the Size Property
.position(UDim2.fromScale(.5,.5)) -- Set the Position Property
.anchor(.5,.5) -- Set the AnchorPoint Property
Now let’s make a button, with the uiBlox components there are 2 buttons, “text.button” and “text.clearbutton”. For this example we will use a normal button.
So lets add the line
local button
button = window("text.button/Body:22", back) -- Create a Text with the breed Button (text.button = TextButton) with the type of Body:22.
Now your probably wondering “what is that second argument”
Well that’s the parent, which is the back object!
Now lets finish off with adding the properties
.text("Click Me!") -- Set the Text Property
.anchor(.5,.5) -- Set the AnchorPoint Property
.position(UDim2.fromScale(.5,.75)) -- Set the Position Property
.size(UDim2.fromScale(.275,.225)) -- Set the Size Property
Your code should now be:
local Delta = require(script.Delta) -- Use the module
local window = Delta.new(Delta.themes.uiBlox)
local back
back = window("back")
.size(UDim2.fromScale(.5,.5)) -- Set the Size Property
.position(UDim2.fromScale(.5,.5)) -- Set the Position Property
.anchor(.5,.5) -- Set the AnchorPoint Property
local button
button = window("text.button/Body:22", back) -- Create a Text with the breed Button (text.button = TextButton) with the type of Body:22.
.text("Click Me!") -- Set the Text Property
.anchor(.5,.5) -- Set the AnchorPoint Property
.position(UDim2.fromScale(.5,.75)) -- Set the Position Property
.size(UDim2.fromScale(.275,.225)) -- Set the Size Property
Chapter 3: Testing
Now let’s test the script playtesting.
But nothing appears, this is because we didn’t render the UI yet. So let’s do that!
window["render"]()
Just add this line in the end and the UI will be rendered.
Great job! You just tested your first Delta UI!
Chapter 4: Mods
Now mods are bit confusing, but I know you can do it!
Remember when we rendered are UI in the last chapter, the last line.
It was a mod
Every delta component has 2 built in mods:
- Properties (to manually set properties)
- Events (what we will be using)
Every window has a essential mod:
- render.
So lets go back to the button object and add this line of code below all of the property setting.
.events[{
MouseButton1Click = function(click)
print("Clicked!")
end
}]() -- connect events
So when you playtest your code, clicking the button will output “Clicked!”
But we want to change the buttons text color, so we will use another mod. Window’s change mod.
Replace the print with this
window["change"](back, "TextColor", BrickColor.random())
Conclusion
Now you have a pretty good color changing UI.
Full code (please actually learn rather than stealing code):
local Delta = require(script.Delta) -- Use the module
local window = Delta.new(Delta.themes.uiBlox)
local back
back = window("back")
.size(UDim2.fromScale(.5,.5)) -- Set the Size Property
.position(UDim2.fromScale(.5,.5)) -- Set the Position Property
.anchor(.5,.5) -- Set the AnchorPoint Property
local button
button = window("text.button/Body:22", back) -- Create a Text with the breed Button (text.button = TextButton) with the type of Body:22.
.text("Click Me!") -- Set the Text Property
.anchor(.5,.5) -- Set the AnchorPoint Property
.position(UDim2.fromScale(.5,.75)) -- Set the Position Property
.size(UDim2.fromScale(.275,.225)) -- Set the Size Property
.events[{
MouseButton1Click = function(click)
window["change"](back, "TextColor", BrickColor.random())
end
}]() -- connect events
window["render"]()
Tutorial 2: Working raw
This tutorial will teach you how to work with delta without a theme, components, and more.
The end result will be a TextLabel displaying random text.
Chapter 1: Creating the window
Now we want to work without a theme, so we will write the following code:
local Delta = require(script.Delta) -- Use the module
local window = Delta.new(--[[here would be the theme]])
But we dont want to use a theme, so if we leave it nil Delta will automatically use a theme called “null”
This theme is a empty theme that literally has nothing.
Chapter 2: Creating an component
Well how about components, how can we create one without one?
Well the null theme includes ONE component which is included in every theme called obj
window("obj/TextLabel")
The following code makes a new textlabel
Chapter 3: Events
This still includes mods, so we can use the default mods.
window("obj/TextButton")
.events[{
MouseButton1Click = function() print("Clicked!") end
}]()
window["render"]()
Try the code above, it will make a text button which when clicked will output “Clicked”
Chapter 4: Properties
Properties are a bit harder, we will use the window’s mod.
window("obj/TextButton")
.events[{
MouseButton1Click = function() print("Clicked!") end
}]()
window["render"]()
So this is our code
local item = window("obj/TextButton")
.events[{
MouseButton1Click = function() print("Clicked!") end
}]()
window["render"]()
window["change"](item, "Text", "Hello")
When changing a objects info like this, make sure to it after rendering, this will change the objects property directly rather than using a proxy.
Chapter 5: Finishing up
local item = window("obj/TextButton")
.events[{
MouseButton1Click = function()
window["change"](item, "Text", "Hello")
end
}]()
window["render"]()
With the above code, clicking on the button will make the buttons text change to “Hello”. Which is what we need!
Tutorial 3: Spring tweening
This is the shortest tutorial, No chapters.
window["tween"](instance, dampingRatio,undampedFrequency,targetProperties)
the above code can tween, but lets fill in the parameters.
local text = window("text/Body:22")
window["render"]()
window["tween"](text, dampingRatio,undampedFrequency,targetProperties)
Damping ratio:
Undamped Frequency:
So I picked it to be like this
local text = window("text/Body:22")
window["render"]()
window["tween"](text, 2, .5, {Position = UDim2.new(0,1,0,1)})
Themes
uiBlox
uiBlox is built in with Delta. Nothing should be done to install it.
Fun Fact: The devforum site, in the roblox dark theme, is using uiBlox!
Have some themes you would like to share? Reply or DM with your item and I will add it here.
Polls
- No
- Yes
- Not sure
- I am not a UI designer
0 voters
- Roact
- Fusion
- Roblox UI Editor
- Other
0 voters
Changelog
This post took 5 hours to write, I hope you will enjoy using delta.
Any questions? Feel free to reply!
Thanks for reading! 