Vertical Layout Group and changing UI

[annathehank]

Hi, last question for the day I *promise*

I wanted to change the background images on the quest log window UI. I want to move the text for the details and titles to match, but I cannot for the life of me wrap my head around the vertical layout group stuff. I tried simply turning it off and rearranging the boxes to wherever I wanted/needed them, but that made it so the text that fills it in cuts off after it reaches the size of the original box, and I'm not sure where the aspect of adding on the rest comes into play. This also causes the quest entries to pile on top of each other instead of space out.

Any ideas on the best way to fix this?

[Tony Li]

Hi,

The Vertical Layout Group is necessary because it arranges everything vertically and spaces it out properly.

In most of the quest log window prefabs, including the tabbed quest log example, the Quest Details Panel is a fixed size. You can move the Quest Details Panel around and resize it. Its content should automatically fit to the size of the Quest Details Panel.

Inside the Quest Details Panel is a Scroll View, which contains the scrollable content. If you need more border space, inspect the Scroll View's Rect Transform and add space to the Left, Top, Right, and/or Bottom.

Drilling down a few children into the Scroll View is the Selected Quest Details Content. This has the Vertical Layout Group. You shouldn't need to change any settings. Note that it also has a Content Size Fitter whose Vertical Fit is set to Preferred Size. This causes it to grow vertically to fit its content.

I hope that info helps. If not, the Unity UI Tutorial in raywenderlich.com is really useful. And if that doesn't answer your questions, feel free to post your UI here or email a reproduction project to tony (at) pixelcrushers.com along with instructions on how to reproduce the problem, what the problem looks like, and what you'd like to see when it's functioning correctly.

[annathehank]

First of all, thank you for that link!!! I love the unity learning center but I am very much so a reading-based learner so all the video tutorials are hard to get through and that UI tutorial looks amazing!

So basically I changed the image of the viewport to the window background box to give it a more aged sort of feel, and wanted to get the 'quest title' template in the little top bar, and have the rest of it match the space beneath.


I messed around with the spacing and padding in the vertical layout group and managed to get kinda close with something like this.


I think what I'm still not connecting is how the templates for the headings/entries and all work? Because as of right now, looking at the editor, there are the text box spaces around each heading, like Quest description. And I figure there's a script somewhere with a code that basically says, 'if quest description is longer than allocated text box, fill text out to the length of the vertical group' or something like that, right? Because removing the group, or moving just one part out, causes the fill-in text from the quests to get cut off by the smaller text boxes. I may be completely misunderstanding how it all works.

And if this isn't the place to be asking these kinds of questions let me know! I wasn't sure if this technically fell under the dialogue system realm or not <3 But thank you for putting up with all my questions!! I'd be very lost without you and the system <3

[Tony Li]

Hi,

Here's an example scene:

DS_TabbedQuestLogExample2_2021-03-17.unitypackage

The scene is named "Tabbed Quest Log Example 2". It's based on the files in the original Tabbed Quest Log Window example, so those files need to be in your project, too.

I made a few tweaks, but these are the important ones:

• Both Scroll Views: Set Rect Transform's Left/Right=16, Top/Bottom=48 to inset it inside the Runic frame image.
• Quest Details Panel > Quest Heading Template:
  • Unticked Maskable since it will be outside the masked Scroll View area.
  • Added a Layout Element. Ticked Ignore Layout so we can position it manually in the title bar.
  • Positioned it manually.

It looks like this:

tabbedQuestLog2.png (232.96 KiB) Viewed 1004 times

[annathehank]

Amazing!!! Thank you so very much!!! <3 that's perfect!!! I appreciate it/you!

[Tony Li]

Happy to help!