Help with creating a quest UI like in Bee Swarm Simulator

Help and Feedback Art Design Support
#1

I’m trying to create a UI for a quest menu, heavily inspired by the one in Bee Swarm Simulator, heres what it looks like:

image
image376×1041 177 KB

I need a way or some GuiObject that handles stretching the whole quest depending on the sizes and amount of the requirements inside (these green boxes)
image
so that the quest frame’s (Y) scale is set depending on whats in it, examples:
image
See here the quests scale perfectly to fit all of the difference amount of requirements

Heres what i got going so far. I have a ScrollingFrame holding all the Quests and its being scaled and positioned by a UIListLayout. Each Quest has a Requirements frame where a UIGridLayout handles all the requirement frames. I used different size modifiers to try and see what works best. But I dont know how to create the effect I mentioned.
image

Do I need to script the scaling?
I tried using UIListLayouts and UIGridLayouts but it confuses me how it works.
Using the “Offset” property seems to work but the issue is that it looks too big on mobile then.
image
So I need scaling

If i explained poorly i can provide more details or even the place with it if needed
The whole scaling part of GUIS just confuses me so much

2 Likes
#2 
local HowMuchThePlayerHas =  workspace.Thing.Value
local Required = 10
while wait() do --Loop
	script.Parent.Size = UDim2.new(HowMuchThePlayerHas/Required,0,1,0)
end
#3

I would definitely not recommend this kind of scripting, while it does probably work in most cases it’s a much better idea to connect to RBXScriptSignals like from .Changed on a ValueBase. It’s especially a bad idea to use wait() in most cases and in which case task.wait() should be used :slight_smile:

1 Like
#4

I was about to mention this.
So there arent GUI Objects that handle it? I need to script it specifically?
In a script I’d probably just update the size every time any values change yeah

#5

If you’re wanting to scale the Y axis of the parent frame depending on the children, I would advise using a UIListLayout and either enabling AutomaticSize on the parent frame OR using a script to do it yourself like this:

list_layout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
    frame.Size = UDim2.new(1, 0, 0, list_layout.AbsoluteContentSize.Y)
end)

I hope this helps :slight_smile:

I should probably mention the UIListLayout is parented to the parent frame (the same parent as the individual quest goals)

#6

edited version + 1 additional feature

local HowMuchThePlayerHas =  workspace.Thing --Thing is an integer value
local Required = 10
local completedTask = false
HowMuchThePlayerHas.Changed:Connect(function(value)
	script.Parent.Size = UDim2.new(HowMuchThePlayerHas/Required,0,1,0)
if value == Required then
completedTask = true
end
end)
1 Like