How to properly configure Image Tiles?

Help and Feedback Art Design Support
#1

So using 1 ImageLabel, setting the ScaleType to Tile and making the TileSize {0, 45},{0, 45}, I made a simple star pattern.

image
image966×655 6.61 KB

And that’s about all I can do with it. I can’t change the spacing between the tiles, the offset and such. My question is, Is there a way to make a Tile system but with more features?

1 Like
#2

You mean like a shop system with multiple items?

#3

Not really. What I want to achieve is to make the stars a little more far apart.

#4

Well if the image is only one image, it will be complicated to put some spaces between stars

#5

You can create a surfacegui, add a frame in it and set its scale to { 1 , 0 , 1 , 0 } - which sets it to cover the whole surface. Insert a grid layout object in the frame and then insert loads and loads of star imagelabels. UIGridLayout can be easily customizable and you can also modify the space between the objects (padding).

3 Likes
#6

The only way of doing this would be by using the method @ROCKs1333 has written or by just changing the actual image and increasing width/height. (I think)

#7

I used the UIGridLayout method that ROCK introduced and I seem to got it working, heres what I did. (I used ScrollingFrame for this)

--//Objs//--
local ScrollingFrame = script.Parent
local GridLayout = ScrollingFrame:FindFirstChildOfClass("UIGridLayout")

--//Settings//--
local TileCountX = 45 --Amount of images in the X axis
local PixelSpacing = 10 --Spacing in pixels of each image

local CellSize = (((ScrollingFrame.AbsoluteWindowSize.X * ScrollingFrame.CanvasSize.X.Scale) - (PixelSpacing * (TileCountX-1))) / TileCountX)

--//Estimate amount of lanes on Y//--
local TileCountY = math.ceil((ScrollingFrame.AbsoluteWindowSize.Y * ScrollingFrame.CanvasSize.Y.Scale) / CellSize)
local TotalTiles = TileCountX * TileCountY

GridLayout.CellPadding = UDim2.fromOffset(PixelSpacing, PixelSpacing)
GridLayout.CellSize = UDim2.fromOffset(CellSize, CellSize)

--//ImageTile Settings//--
local ImageID = "rbxassetid://5202757690"
local ImageColor = Color3.fromRGB(64, 46, 97)
local ImageTransparency = 0.675

for i = 1,TotalTiles do
	local Image = Instance.new("ImageLabel")
	Image.BackgroundTransparency = 1
	Image.Image = ImageID
	Image.ImageColor3 = ImageColor
	Image.ImageTransparency = ImageTransparency
	Image.Parent = ScrollingFrame
end

Thanks for the help!

2 Likes