How can I achieve this?

Help and Feedback Game Design Support
#1

Hello!

So I am currently working on a Find The… game and I have already made an index, but I wish for my items to be displayed in rows of fives like this:

image
image862×335 154 KB

Currently they are in rows of threes and are not placed individually; they are being created and placed through a script. How can I achieve this?

Thank you for reading and have a wonderful day! :slight_smile:

#2

UiListLayouts automatically place labels. (UI-something-something) You will need to scale the frame the labels are being placed in to get 5 in a row though.

1 Like
#3

I believe it’s this what you need.

1 Like
#4

I used one and that seemed to work, but they are all placed in a line and I only want five per row. How do I go about fixing this?

#5

That’s because it’s UIListLayout that you used. It only places them in one row or column. You should use this to get a grid’d items.

#6

Oh okay. But how do I achieve this effect? Do I put both of the UI configurations as children of my frame or do I need to do something else?

#7

Put the UIGridLayout as siblings of the items you want to grid. Example:
image

To get this effect
image


Also set FillDirectionMaxCells to 5 if you want to set it as column of 5s

1 Like
#8

Would I do this through script? My whole GUI is controlled by this script:

local IndexMenu = script.Parent
local Collected = IndexMenu:WaitForChild("Collected")
local ScrollingFrame = IndexMenu:WaitForChild("ScrollingFrame")
local UIGridLayout = ScrollingFrame:WaitForChild("UIGridLayout")
local info = IndexMenu:WaitForChild("Info")

local Player = game.Players.LocalPlayer
local MemesCollected = Player:WaitForChild("MemesCollected", 5)

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Memes = ReplicatedStorage:WaitForChild("Memes")

local difficultyColors = { --Possible difficulties: Impossible
	Color3.fromHex("#00ff00"), -- Easy, Green
	Color3.fromHex("#ffaa00"), -- Medium, Orange
	Color3.fromHex("#ff0000"), -- Hard, Red
	Color3.fromHex("#00ffff"), -- Extreme, Cyan
	Color3.fromHex("#aa00ff"), -- Insane, Purple
	Color3.fromHex("#ff00ff"), -- Cringe, Pink
	Color3.fromHex("#ff555f"), -- Troll, Salmon
	Color3.fromHex("#1a191a"), -- Mystery, Black
}

local difficulties = {
	"Easy",
	"Medium",
	"Hard",
	"Extreme",
	"Insane",
	"Cringe",
	"Troll",
	"Mystery",
}

local TotalCount = 0

for i, v in pairs(Memes:GetChildren()) do
	TotalCount += 1
end

local CollectedCount = 0

for i, v in pairs(MemesCollected:GetChildren()) do
	CollectedCount += 1
end

Collected.Text = CollectedCount.."/"..TotalCount.." Found"

for _, meme in pairs(Memes:GetChildren()) do
	if meme and meme:IsA("BoolValue") then
		local MemeName = meme.MemeName.Value
		local difficulty = meme.Difficulty.Value
		local hint = meme.Hint.Value
		local Image = meme.Image.Texture
		local DifficultyColor = meme.DifficultyColor.Value
		local DifficultyLevel = meme.DifficultyLevel.Value
		
		local ItemButton = script.TemplateButton:Clone()
		ItemButton.Parent = ScrollingFrame
		ItemButton.Name = MemeName
		ItemButton.Image = Image
		ItemButton.Difficulty.BackgroundColor3 = DifficultyColor
		ItemButton.Difficulty.DifficultyLabel.Text = difficulty
		ItemButton.MemeName.Text = MemeName
		
		if MemesCollected:FindFirstChild(MemeName) then
			ItemButton.Collected.BackgroundTransparency = 1
		else
			ItemButton.Collected.BackgroundTransparency = 0.25
		end
		
		ItemButton.LayoutOrder = DifficultyLevel
		UIGridLayout.SortOrder = Enum.SortOrder.LayoutOrder
		UIGridLayout:ApplyLayout()
		
		ItemButton.MouseButton1Click:Connect(function()
			info.Visible = true
			info.MemeImage.Image = Image
			info.Hint.Text = "Hint: ".. hint
			info.MemeName.Text = MemeName
			info.Difficulty.BackgroundColor3 = DifficultyColor
			info.Difficulty.Text = "Difficulty: "..difficulty
		end)
	end
end

MemesCollected.ChildAdded:Connect(function(child)
	CollectedCount += 1
	Collected.Text = CollectedCount.."/"..TotalCount.." Found"
	local ChildButton = ScrollingFrame:FindFirstChild(child.Name)
	ChildButton.Collected.BackgroundTransparency = 1
end)

My hierarchy looks like this:
image

#9

It’s possible with also using script but don’t use UIGridLayout:ApplyLayout() (deprecated), it automatically reapplies the layout when a sibling is added/removed.

1 Like
#10

Oh okay. But what should my script look like?

1 Like
#11

Why? and what’s the problem with your script? I don’t know what’s the problem here…

1 Like
#12

I believe you could achieve what you want with UIListLayout. It used to be kinda weak, but recently it got an update and it works more like flexboxes in HTML, which are really powerful.
I believe that to achieve the effect of a grid width square items you’ll want to insert a UIListLayout and change these properties:

  • FillDirection = Enum.FillDirection.Horizontal (This’ll make the items stack next to each other)
  • Wraps = true (this’ll make the items go to the next row when they reach the end of a row)
  • Gap = UDim.new(scale, pixels) (I’d recommend using 0 for scale and any integer value for pixels)
  • HorizontalAlignment = Enum.HorizontalAlignment.Center (this’ll make the items always horizontally in the center)

Then this’ll basically work. You just need the items to have a uniform size.
If you want to have 5 next to each other with a gap of 5 pixels you’ll need all the children to have the following properties:

  • SizeConstraint = Enum.SizeConstraint.RelativeXX (Makes both wdith and height relative to the width of the parent)
  • Size = UDim2.new(0.2, -5, 0.2, -5) (we need to subtract the gap from the size, otherwise the items won’t fit on the row ) (we could use some math to make it more accurate but this’ll do)

image
This is how the thing could look. Try experimenting with the different properties and find out what suits your needs the best!
This is the basic hierarchy:
image
These are the properties of the UIListLayout:

image
image275×508 21.4 KB

And finally the two properties of the individual items that make them the right size:
image

1 Like
#13

Awesome! It worked! Thank you so much! :slight_smile:

I did notice that for some reason everything is in a straight line in-game. What causes this?

1 Like