Unity Tutorial Auto scaling image to fit the length of the text using Unity UI. NO CODE, super easy!

Unity Tutorial Auto scaling image to fit the length of the text using Unity UI. NO CODE, super easy!

Any comments or questions welcome. Enjoy the video!
0:00 Introduction
0:22 Scene Setup
2:39 Example 1
8:25 Example 2
10:40 Outro

Song: TheFatRat - Ascendancy, allowed to be used as per

[BGFutureBG]

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

[Anakox]

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.

[MondoMurderface]

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!

[cristianfernandez]

I had problems at first but it end up working, thank you so much

[macawls]

Thank you so much. I was in unbearable pain.

[vincentmeessen]

Perfect tutorial, really clear and helpful thx ;)

[ShiningDawn]

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.

[sujeto]

Maaaan!! you are the best!! Thank you!

[anna_]

Very clear and helpful tutorial! Thanks a lot!! ^^

[voidling]

As for know, you can forget this, it's broken it does not work. The image isn't scaling at all.

[botansahin]

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

[etrex]

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!

[keon-kuk]

Thanks very much xD. You save my time and life.

[eriknastesjo]

Thank you! Liked, subscribed and commented :D

[jirikaminsky]

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

[KomalGupta-fpny]

Very helpful! Thank you for posting this :)

[marceljelinski]

Hi! Thanks for the tutorial :D Is there any way to expand whole thing upwards, not downwards?

[mendalosindiedevrpg]

Very simple and good tutorial. Thank you