How To Get A Better Grid Layout in Unity

  Рет қаралды 216,828

Game Dev Guide

Game Dev Guide

Күн бұрын

Пікірлер: 383
@ÁngelAcosta-g2e
@ÁngelAcosta-g2e Жыл бұрын
This works amazing, thanks man. For anyone who can be interested, I modified the for to this so the last one can fill all the empty space: float columnCount = 0; float rowCount = 0; for (int i = 0; i < rectChildren.Count; i++) { rowCount = i / columns; columnCount = i % columns; if(fitType == FitType.WIDTH || fitType == FitType.HEIGHT) { var rest = (rows * columns) - i; if (i == rectChildren.Count - 1 && rest > 0) { cellSize.x *= rest; columnCount /= rest; } } var item = rectChildren[i]; var xPos = (cellSize.x * columnCount) + (spacing.x * columnCount) + padding.left; var yPos = (cellSize.y * rowCount) + (spacing.y * rowCount) + padding.top; SetChildAlongAxis(item, 0, xPos, cellSize.x); SetChildAlongAxis(item, 1, yPos, cellSize.y); } Also someone write the script and put it on github so yall don't need to pause and copy for the eternity. github.com/IkeThermite/GameDevGuide-CustomTabsAndFlexibleGrid/blob/master/Custom%20Tabs%20and%20Flexible%20Grid/Assets/Scripts/FlexibleGridLayout.cs
@connorking9217
@connorking9217 4 жыл бұрын
For anyone having trouble with spacing causing overflow with more than a 3x3 grid: float cellWidth = (parentWidth / (float)columns) - ((spacing.x / (float)columns) * 2).... Should be: float cellWidth = (parentWidth / (float)columns) - ((spacing.x / (float)columns) * (colums - 1)).... Same for height. Thanks for the great video, keep it up!
@bausHuck
@bausHuck 4 жыл бұрын
Thanks. I was wondering this was happening.
@timhengeveld
@timhengeveld 4 жыл бұрын
Awesome! This also fixed a problem I was having where a grid with two columns erroneously added spacing to the rightmost and bottommost items in the group
@daniellord4174
@daniellord4174 4 жыл бұрын
Not just 3x3, it's all grids. Wandering if OP left this one little flaw to find those blind copy pasta's out there. Best part is OP definitely fixed it before he drags the grid around in the editor. new lifegoal: make awesome unity tutorial, leave one blatant flaw. Play unity games looking for ones that made it to production still containing flaw
@CorgiCA
@CorgiCA 4 жыл бұрын
Cheers I was just about to commit to a night of stepping through ✌️😅😇
@eliebeaino
@eliebeaino 4 жыл бұрын
watching this vid half asleep, and i barely understood half of what he said as i'm skimming through it to get a general idea of the system he's done, but when he hard-coded that 2 for the spacing, i was so confused and doubtful. I'm glad to know my confusion was put in the right place. I'm a new unity learner and a new coder, this feels good to know that i'm in the right direction of learning.
@motifgaming2080
@motifgaming2080 4 жыл бұрын
Hey, there are very few KZbinrs who make advanced tutorials so please continue making these videos even when I think I already know everything about the topic I still learn something new from your videos.
@liormax
@liormax 4 жыл бұрын
is this true? did someone actually made a grid layout tutorial that is actually usefull!?
@ben_burnes
@ben_burnes 4 жыл бұрын
Amusingly, by bypassing Unity's grid system and making their own haha
@jameshood790
@jameshood790 4 жыл бұрын
Not only that, but it gets right to the point and it's not a series of 27 videos where you watch someone type and debug for hours!
@thatanimeweirdo
@thatanimeweirdo 4 жыл бұрын
Honestly, it's so refreshing to see someone finally talk about these things. As a UI designer myself, it always seems as these topics just fall flat for most smaller/middle-sized projects.
@aerondcz
@aerondcz 4 жыл бұрын
This channel is so informative and fun to watch at the same time, much more than other Unity tutorial channels I've seen. You definitely deserve more subscribers and attention. Keep it going, your videos are amazing and they help me with my Unity projects, thank you!
@MassimoRough
@MassimoRough 4 жыл бұрын
don't hesitate to share the video so the channel will get more subscribers as you wish him so. Apply yourself.
@JT_6233
@JT_6233 Жыл бұрын
I just wish the "Tab" script used at 2:55 would be somewhere to find. I can't find it here in the comments, not in any fan made repository and not in his other videos. Not sure how to proceed without this script
@bip901
@bip901 4 жыл бұрын
When picking a font, read the font license VERY carefully to avoid copyright issues. I'm pretty sure Unity embeds fonts into the game, and most font licenses don't allow that.
@GameDevGuide
@GameDevGuide 4 жыл бұрын
Great advice! Yeah, licensing popular fonts can be very expensive, but there's also a lot of similar ones that are more affordable. Definitely agree that, like anything, it's worth making sure your usage is covered!
@StigDesign
@StigDesign 4 жыл бұрын
@@GameDevGuide use default Comic Sans? :D
@heparo8704
@heparo8704 4 жыл бұрын
Lots of free fonts sites out there 1001Fonts for example my favorite. Edit : free fonts for commercial use, free for personal use etc..
@ben_burnes
@ben_burnes 4 жыл бұрын
@@heparo8704 Word of warning: "Free" might mean "Free to use non-commercially". If you intend on selling or distributing your game, do a bit of research beforehand to make sure.
@koko0riginal
@koko0riginal 4 жыл бұрын
A free font that is a suitable replacement recommendation? free as In for commercial use with distribution without modification free
@jameshood790
@jameshood790 4 жыл бұрын
I love how you explain what you're doing without making us watch hours of typing and debugging like many other Unity tutorials. Brilliant, right to the point, and right at my level of expertise. Subscribed, and thanks.
@aktchungrabanio6467
@aktchungrabanio6467 Жыл бұрын
Exactly!
@r1pfake521
@r1pfake521 3 жыл бұрын
For dynamic or flexible grid I always combine a vertical layout group and filled it with horizontal layout groups for the rows and then every horizontal layout group contains the "cell" elements of the current row. You could also achieve a dynamic grid by using the existing grid layout and update the cell size property in code depending on the total grid width / height. But still nice to how a custom layout group can be implemented and bookmarked for later.
@_denzy_6310
@_denzy_6310 4 жыл бұрын
You go so fast dude! I cannot follow without pausing every second. Also share the scripts where possible. Awesome stuff
@oscar-qr5yy
@oscar-qr5yy 4 жыл бұрын
I usually don't comment videos. I was already subscribed to you but finding this video looking for a dynamic grid made me activate notifications and comment this. THIS IS AWESOME. Thank you very much!
@SassyPantsy
@SassyPantsy Жыл бұрын
This is incredible! Hands down the best tutorial about Unity UI I've ever seen, even general purpose UI implementation. Plus sharing the script itself is very generous of you, it's a must have asset. Subbed&Liked!
@shidygames
@shidygames 11 ай бұрын
This is lit. Thank you for taking the time to show and explain such things, we all agree that the default Grid system is lacking some basic features. Cheers!
@Andycraft608
@Andycraft608 4 жыл бұрын
I'm so happy I found your channel! There are very very few informative and high quality UI Unity tutorials like yours on the internet. Thank you for sharing the knowledge.
@ben_burnes
@ben_burnes 4 жыл бұрын
As someone who usually abhors UI work in Unity, this channel is absolutely brilliant. Thank you for this!
@moromann1
@moromann1 4 жыл бұрын
How have I never seen this channel before?? You have some amazing videos that are very explanatory, concise, and easy to understand. Please continue making videos!
@aussieraver7182
@aussieraver7182 3 жыл бұрын
You just simplified every future UI pain. Flexbox did the same for web development.
@AmanKumar-tu2og
@AmanKumar-tu2og 4 жыл бұрын
I cannot thank you enough for this. I was totally frustrated by the default grid component, but was too lazy to build an alternative.
@RetroGrazer
@RetroGrazer Жыл бұрын
This script saved my butt when trying to make a grid of n x n size. Thank you so much
@OverAndOverAndOver
@OverAndOverAndOver 3 жыл бұрын
I LOVE your channel!!! You always have exactly what I need!! I've watched every one of your videos now, and they're all just incredible! You deserve more subscribers, I wish there were more videos to watch!
@Knollee_oder_so
@Knollee_oder_so 4 жыл бұрын
So you are telling me i just found this amazing guy who can code AND explain to me how it is done? No leaving out extra steps. Love it
@TheRealMonkeyCrime
@TheRealMonkeyCrime 4 жыл бұрын
Thanks for making a great series of clear, factual and enjoyable videos. I'd love to see something covering best practices for interfacing your game's logic, variables etc to the UI.
@APPLEZCRISP
@APPLEZCRISP 3 жыл бұрын
//Tweaked the code to add more functionality //Added a minimum to some variables so they don't go under 0 or 1 //Added all child alignments using UnityEngine; using UnityEngine.UI; public class FlexibleGridLayout : LayoutGroup { public enum Alignment { Horizontal, Vertical } public enum FitType { Uniform, Width, Height, FixedRows, FixedColumns, FixedBoth } public Alignment alignment; [Space] public FitType fitType; [Min(1)] public int columns; [Min(1)] public int rows; [Space] [Min(0)] public Vector2 spacing; public Vector2 cellSize; public bool fitX; public bool fitY; public bool NudgeLastItemsOver; public override void CalculateLayoutInputVertical() { base.CalculateLayoutInputHorizontal(); float sqrRt; switch (fitType) { case FitType.Uniform: default: fitX = fitY = true; sqrRt = Mathf.Sqrt(transform.childCount); rows = Mathf.CeilToInt(sqrRt); columns = Mathf.CeilToInt(sqrRt); rows = Mathf.CeilToInt(transform.childCount / (float)columns); columns = Mathf.CeilToInt(transform.childCount / (float)rows); break; case FitType.Width: fitX = fitY = true; sqrRt = Mathf.Sqrt(transform.childCount); rows = Mathf.CeilToInt(sqrRt); columns = Mathf.CeilToInt(sqrRt); rows = Mathf.CeilToInt(transform.childCount / (float)columns); break; case FitType.Height: fitX = fitY = true; sqrRt = Mathf.Sqrt(transform.childCount); rows = Mathf.CeilToInt(sqrRt); columns = Mathf.CeilToInt(sqrRt); columns = Mathf.CeilToInt(transform.childCount / (float)rows); break; case FitType.FixedRows: fitX = fitY = false; columns = Mathf.CeilToInt(transform.childCount / (float)rows); break; case FitType.FixedColumns: fitX = fitY = false; rows = Mathf.CeilToInt(transform.childCount / (float)columns); break; case FitType.FixedBoth: fitX = fitY = false; break; } float cellWidth; float cellHeight; switch (alignment) { case Alignment.Horizontal: cellWidth = (this.rectTransform.rect.width / (float)columns) - ((spacing.x / (float)columns) * (columns - 1)) - (padding.left / (float)columns) - (padding.right / (float)columns); cellHeight = (this.rectTransform.rect.height / (float)rows) - ((spacing.y / (float)rows) * (rows - 1)) - (padding.top / (float)rows) - (padding.bottom / (float)rows); break; case Alignment.Vertical: default: cellHeight = (this.rectTransform.rect.width / (float)columns) - ((spacing.x / (float)columns) * (columns - 1)) - (padding.left / (float)columns) - (padding.right / (float)columns); cellWidth = (this.rectTransform.rect.height / (float)rows) - ((spacing.y / (float)rows) * (rows - 1)) - (padding.top / (float)rows) - (padding.bottom / (float)rows); break; } cellSize.x = fitX ? (cellWidth
@shyxiaolong
@shyxiaolong 3 жыл бұрын
thanks dude because i was had a problem but didn't understand where. now i can found it
@sdjmixom
@sdjmixom 2 жыл бұрын
Hello! This code almost is correct, you should remove all fitX = fitY = false; to make these flags work as intended. Otherwise huge kudos to you!
@HingalshDealer
@HingalshDealer 2 жыл бұрын
thank you bro.
@winstonchua6078
@winstonchua6078 2 жыл бұрын
Thanks!
@Gorathon-e5z
@Gorathon-e5z 2 жыл бұрын
This doesn't seem to actually change the cell width or height for me, they're both constant no matter my settings. edit: nvm it's because i had a content size fitter on the object i was putting in there edit 2: nvm again, still doesn't work for some reason
@JT_6233
@JT_6233 Жыл бұрын
The "Tab Script" used in this video at 2:55 Where is it? I searched through all of his videos, cant find ind anywhere but somehow people here had it somehow?
@chakanshu
@chakanshu 9 ай бұрын
kzbin.info/www/bejne/aGKUpWmoZpeLhrM
@CodingWithUnity
@CodingWithUnity 4 жыл бұрын
Really good video! Deff the best channel for UI/UX related topics by far
@SanyaBane
@SanyaBane 3 жыл бұрын
That's crazy how Unity doesn't have such useful thing out of the box. Thanks a lot!
@SnakPak
@SnakPak 4 жыл бұрын
This is the best Unity tutorial I've ever seen for so many reasons. Instant subscribe
@The_Ancient_Guardian
@The_Ancient_Guardian 6 ай бұрын
This video is a gold mine to learn, thank you.
@iamjimgroth
@iamjimgroth 4 жыл бұрын
This is great. I never knew I needed something like this until you mentioned it in the discord the other day. Thanks!
@TNTCProject
@TNTCProject 4 жыл бұрын
Super useful Matt! Smooth and clear as always! As the name suggests it is really flexible :D
@afrakes4510
@afrakes4510 2 жыл бұрын
I'm speechless. This is amazing!! Incredible work bro.
@RugbugRedfern
@RugbugRedfern 4 жыл бұрын
Is there any way you can post the code on github?
@mahna_mahna
@mahna_mahna 4 жыл бұрын
Another coder has made this from the videos: github.com/IkeThermite/GameDevGuide-CustomTabsAndFlexibleGrid
@RugbugRedfern
@RugbugRedfern 4 жыл бұрын
@@mahna_mahna Thanks!
@mahna_mahna
@mahna_mahna 4 жыл бұрын
@@RugbugRedfern You're welcome. I didn't expect any response, since this is 8 months late. :D I just dropped it in response to all the people I saw asking for it so that the NEXT person that came along could find it easily.
@johnsartain4160
@johnsartain4160 Жыл бұрын
Wow this makes me so happy
@llareia
@llareia 4 жыл бұрын
Thank you SO much for your videos. Unity UI has always been very frustrating for me, and you make it so much easier!
@offsider_
@offsider_ 4 жыл бұрын
Just wondering where you got the tab script at 9:01 from? I looked at the tabs video but i couldn’t find it. Thanks
@asclepiiusunknown1090
@asclepiiusunknown1090 4 жыл бұрын
Https://kzbin.info/www/bejne/aGKUpWmoZpeLhrM is the link for the advanced tab system if you still want it. Definitely worth checking out.
@Saikodan99
@Saikodan99 3 жыл бұрын
@@asclepiiusunknown1090 it's not there.
@ImSendingXOXO
@ImSendingXOXO 2 жыл бұрын
Wow, what an amazing tutorial! So educational, well-made, and perfectly paced. Thank you so much!!
@techmaster9041
@techmaster9041 3 жыл бұрын
OMG there is someone better than Brackeys. U R My new FAVOURITE KZbinR!!!!!
@blaiseandthebambina
@blaiseandthebambina 3 жыл бұрын
I’m an Unreal user all the way but your video was still so dang good and useful. Thank you! Unfortunately now KZbin keeps suggesting Unity videos. Lol :/
@Endoo95
@Endoo95 4 жыл бұрын
Love it! Grids are so important, and your tutorial is so great. Thanks man!
@hippolights9103
@hippolights9103 Ай бұрын
awesome tutorial, really helpfull ! i wonder why Unity have not improved theirs. it seem not far from the standard layout group but with ta slight improvement that do a huge difference Thanks a looot !
@rmt3589
@rmt3589 2 жыл бұрын
Thank you. I think this'll give me most of what I need to make my website simulator!
@rubyrails2329
@rubyrails2329 4 жыл бұрын
The best channel for unity tutoral with Brackeys
@ArthurDetaille
@ArthurDetaille 4 жыл бұрын
Every video is even more impressive as the previous one !! :)
@drakel5943
@drakel5943 4 жыл бұрын
What sprites did you use around 3:30? Looks like you had a bunch of simple 2d sprites that would be good for UI. Was that an asset pack you could recommend or did you make them yourself?
@iamvironic
@iamvironic 3 жыл бұрын
I should check the comments earlier. Was sure something wrong, but still spent a hour trying to understand the logic, as I was sure in great videos like these there are no mistakes.
@darkotomic943
@darkotomic943 4 жыл бұрын
The only Unity channel that is based on real practices.
@pandaengine
@pandaengine 4 жыл бұрын
Hey man, this is great! I'll definitely use it to design my UI from now on. I already have a half-baked dynamic grid system, but it's only for dynamically initializing an inventory in a scroll rect. I can see that your solution can be easily adapted to that. Keep up the good work man! I love your tutorials!
@kronusexodues7283
@kronusexodues7283 4 жыл бұрын
So, urm, I'm curious: are you aware that you are the best unity tutorial channel ever?
@UmeshVerma-pi8oi
@UmeshVerma-pi8oi 4 жыл бұрын
Thanks for this awesome tutorial, now I am getting some confident and scale UI designs to the next level by programmatically.
@pandaengine
@pandaengine 4 жыл бұрын
To people who are having overflowing issues with spacing, change the lines where you set cellWidth and cellHeight with these. Parentheses are very imporant here. float cellWidth = (parentWidth / columns) - (spacing.x / ((float)columns / (columns - 1))) - (padding.left / (float)columns) - (padding.right / (float)columns); float cellHeight = (parentHeight / rows) - (spacing.y / ((float)rows / (rows - 1))) - (padding.top / (float)rows) - (padding.bottom / (float)rows);
@5thBabbitt
@5thBabbitt 3 жыл бұрын
I found your channel just recently and I love it
@simoncodrington
@simoncodrington 4 жыл бұрын
Great content mate, hope to see more UI stuff in the future ❤
@quantumpanic
@quantumpanic 4 жыл бұрын
Yes! I've always dabbled in trying to customize the grid layout group component because of its potential for functionality (despite being lackluster in what it offers initially). Really hope Unity doesn't overhaul it too much in the future.
@danthesandman
@danthesandman 4 жыл бұрын
It felt a little cathartic when you took a jab at the grid layout in the last video. After seeing that in this video as a UI/UX person I had to sub. One question though: Does this Flexible grid work with a content size fitter?
@Pedro_Marangon
@Pedro_Marangon 4 жыл бұрын
I've been waiting for this video for a long time!
@noname1999x
@noname1999x 4 жыл бұрын
Keep doing tutorials! It's very informative and your code is example of good code for me :)
@admulberg
@admulberg 4 жыл бұрын
Hi! For enabling/disabling you can just do: panels[i].gameObject.setActive(i == panelIndex); instead of using if/else
@TheJeffries7
@TheJeffries7 4 жыл бұрын
I love the venom anytime grid layouts are mentioned.
@RickMcMichael
@RickMcMichael 3 жыл бұрын
Great videos, my only complaint is not being able to see what components are on the parent objects before you get started. Also did I miss the creation of the "Tab" Script? - I saw TabGroup and TabButton. Assuming you made one off camera? Maybe one day you could do some tutorials for World Space canvas scripts xD
@yashaswiification
@yashaswiification 2 ай бұрын
This is fantastic thanks for making this video!
@TrueIndian
@TrueIndian 4 жыл бұрын
Informative and in depth tutorial on a specific topic.Thanks.
@cradle_of_chaos
@cradle_of_chaos 4 жыл бұрын
This is excellent work.
@andreperegrina
@andreperegrina 2 жыл бұрын
For anyone needing the fixedWidth and fixedHeight I added this: // fixed width if (fitType == FitType.FixedWidth) { // calculated columns based on width and spacing float width = rectTransform.rect.width; colums = Mathf.FloorToInt((width + spacing.x) / (cellSize.x + spacing.x)); rows = Mathf.CeilToInt(transform.childCount / colums); } // fixed height if (fitType == FitType.FixedHeight) { // calculated rows based on height and spacing float height = rectTransform.rect.height; rows = Mathf.FloorToInt((height + spacing.y) / (cellSize.y + spacing.y)); colums = Mathf.CeilToInt(transform.childCount / rows); }
@frostoise
@frostoise 4 жыл бұрын
The biggest problem with the Default Grid Layout is that it assigns a fixed size for each child element and by doing so it creates major resolution scaling problems, especially when the aspect ratio changes. This works very well around the problem and scales accordingly to all aspect ratios and resolutions.
@erdemalpkaya
@erdemalpkaya Жыл бұрын
This is amazing. Thanks for the great work
@tokyandrianina1109
@tokyandrianina1109 4 жыл бұрын
where can i find sprite like that 3:24 for free ?
@rutchjohnson
@rutchjohnson 4 жыл бұрын
This is so super helpful!
@Shinobi31415926
@Shinobi31415926 4 жыл бұрын
Really useful tutorial. Thank you!!
@JesseMcConnell-f9n
@JesseMcConnell-f9n 10 ай бұрын
Where you multiplied cellSize.x / columns * 2 and cellSize.y / rows * 2 ,you can replace the literal 2 with (columns - 1) or (rows - 1) to fix the code for all capacities ie: cellSize.x = parentWidth / cols - spacing.x / cols * (cols - 1) - (float)padding.left / cols - (float)padding.right / cols; cellSize.y = parentHeight / rows - spacing.y / rows * (rows - 1) - (float)padding.top / rows - (float)padding.bottom / rows; Also, most of the brackets (except the ones I've added) don't do anything, because of the order of operations and commutative laws of multiplication and division. I understand you adding them anyway, as a safe practice from a logical standpoint. Amazing tutorial series, though! This helped a ton!
@ahmedradwan5385
@ahmedradwan5385 4 жыл бұрын
one of the best channels ever
@gamerzshare550
@gamerzshare550 4 жыл бұрын
Simply awesome. Sourcecode will be great.
@mahna_mahna
@mahna_mahna 4 жыл бұрын
Another coder has made this from the videos: github.com/IkeThermite/GameDevGuide-CustomTabsAndFlexibleGrid
@szpickij
@szpickij 4 жыл бұрын
Excellent! Keep it up Matt!
@MaxIzrin
@MaxIzrin 10 ай бұрын
Very good code, and really brings to question why Unity, 4 years later, still has the same stale grid layout component.
@FerdieSwinkels
@FerdieSwinkels 4 жыл бұрын
This is an amazing tutorial, nice work!
@HausCoding
@HausCoding 3 жыл бұрын
my UI not Updating responsive size, now is updated (edited) using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class FlexibleGridLayout : LayoutGroup { public enum FitType { Uniform, Width, Height, FixedRows, FixedColumns } public FitType fitType; public int rows; public int columns; public Vector2 cellSize; public Vector2 spacing; public bool fitX; public bool fitY; public override void CalculateLayoutInputVertical() { base.CalculateLayoutInputHorizontal(); if (fitType == FitType.Width || fitType == FitType.Height || fitType == FitType.Uniform) { fitX = true; fitY = true; float sqrRt = Mathf.Sqrt(transform.childCount); rows = Mathf.CeilToInt(sqrRt); columns = Mathf.CeilToInt(sqrRt); } if (fitType == FitType.Width || fitType == FitType.FixedColumns || fitType == FitType.Uniform) { rows = Mathf.CeilToInt(transform.childCount / (float)columns); } if (fitType == FitType.Height || fitType == FitType.FixedRows || fitType == FitType.Uniform) { columns = Mathf.CeilToInt(transform.childCount / (float)rows); } float parentWidth = rectTransform.rect.width; float parentHeight = rectTransform.rect.height; float cellWidth = (parentWidth / (float)columns) - ((spacing.x / (float)columns) * (columns - 1)) - (padding.left / (float)columns) - (padding.right / (float)columns); float cellHeight = (parentHeight / (float)rows) - ((spacing.y / (float)rows) * (rows - 1)) - (padding.top / (float)rows) - (padding.bottom / (float)rows); cellSize.x = fitX ? cellWidth : cellSize.x; cellSize.y = fitY ? cellHeight : cellSize.y; int columnCount = 0; int rowCount = 0; for (int i = 0; i < rectChildren.Count; i++) { rowCount = i / columns; columnCount = i % columns; var item = rectChildren[i]; var xPos = (cellSize.x * columnCount) + (spacing.x * columnCount) + padding.left; var yPos = (cellSize.y * rowCount) + (spacing.y * rowCount) + padding.top; SetChildAlongAxis(item, 0, xPos, cellSize.x); SetChildAlongAxis(item, 1, yPos, cellSize.y); } } public override void SetLayoutHorizontal() { } public override void SetLayoutVertical() { } private void Update() { CalculateLayoutInputVertical(); SetLayoutHorizontal(); SetLayoutVertical(); } }
@retched
@retched 2 жыл бұрын
Okay so this is wonderful and does the minimum of what I need but I'm trying to figure out how to center align a row. For example, if a grid contains 5 objects on one row but 4 on the next, how to center align the 4 objects under the row of five.
@chrlw
@chrlw 3 жыл бұрын
Absolute top notch video! Thank you so much!
@chronowalker1889
@chronowalker1889 4 жыл бұрын
anyone know where I can download the UI sprite shape assets (bundle or something) shown in 3:33
@danyoutube69
@danyoutube69 4 жыл бұрын
If anyone needs this to work with a content size fitter take a look at doing something like the following below the rest of the code described in the video. This is just a draft and needs expanding on to fully work with the different configurations of the component, but it should give you a good base to work from - if (GetComponent() != null) { var totalMinWidth = (rectChildren.Count * (cellSize.x + spacing.x)) + padding.left + padding.right; var totalMinHeight = (rectChildren.Count * (cellSize.y + spacing.y)) + padding.top + padding.bottom; SetLayoutInputForAxis(totalMinWidth, -1, -1, 0); SetLayoutInputForAxis(totalMinHeight, -1, -1, 1); }
@junliangho501
@junliangho501 2 жыл бұрын
if (!fitX) { var totalMinWidth = columns * cellSize.x + padding.left + padding.right + spacing.x * (columns - 1); SetLayoutInputForAxis(totalMinWidth, -1, -1, 0); } if (!fitY) { var totalMinHeight = rows * cellSize.y + padding.top + padding.bottom + spacing.y * (rows - 1); SetLayoutInputForAxis(totalMinHeight, -1, -1, 1); } worked from the cellWidth/cellHeight equation
@martinschiffer4280
@martinschiffer4280 2 жыл бұрын
@@junliangho501 bro you literally saved me, thanks!
@wyrda2452
@wyrda2452 Жыл бұрын
@@junliangho501 Worked perfectly!
@ObsessiveGames
@ObsessiveGames 2 жыл бұрын
Great explanation, will use this in one of my future games
@OblivionTanks
@OblivionTanks 4 жыл бұрын
Cool vid. For the project I'm working on I went for a 3D type menu system that navigates like a point and click adventure. Though at first I was using a typical 2d tabbed grid Ui. It was slow and boring to navigate, The 3D menu made things so much more fluid, fast and fun to navigate. If you are going to make a game with lots to do like my project. Might as well make the menus/inventory fun to open up. That the issue I have with lots of AAA games the menus are slow and boring to navigate and for most open world games you spend to much time in them.
@homemacai
@homemacai 4 жыл бұрын
Your videos are awesome mate! Thank you!
@help_master
@help_master 3 жыл бұрын
The idea is good because it looks like professional game ui system. The issues is that there are many files and we do not lnow where to find there.
@g.radovilskiy
@g.radovilskiy 4 жыл бұрын
if anyone has problems with understanding and work of cellWidth and cellHeight I think this version will be better: cellWidth = (parent.width - (spacing.x * ((float)columns - 1)) - padding.left - padding.right) / (float)columns; you first get sum of all sizes and then divide it in columns count.
@Trymops
@Trymops 2 жыл бұрын
You approach also fixes the bad padding on the right/bottom for 2x2 grids that can be seen in the video at 8:35 where right and bottom has more space due to spacing being added as extra padding. :)
@leeblackharry
@leeblackharry 3 жыл бұрын
Instead of placing objects into the Home Panel, I instantiated a prefab in a Start() routine and then parent each of those objects to the Home Panel. This worked but the prefab does not change scale to keep the spacing and padding the same when I drag the Home Panel anchors. I'm trying to see how your code changes the size of the images that you have in Home Panel. I see where the cellSize for x and y is calculated by how do the images change from that?
@rahulcorleone4222
@rahulcorleone4222 3 жыл бұрын
Thanks, It came in handy for my current project.
@dankenarigato
@dankenarigato 4 жыл бұрын
WOW!!!!! this is very useful .thank you GDG~
@osmancanernurdag
@osmancanernurdag 9 ай бұрын
This is amazing bro. Thank you :)
@alextreme98
@alextreme98 4 жыл бұрын
you should post more, you are so good dude, i learned a lot from you, thanks 🥇
@Tauruspasific
@Tauruspasific 4 жыл бұрын
I only want to say thanks for all this such amazing job are you doing. ❤️
@lauch8844
@lauch8844 4 жыл бұрын
Why is it so hard to find advanced tutorials/guides like this? There are million of beginner tutorials but no advanced stuff. Really depressing
@viniciusps01
@viniciusps01 4 жыл бұрын
All of your vídeos are great. Thank you by that :)
@artourprice2435
@artourprice2435 2 жыл бұрын
Great Tut. Thank you so much for teaching this.
@-vhs
@-vhs 4 жыл бұрын
I am in love with your channel!
@btiwari-games5279
@btiwari-games5279 4 жыл бұрын
This is awesome buddy 🤩
@322ss
@322ss 4 жыл бұрын
Thanks! This is really neat solution! I've (tried) to create something similar, but it wasn't nearly as clean - and I think I just used grid layout group + script that modified grid child sizes...
@vasil-yt
@vasil-yt 4 жыл бұрын
I added this so it works in a vertical scrollview: if(fitType == FitType.FixedColumns) { rectTransform.sizeDelta = new Vector2(rectTransform.sizeDelta.x, (cellSize.y * (float)rows) + (spacing.y * (float)rows) - spacing.y); }
@Khanguyen_
@Khanguyen_ 2 жыл бұрын
You just helped me out so much. Thank you.
@bruhmanbruhmanzz
@bruhmanbruhmanzz 11 ай бұрын
shouldnt it be "+ spacing.y" instead of "- spacing.y" ?
@uchihai_a_h4871
@uchihai_a_h4871 3 жыл бұрын
The content size fitter is not working with this flexible grid layout component...
@thecookies6109
@thecookies6109 3 жыл бұрын
Great Found what I was looking for.
@christinaVennegerts
@christinaVennegerts 3 жыл бұрын
Awesome tutorial, thank you very much!
@XeEroinCipher
@XeEroinCipher 4 жыл бұрын
I can not Center align the Children With this code. :( What am i missing?!
@appulse
@appulse 3 жыл бұрын
Same problem here, I'm searching a way to (re)add this possibility since cells positions are overriden by the script, if somebody got a hint
@Niihiiliith
@Niihiiliith 2 жыл бұрын
This helped me a lot today. Thanks ^__^
Designing A Responsive Tooltip System in Unity
9:45
Game Dev Guide
Рет қаралды 93 М.
Making UI That Looks Good In Unity
18:06
Game Dev Guide
Рет қаралды 701 М.
Chain Game Strong ⛓️
00:21
Anwar Jibawi
Рет қаралды 41 МЛН
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН
11 Things You (Probably) Didn't Know You Could Do In Unity
13:49
Game Dev Guide
Рет қаралды 158 М.
Разбираемся в составных LayoutGroups на примере (+ ContentSizeFitter)
26:30
How To Build Roads Procedurally In Unity with the Splines Package
17:51
A new way to generate worlds (stitched WFC)
10:51
Watt
Рет қаралды 555 М.
How To Make UIs without frustration | Unity Beginner Tutorial
16:58
This is GameDev
Рет қаралды 38 М.
Creating a Custom Tab System in Unity
13:45
Game Dev Guide
Рет қаралды 239 М.
Building Runtime UI with UI Toolkit In Unity
21:35
Game Dev Guide
Рет қаралды 67 М.
Get started with UI Toolkit in Unity
12:29
Sasquatch B Studios
Рет қаралды 56 М.
How to use Layout Groups in Unity
11:02
Tarodev
Рет қаралды 43 М.
Better Jumping in Unity With Four Lines of Code
12:47
Board To Bits Games
Рет қаралды 826 М.