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

Hii, sorry for the late bump but im still trying to figure this out.
I found out that for the canvas to resize i just needed to set AutomaticCanvasSize to the Y axis
however I am still having trouble with the frames INSIDE holding other children

image
image266×543 54 KB

I need the QUEST frame to scale to fit the frame inside holding all the requirements which can vary in size and quantity
does that make sense?
i just want the effect like in Bee Swarm Simulator
scaling is so complicated for me

heres the place with this model
GUIScaling.rbxl (58.7 KB)

#8

So I presume this is the sort of result you’re looking for?
image

It really wasn’t that hard, provided you understand how AutomaticSize works in the first place. All I had to do was change the Y size of the two frames that had AutomaticSize set to Y to {0, 0}. Now they will adapt to the UIListLayout, though to the exact edge. If you want to add the little gaps at the bottom, you can use UIPadding instances to achieve that, which is what I did here.

Here’s a little demo if you’re interested:
GUIScaling.rbxl (59.4 KB)