How can i replicate a similar scalable dot pattern using a script or the UI tools available in roblox studio? I was able to import it but it would fail to scale properly
Things tried so far:
UIGridLayout
UIListLayout
Manual Placement
(zoom in to see what i mean more clearly)
You could use UIGridLayout and put in many ImageLabels of a dot.
There’s many different properties of UIGridLayout that you can change to get the scale how you want it to be.
you could use an imagelabel that’s transparency is set to 1 with an empty image then having a script creating the individual dots, now i do not have the script but this is one way to go (I think @powering_puns 's ones a bit easier but may have scaling issues with device sizes)
I have tried this and it works but doesnt scale
Yeah but i don’t see how this will make them scale and position properly
Maybe after the scripts scripts creates the dots, you could select all the children (dots) then scale size and position manually, i dont see why it would not work
(im in the process of trying to write a script)
Yeah but the problem here is in figuring out how to scale and position it correctly using a script
Maybe try UIAspectRatioConstraint. I haven’t used it before but it looks like it fixes the problem you have. The downside is that layouts override it, but you could still try.
Im already using this, it’s not about the dots not scaling in the wrong ratio, it’s about their position and overall size
To replicate a similar scalable dot pattern in Roblox, you can use a combination of UI elements and scripting. Here’s a step-by-step guide:
Frame object to the screen GUI. This will serve as the container for the dots.Frame object’s BackgroundColor3 property to the color you want for the dots.UIListLayout object to the Frame. This will allow you to easily scale and arrange the dots.Frame objects to the Frame container. These will serve as the individual dots.Frame objects’ Size property to the desired size of the dots.Frame objects’ BackgroundColor3 property to the same color as the Frame container.Frame container that will generate and position the dots based on the size of the container.Here’s an example script that will generate a scalable dot pattern:
-- Set the number of dots you want horizontally and vertically
local rows = 10
local columns = 20
-- Get the size of the Frame container
local container = script.Parent
local containerWidth = container.AbsoluteSize.X
local containerHeight = container.AbsoluteSize.Y
-- Calculate the size and spacing of the dots
local dotSize = containerWidth / columns
local dotSpacing = dotSize / 2
-- Create the dots and position them
for i = 1, rows do
for j = 1, columns do
local dot = Instance.new("Frame")
dot.Size = UDim2.new(0, dotSize, 0, dotSize)
dot.BackgroundColor3 = container.BackgroundColor3
dot.Parent = container
dot.Position = UDim2.new(0, (j - 1) * dotSize + j * dotSpacing, 0, (i - 1) * dotSize + i * dotSpacing)
end
end
-- Connect a function to the Frame container's "Changed" event to update the dots' positions when the container's size changes
container.Changed:Connect(function(property)
if property == "AbsoluteSize" then
-- Get the new size of the Frame container
local newContainerWidth = container.AbsoluteSize.X
local newContainerHeight = container.AbsoluteSize.Y
-- Calculate the new size and spacing of the dots
local newDotSize = newContainerWidth / columns
local newDotSpacing = newDotSize / 2
-- Reposition the dots
for i, dot in ipairs(container:GetChildren()) do
dot.Position = UDim2.new(
0, ((i - 1) % columns) * newDotSize + ((i - 1) % columns + 1) * newDotSpacing,
0, math.floor((i - 1) / columns) * newDotSize + math.floor((i - 1) / columns + 1) * newDotSpacing
)
end
end
end)
This script generates a grid of dots based on the number of rows and columns specified, and positions them based on the size of the container. It also connects a function to the container’s “Changed” event, which updates the positions of the dots when the container’s size changes.
Note that you can customize the number of rows and columns to achieve your desired dot pattern, and you can also adjust the dot size and spacing by modifying the calculation in the script.
Have you tried using an image label with the scale type set to tiled? You’d just need an image of a single dot.
have not tried this yet, i will try it
local pathtolabel = game.StarterGui.ScreenGui.Frame.ImageLabel -- can be changed
local size, padding, cornerradius = 25,4,5
for row = 1, math.ceil(pathtolabel.AbsoluteSize.Y/(size+padding)) do
for column = 1, math.ceil(pathtolabel.AbsoluteSize.X/(size+padding)) do
local thedot = Instance.new("Frame")
local corner = Instance.new("UICorner")
corner.CornerRadius = UDim.new(0,cornerradius)
thedot.BorderSizePixel = 0
thedot.Size = UDim2.new(0,size,0,size)
thedot.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
thedot.Position = UDim2.new(0,(column-1)*(size+padding),0,(row-1)*(size+padding))
thedot.Parent = pathtolabel
corner.Parent = thedot
end
end
Some of the dots seem to be cut off at the edges so perhaps a bit of offset (ImageRectOffset) would fix it?
Okay perhaps make the image label slightly bigger than the screen and make sure it’s centred still so a little bit of each edge is off screen
the fixes the bottom and right but not the top and left
That’s probably because your image label isn’t centred in the screen. If you sent the anchor point to (0.5,0.5) and the position to (0.5,0,0.5,0) it will be centred.
If you are having scaling issues, maybe try this UI scaling plug-in I personally use a lot for UI Design. It’s Autoscale Lite.
When you use the plug-in, open the Scale Button, then press scale size and position.
