How can i replicate UI dot pattern mathematically?

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

  1. Open up Roblox Studio and create a new screen GUI.
  2. Add a Frame object to the screen GUI. This will serve as the container for the dots.
  3. Set the Frame object’s BackgroundColor3 property to the color you want for the dots.
  4. Add a UIListLayout object to the Frame. This will allow you to easily scale and arrange the dots.
  5. Add several Frame objects to the Frame container. These will serve as the individual dots.
  6. Set the Frame objects’ Size property to the desired size of the dots.
  7. Set the Frame objects’ BackgroundColor3 property to the same color as the Frame container.
  8. Add a script to the 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 ="Frame")
        dot.Size =, dotSize, 0, dotSize)
        dot.BackgroundColor3 = container.BackgroundColor3
        dot.Parent = container
        dot.Position =, (j - 1) * dotSize + j * dotSpacing, 0, (i - 1) * dotSize + i * dotSpacing)

-- Connect a function to the Frame container's "Changed" event to update the dots' positions when the container's size changes
    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 =
                0, ((i - 1) % columns) * newDotSize + ((i - 1) % columns + 1) * newDotSpacing,
                0, math.floor((i - 1) / columns) * newDotSize + math.floor((i - 1) / columns + 1) * newDotSpacing

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.

1 Like

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 ="Frame")
		local corner ="UICorner")
		corner.CornerRadius =,cornerradius)
		thedot.BorderSizePixel = 0
		thedot.Size =,size,0,size)
		thedot.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
		thedot.Position =,(column-1)*(size+padding),0,(row-1)*(size+padding))
		thedot.Parent = pathtolabel
		corner.Parent = thedot

this worked pretty well but it looks a bit weird, how can i fix this?

Some of the dots seem to be cut off at the edges so perhaps a bit of offset (ImageRectOffset) would fix it?

Can not offsetr

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.