Content size fitter and dynamic content – Part 1

First of all for those unfamiliar with the term dynamic content like dynamic text it’s probably best explained as content that can change in size, shape or form. Highly mutable things like player name, localized string or content fetched from the game server or database. This sort of content can be a real pain to display properly in a user interface.

For example when localizing your game, the new localized text might require a lot more space than the English counterpart. Player might want to create a ton of save files and you want to display all of them in a scroll view or you want to have inventory that the player can choose to expand. Maybe you want to fetch and display information about latest updates and events in your multiplayer game or provide the player to browse servers or running games.

A lot of these things can be achieved with efficient use of content size fitter and Auto layouts (e.g vertical layout group).

Scrollable content

A lot of games these days have so much content that it’s simply too much to display even on a huge screen running 4k resolution. Especially so if you don’t want your inventory or settings window to take the whole screen.

For cases like these it’s usually enough to use Scroll Rect which allows you to scroll the selected content both horizontally and/or vertically and a mask with a image to smoothly hide content not fit for the window.  While these are generally easy to use, the settings for the content RectTransform can be a pit tricky unless you’re familiar with anchors and pivot points

Below is an example of typical RectTransform with Scroll Rect and Mask component. The image is just the unity default Null-sprite, and the content transform in a child is assigned to the Scroll Rects content field. Vertical is disabled because vertical scrolling is not desired in this particular case.

Here’s one way to setup the actual content. I’ve used top anchor with horizontal stretch for the content to fit to the Scroll Rect as well as disabled content size fitter from modifying the horizontal size of the content.

The width of the children is controlled by the vertical layout group through it’s Control Child Size: width option. If you wanted to specify the width of the children by yourself, you can simply leave that out. The Child Force Expand options are not really needed in this case because the vertical size is controlled by the attached content size fitter.

Also not the pivot point and position of the content. With y-axis pivot set to 1 and the position in y-axis set to 0 the contents position defaults to the top of the content. If it were centered it might cause weird behavior when the content is displayed especially with Scroll Rect movement set to elastic.

If also set the spacing to 5 to have some extra space between control settings and aligned the child objects to center so that if I decide to disable control child size and horizontal stretch the content will still be centered.

In the second part we will discuss how to use Content Size fitter to resize the parent RectTransform to implement dynamic text with a background for things like tool-tips, speech bubbles, loot names and the like.