@EzoPlayerS give me one good reason why you would need to script this, it just makes it harded when you can literally just insert a uipagelayout and your done
@@ryl51db I made a comment earlier, might as well copy and paste it. It is really long Yapping Level: 📈📈📈📈📈 V One disadvantage I have with UIPageLayout is that for some reason by default the index sometimes glitches which makes it go to the item in the list with the index of 1 instead of 0. This meaning that it goes to the second page by default. I have to set up a script to UIPageLayout:JumpToIndex(0) on start just to fix this. Even when I do it in studio, it still doesn't save so I have that script. Another disadvantage I have with UIPageLayout is that despite me disabling all of the input methods on it so I can set the pages programmatically, I can still go to the pages through user input. When you press \ (backslash not slash) on your keyboard, it toggles keyboard navigation so you can navigate through the GUI using WASD or ← ↑ → ↓. When I try to get to a page outside the current out using keyboard navigation it automatically goes to that one. Lastly, circular is very glitchy and does not wrap around seamlessly.
@@ryl51db no, no you got me wrong. I mean in these cases its better to do like that. But I mean people usually tend to do everything with The Gui of roblox. So make sure you have created a balance between them
Fun Fact: Scrolling frames have a property called "Automatic canvas size" or something along those lines, that automatically resizes the canvas withput needing any scripting. You can choose between: X, XY, Y, or None. (This also adds on to the current canvas size, so keep that in mind) Pages are cool
Tip for UIaspectRatio: Divide the property absolute size X by the property absolute size Y in the calculator will give you the ratio for the AspectRatio
That's basically what a UIAspectRatio constraint is. It keeps the ratio between the width and height consistent and proportional between all screen sizes. Ratio is division so you dividde the width and the height.
@@ransu6852 lazy a- (sorry 💀) Fun fact you can put expressions inside of properties in Roblox. You don't have to get a calculator just type it in. AbsoluteSizeX/AbsoluteSizeY For example just write 450/30 or something and it works
5:47 : Theres an easier trick for both that works for both UIlistlayout or UIgridlayout. Start by selecting the scrolling frame and setting the canvas size to 0 and then set the automatic canvas to Y, XY, or X depending on what direction your scrolling frame scrolls into. This way the scrolling framw wont need any script and is much more percise than this method.
For the Fixing Progress Bars With UICorner I always did a tween for offset of a color, which was not fun, but this is so much better in the video thanks dude👍👍
theres a property called "automatic ???? scaling ????" on the scrolling frame. if you set it to Y then it will do that automatically without a script! (set the scrolling size to 0,0,0,0) for it to work
Tip for the scrolling frame size: You don't need to script anything, just set the scrolling frame canvas size to {0,0}{0,0} and put automatic size to Y
wanted to point this out, in the script for the scrolling frames instead of getting the playergui by doing game.Players.LocalPlayer.PlayerGui you can just do script.Parent example: Explorer -ScreenGui --Frame ---LocalScript ETC Script local PlayerGui = script.Parent.Parent.Parent
tip for the scrollingframe thing: there is actually an automaticsizing for the canvassize so just set that to Y and put a uilistlayout or smth and its gonna do the job just fine (make sure to set canvassize Y the smallest u can too cuz automaticsizing only increases but doesnt decrease)
@@Aadiyan1 ye but you could also be smart (like me) and make ur own padding (invisible frames) ok ye that idea sucks but id rather do that then a localscript tbh
Please fix the corners of the progress bar scaling down when it gets small. It's such a simple fix; all you have to do is offset the bar to the X axis twice the size of the corners. Then in the script, you can then just add this size amount onto the X size result from your calculation.
There is also a Reclass plugin which you can use to convert the frame into a canvas group with all of its properties but I'm not sure if it is still free.
6:30 just put the automatic scrolling size to true? (Don't remember if it worked that way, gonna have to check home and correct this but there is a setting for it.)
2. Or just enable clip descendants? I don't see why its necessary to use canvas group 3. I don't really use UIAspectRatioConstraint because I don't really understand it so I may be wrong here but can't you just use scale to achieve the same result? 5. Just use automatic canvas size?
No, scales don’t achieve the same result. There are many different screen sizes so scales can vary. Using the constraint makes the UI look similar for all screens
This is The Script Pls Ping local player = game.Players.LocalPlayer local playerGui = player.PlayerGui local RunService = game:GetService("RunService") local function Update() for _, scrollingFrame in playerGui:GetDescendants() do if scrollingFrame:IsA("ScrollingFrame") then local gridLayout = scrollingFrame:FindFirstChild("UIGridLayout")
if gridLayout then local contentSizeY = gridLayout.AbsoluteContentSize.Y scrollingFrame.CanvasSize = UDim2.new(0,0,0, contentSizeY) end end end end RunService.RenderStepped:Connect(function() Update() end)
really useful, didn't even know that canvas group thing existed, nice video!
same!
fr
I did know that canvas group existed, but since I was a scripter and not UI designer, never knew how to do it, this vid really helped out
Ikr that is so Underrated I see many Top Notch Quality games like Even Mimic for Example having that Health Bar clipping.
When i saw the page layout trick, i see tons and tons of possibilities with this without having to script a single thing :D
You know spmetimes its better to script. But its up to you.
DARKENZ!!!
@EzoPlayerS give me one good reason why you would need to script this, it just makes it harded when you can literally just insert a uipagelayout and your done
@@ryl51db I made a comment earlier, might as well copy and paste it. It is really long
Yapping Level: 📈📈📈📈📈
V
One disadvantage I have with UIPageLayout is that for some reason by default the index sometimes glitches which makes it go to the item in the list with the index of 1 instead of 0. This meaning that it goes to the second page by default. I have to set up a script to UIPageLayout:JumpToIndex(0) on start just to fix this. Even when I do it in studio, it still doesn't save so I have that script.
Another disadvantage I have with UIPageLayout is that despite me disabling all of the input methods on it so I can set the pages programmatically, I can still go to the pages through user input. When you press \ (backslash not slash) on your keyboard, it toggles keyboard navigation so you can navigate through the GUI using WASD or ← ↑ → ↓. When I try to get to a page outside the current out using keyboard navigation it automatically goes to that one.
Lastly, circular is very glitchy and does not wrap around seamlessly.
@@ryl51db no, no you got me wrong. I mean in these cases its better to do like that. But I mean people usually tend to do everything with The Gui of roblox. So make sure you have created a balance between them
7:30 just use automatic canvas size.
Do you play rainbow 6
yeah exacctly what i was thinking
is it a plugin?
@@kpamzz6443 its an instance
@@kpamzz6443 The property in ScrollingFrame called AutomaticCanvasSize
This video is 10x better than the ui tips that the big RUclipsrs make. Keep it up!
Fun Fact: Scrolling frames have a property called "Automatic canvas size" or something along those lines, that automatically resizes the canvas withput needing any scripting. You can choose between: X, XY, Y, or None. (This also adds on to the current canvas size, so keep that in mind)
Pages are cool
5:59 - You can set the canvas size automatically by setting AutomaticCanvasSize to Y, you may have to set the canvas size to 0
For automatically updating de canvas size is also a property on de scrolling frame
Tip for UIaspectRatio:
Divide the property absolute size X by the property absolute size Y in the calculator will give you the ratio for the AspectRatio
That's basically what a UIAspectRatio constraint is. It keeps the ratio between the width and height consistent and proportional between all screen sizes. Ratio is division so you dividde the width and the height.
Or just literally use a plugin that does it for you
@@ransu6852 lazy a- (sorry 💀)
Fun fact you can put expressions inside of properties in Roblox. You don't have to get a calculator just type it in. AbsoluteSizeX/AbsoluteSizeY
For example just write 450/30 or something and it works
@@ransu6852 what plugin
@@daveashi1338 Name for it is autoscale lite. If you accidentally use offset, then you can fix that quickly by this plugin.
5:47 : Theres an easier trick for both that works for both UIlistlayout or UIgridlayout. Start by selecting the scrolling frame and setting the canvas size to 0 and then set the automatic canvas to Y, XY, or X depending on what direction your scrolling frame scrolls into. This way the scrolling framw wont need any script and is much more percise than this method.
UIaspectRatioConstraint is so crazy
For the Fixing Progress Bars With UICorner I always did a tween for offset of a color, which was not fun, but this is so much better in the video thanks dude👍👍
Great tips man. I really love the scrolling frame script, that will be very handy for any game's inventory system! thanks for sharing!!
theres a property called "automatic ???? scaling ????" on the scrolling frame. if you set it to Y then it will do that automatically without a script! (set the scrolling size to 0,0,0,0) for it to work
@@NewGuyX Awesome, great to know, thanks.
@@DavidWinstead no problem
I ALWAYS use the Converting Plugin while doing GUI. If i do something wrong, i can just change it :D
Wow quite a bit of useful tips, I'll definitely being using a few of these!
Pretty sure scrolling frames have an auto update scroll size
They do
AutomaticCanvasSize doesnt work for me 90% of the time
@@epixerty no, it applies always, he does it wrong then, always worked for me
It does work, remember that it goes on top of your current canvas size, so make sure to set it to 0,0,0,0
Really useful information 👏
I am glad that people can now know about the canvas group one, which I knew before, because that was a life saver!!
Me too. Did you learn it yourself like me or did you learn it from someone?
That progress bar fix will be so useful!! I knew there was a way to fix it, but I had no idea how to do so, thank you 🥰
Other than the last one this is pretty fire, thank you bro.
Really helpful ,Great Video👍
Bro can we have more of these? I really liked this video lol
for UIAspectRatioConstraint (and scaling of UI), you should use AutoScale or AutoScaleLite
Page layout looks perfect for a shop UI 🔥
Progress bar tip is a lifesaver 🙏
I wanted to do some UI card animations in my game, like rotating the 3D model of the card, but I tried a lot and couldn't!
u saved my life by ui aspect raatio i always used plugins that made it look bad on the mobile and tablet thank you
Man this was so useful, keep it up!
i appreciate all of this love
Tip for the scrolling frame size:
You don't need to script anything, just set the scrolling frame canvas size to {0,0}{0,0} and put automatic size to Y
for the scrollingframe you can use the automatic canvas size option, just set it to 'Y', and set the canvas size to 0
4:21 I HAD NEVER HEARD OF THIS. WHAT?!
i think there is a property in scrollingframes to automatically change the size
bro everything is so useful, thank you!!!❤
i don’t build in studio so this will be very important for me
Nice video really helps!
for auto canvas size change the frame's size contrasts to xx if the scrolling canvas based on Y or the opposite to make it work
New sub!
Btw, can you make a tutorial on DataStores? I'm trying to make a simple money and kills datastore but it isn't working.
Yeah we need a tutorial on profile service datastore tbh
wanted to point this out, in the script for the scrolling frames instead of getting the playergui by doing game.Players.LocalPlayer.PlayerGui you can just do script.Parent
example:
Explorer
-ScreenGui
--Frame
---LocalScript
ETC
Script
local PlayerGui = script.Parent.Parent.Parent
TYSM DUDE FOR UICorner FIX!!!!!
Pretty sure if you switch from scale canvas size to pixel one in scrolling frames there is an option that automatically adjusts the size of the canvas
Crazy how I’ve been designing UI for 3 years and haven’t come across these…
tip for the scrollingframe thing: there is actually an automaticsizing for the canvassize so just set that to Y and put a uilistlayout or smth and its gonna do the job just fine (make sure to set canvassize Y the smallest u can too cuz automaticsizing only increases but doesnt decrease)
its buggy if you add padding with it
@@Aadiyan1 ye but you could also be smart (like me) and make ur own padding (invisible frames) ok ye that idea sucks but id rather do that then a localscript tbh
From 142 subs to 3k+ very fast growth
Bruh this is SO helpful ❤👍
for the scrolling frame canva size use automatic canva size and put the canva size to 0.0.0.0
It's better to use UIGradient with Transparency sequence and Offset property to clip the frame, instead of using CanvasGroup
The frame size would be scaled 1,1. and Offset X would be in a range of scale 0-1 (ex 0.5 offset clips 50% of the frame)
U should use :ChildAdded and :ChildRemoved event for the local script, using renderstepped for everything is terribly inefficient and expensive
u read my comment, tyyyyy
Please fix the corners of the progress bar scaling down when it gets small. It's such a simple fix; all you have to do is offset the bar to the X axis twice the size of the corners. Then in the script, you can then just add this size amount onto the X size result from your calculation.
Two ways of solving the same problem that's why I love coding there are 100x ways to solve the same problem. No definitive right answer.
@@keyblademaster8263 yes, everything has multiple solutions, this isn't exclusive to math
before this video exist i use ui gradient for the health bar offset = health - 0.5
whoa that canvas group is interesting
i love ur video
AutomaticCanvasSize Property has left the chat...
W
W video
Scrolling frame tip, is there some use to it? Auto scale exists
any tips how to make good looking shop ui?
1:56 what do I insert? A new frame/same frame or a new canvas group? Please don’t cover the explorer next time as this has left me quite confused
Sorry, get rid of your original frame and turn it into a canvas group and copy the properties over
There is also a Reclass plugin which you can use to convert the frame into a canvas group with all of its properties but I'm not sure if it is still free.
@@stewiepfing539 ah ok
@@boblox_studio_dev I have reclass, I’m pretty sure it’s free but the dev might of made it paid like his other plugins but thanks for trying to help
6:30 just put the automatic scrolling size to true? (Don't remember if it worked that way, gonna have to check home and correct this but there is a setting for it.)
yup, can't see a use to it
bro your channel is very underrated . Do you have discord server?If not , why dont you create one?
TIP: UI not properly placed in mobile? Use UI Padding!
1:43 whats the explanation for this? Why does it work on a canvasgroup but not in frame
now its vfx XD
How do you make a loading screen like in DriveWorld? Is it a repeat animation until game:IsLoaded()?
can u help me with the scrolling frame thing its broken
2. Or just enable clip descendants? I don't see why its necessary to use canvas group
3. I don't really use UIAspectRatioConstraint because I don't really understand it so I may be wrong here but can't you just use scale to achieve the same result?
5. Just use automatic canvas size?
No, scales don’t achieve the same result. There are many different screen sizes so scales can vary. Using the constraint makes the UI look similar for all screens
Clip descendants on regular GUIs don't clip the rounded corners.
What font did you use in the first tip?
FredokaOne
discord server when??????
i didn't understand the canvas group thing and i tried it but it didn't work for me. Is it possible for you to help me?
when using canvas groups textlabels are for some reason blurry?
12 second intro is the least yapping ive heard 💀
why cant i see the frame that i put inside the cnavas group
0:52 it doesnt work for me, can you help?
please lose the captions and random images every few seconds
Umm
Isn’t this just python?
No U #### B###
the ultimate ui tip is to stop making lifeless rounded ui's and spend more time making a creative design!
This is The Script Pls Ping
local player = game.Players.LocalPlayer
local playerGui = player.PlayerGui
local RunService = game:GetService("RunService")
local function Update()
for _, scrollingFrame in playerGui:GetDescendants() do
if scrollingFrame:IsA("ScrollingFrame") then
local gridLayout = scrollingFrame:FindFirstChild("UIGridLayout")
if gridLayout then
local contentSizeY = gridLayout.AbsoluteContentSize.Y
scrollingFrame.CanvasSize = UDim2.new(0,0,0, contentSizeY)
end
end
end
end
RunService.RenderStepped:Connect(function()
Update()
end)