Note you can actually have a dynamically sizing box *both* vertically *AND* horizontally without making explicit line breaks in the text! Though the setup is not quite straight forward.. Using the hierarchy in this video: - Container: ContentSizeFitter with *HorizontalFit unrestricted* and *VerticalFit prefferedsize* , VerticalLayoutGroup with ControlChildSize for both width and height *BUT no ChildForceExpand set* -- ImageSpeechBubble: VerticalLayoutGroup with ControlChildSize for both width and height *BUT no ChildForceExpand set* --- Text(TMP): Plain text element, *NO LayoutElement or ContentSizeFitter components!* If the layouting stuff in unity had MaxWidth and MaxHeight properties, things could be a lot easier and more straight forward...
The best tutorial on this topic. I couldn't make it work properly before, just tried random stuff until it kinda worked, and now I understand how to do it.
Finally.. A video that shows how the scaling elements relate to each other. I was trying forever to get it to only scale up and not down. Every other tutorial completely skips over the pivot points and why you want it to be set to center bottom/top. Thank you!
What if the parent of this container also has verticallayoutgroup, it gives "parent has layout group" error, I want speech bubbles the layout vertically also
I feel you. I went thru that figuring a system which worked well for me! I made the tutorial so i didn't forget what I did because I need it every now and then.
The moment I set the Empty Game Object's Content Size Fitter Vertical Fit property to Preferred Size - it's Height value changes to match the image's pixel size, and unless that is smaller than the size you need, it will not look good. I tried changing Vertical Fit to Min Size or setting the image's Preferred Width or Preferred Height values by adding a Layout Element component to it brings the image back to it's desired size but it prevents the text from resizing the image, making the whole process meaningless. Eventually, I ended up changing the Empty's scale to 0.25 on all axes and multiplying the font size by 4.
@@DestinedToLearn Yeah, it took a lot of fiddling. I should also mention that it's really useful to switch the Canvas object to render in World Space. I'm currently building a UI over a mockup and switching the Canvas to World Space allows me to accurately place the UI elements in their desired locations. It also prevents elements from moving around when rescaling the screen, which was a major issue in my case. I haven't found a downside to working in World Space, but I bet it's just a matter of time. Otherwise, this'll be my way of working with Canvas objects for every project from now on.
@@DestinedToLearn Thank you for the content, I'd be interested to know as well! Mystic Messenger came to mind, but any chat simulator interface would be just as helpful
Achieving this effect has been bothering me for a long time, and I'd appreciate it if you'd go a little deeper into why you use these components and how they work. Your tutorial is good, thank you very much!
I have a game with over 20 000 lines of code and the most advanced systems. But I can't get the content size fitting and Unity UI to work how I want it to. It's so badly designed every time I do UI work its just guesswork and trial and error. I give up once again, I'm diving into visual studios to solve this aswell aswell. Lmfao!
@@DestinedToLearn I got it to work... but with several other issues with no solution in sight. It got me way too frustrated, so I ended up writing a script for it.
Note you can actually have a dynamically sizing box *both* vertically *AND* horizontally without making explicit line breaks in the text! Though the setup is not quite straight forward.. Using the hierarchy in this video:
- Container: ContentSizeFitter with *HorizontalFit unrestricted* and *VerticalFit prefferedsize* , VerticalLayoutGroup with ControlChildSize for both width and height *BUT no ChildForceExpand set*
-- ImageSpeechBubble: VerticalLayoutGroup with ControlChildSize for both width and height *BUT no ChildForceExpand set*
--- Text(TMP): Plain text element, *NO LayoutElement or ContentSizeFitter components!*
If the layouting stuff in unity had MaxWidth and MaxHeight properties, things could be a lot easier and more straight forward...
Thanks :) The unity UI is powerful but tricky at times. I pinned this so people will notice.
@@DestinedToLearn Oh nice, glad to help :)
@@BGFutureBG :)
I love you! content size fitter stuff is not very intuitive :/
@@BGFutureBG Thanks man, I was looking for this exact thing online and couldn't find it until your comment :)
The best tutorial on this topic. I couldn't make it work properly before, just tried random stuff until it kinda worked, and now I understand how to do it.
glad it helped
Finally.. A video that shows how the scaling elements relate to each other. I was trying forever to get it to only scale up and not down. Every other tutorial completely skips over the pivot points and why you want it to be set to center bottom/top. Thank you!
I am glad it helped, honestly I made this tutorial so I wouldn't forget next time i needed to do it!
I had problems at first but it end up working, thank you so much
glad you got it figured. It is a bit tricky.
You're a legend.
glad it helped
Thanks a lot
you are welcome
What if the parent of this container also has verticallayoutgroup, it gives "parent has layout group" error, I want speech bubbles the layout vertically also
Cheers keep up e good works
thanks for the kind comment :)
You have saved my sanity, thank you!
Glad it helped. When I first did this is was a bit annoying to setup. I actually made the tutorial to remind future me how to do it.
Thank you so much. I was in unbearable pain.
I feel you. I went thru that figuring a system which worked well for me! I made the tutorial so i didn't forget what I did because I need it every now and then.
Very clear and helpful tutorial! Thanks a lot!! ^^
glad it helped :)
Thanks very much xD. You save my time and life.
glad it helped
THANK YOU
you are welcome ;)
Maaaan!! you are the best!! Thank you!
glad it helped :)
well explained and helpful, thanks
glad it helped
Perfect tutorial, really clear and helpful thx ;)
Glad it helped :)
The moment I set the Empty Game Object's Content Size Fitter Vertical Fit property to Preferred Size - it's Height value changes to match the image's pixel size, and unless that is smaller than the size you need, it will not look good. I tried changing Vertical Fit to Min Size or setting the image's Preferred Width or Preferred Height values by adding a Layout Element component to it brings the image back to it's desired size but it prevents the text from resizing the image, making the whole process meaningless.
Eventually, I ended up changing the Empty's scale to 0.25 on all axes and multiplying the font size by 4.
glad you got it fixed in the end. Unity UI is weird sometimes
@@DestinedToLearn Yeah, it took a lot of fiddling.
I should also mention that it's really useful to switch the Canvas object to render in World Space. I'm currently building a UI over a mockup and switching the Canvas to World Space allows me to accurately place the UI elements in their desired locations. It also prevents elements from moving around when rescaling the screen, which was a major issue in my case.
I haven't found a downside to working in World Space, but I bet it's just a matter of time. Otherwise, this'll be my way of working with Canvas objects for every project from now on.
Thank you! Liked, subscribed and commented :D
thank you much appreciated :)
Fantastic stuff!
thank you for kind comment :)
thanks you
you are welcome :)
very usefull
glad it helped :)
Very helpful! Thank you for posting this :)
glad it helped :)
Super usefull thank you1!!
thanks for the nice comment :)
Could you make a tutorial how to spawn the bubles , in such way that if new bubble is spawn the old one moves up like in chat games
oh you mean like phone messages? What chat games are you referring too?
@@DestinedToLearn Thank you for the content, I'd be interested to know as well! Mystic Messenger came to mind, but any chat simulator interface would be just as helpful
@@nguoidanhthuguielise I had to look that up, but that isn't too hard. I will put it on the list. It is pretty much the same as a notification system.
Yeah, I'm also looking for a way of incorporating a chat in a game!! So that the chat boxes move up with time. Would be so helpful
@@anna_8613 I have some time this week so I will try and make this since two people now want it :)
Thanks for the tutorial !
you are welcome :)
Thank You man!
you are welcome :)
Hi! Thanks for the tutorial :D Is there any way to expand whole thing upwards, not downwards?
it is, you need play with the pivot points. I haven't done it but you want to change the pivot to be at the bottom not the top.
Very simple and good tutorial. Thank you
glad you liked it
Really helpful!
Achieving this effect has been bothering me for a long time, and I'd appreciate it if you'd go a little deeper into why you use these components and how they work. Your tutorial is good, thank you very much!
@@taxol1016 glad it helped :)
Thank you so much
glad it helped
Thanks 😁
you are welcome :)
Thanks!
you are welcome :)
Tank you Very much
you are welcome
I have a game with over 20 000 lines of code and the most advanced systems. But I can't get the content size fitting and Unity UI to work how I want it to. It's so badly designed every time I do UI work its just guesswork and trial and error. I give up once again, I'm diving into visual studios to solve this aswell aswell. Lmfao!
indeed i feel it is a dark art too. I made this so i wouldn't forget how I made it work lol
As for know, you can forget this, it's broken it does not work. The image isn't scaling at all.
You probably just missed a step, it is tricky to setup. Plenty of people have got it working with no problem.
@@DestinedToLearn I got it to work... but with several other issues with no solution in sight. It got me way too frustrated, so I ended up writing a script for it.
@@voidling2632 can you share the script