Understanding UILayout

[JakeTBear]

Hello,

I am fairly new to Unity and even newer to 2D toolkit but I am already quite impressed with it and how easy everything has been.

I was able to make sprites collections and use them, I was also able to create some simple buttons and to properly setup my camera for multiple resolutions, I wanted to thank you guys for doing such a fine job in all of that.

But I hit a block, nothing mayor but I seem to not be able to find much information about it, besides the examples that come with the asset. I was attempting to create a scrollable area to make a level selection menu, nothing fancy, but I really cant grasp how to properly setup the content area, or the limits of it, I read that a layout item needs to be setup, but I also do not understand how this component works, if you could point me to a tutorial that explains it or some video that demonstrates how to use it or if you could provide me with a short explanation in simple words (I am fairly new!) about how to use it I would be very grateful!

Thanks you

[unikronsoftware]

The best way to learn how that layout thing / scrollable area works is to look at UI demo #5.That shows you 2 ways of achieving the same result, the one using layout is considerably easier and quicker to set up.

Some things to remember:

Each tk2dUILayout has dimensions. Eg. the ItemTemplate object (which would normally be a prefab) has actual bounds (purple outline when selected). This may be bigger than the contents, or smaller if you want overlap.

A tk2dUILayoutContainerSizer contains tk2dUILayouts and arranges them in a row. In the auto scrollable area, the scrollable area Content object has a uiLayout Container Sizer object there. When you add UILayouts to this, you tell it to use fixed size for the items and it'll arrange them in a row. Check the AddSomeItemsAuto function on how to add stuff to it. We use autoScrollableArea.ContentLayoutContainer.AddLayoutAtIndex to append the item to the list. The last bit that ties all this together is the Content Layout Container object in the scrollable area script (on ScrollableArea_Horizontal). That needs to be assigned so the scrollablearea knows to automatically calculate content size based on the sizer. It sounds a bit complicated but it really is quite straightforward when you understand the relationships between things.

[JakeTBear]

Hey, thanks for your reply!

I have been looking into that precise demo, and going back and forth to my own Scene to check things, some progress has been made but I am still very confused 

I will keep attempting to make it work the way I want it, I think my confusion comes from the fact that the initial setup of that example comes from code rather than the editor itself. Also thanks for clarifying what the purple bounds were, I have been trying to understand what they were doing!

I will come back once I have more precise and clear questions rather than a vague general one, thanks a lot for your help