Optimising tk2dUIScrollableArea to handle hundreds of child elements

[kujo]

Hi,

I'm currently using the UIScrollableArea prefab to present all my Facebook friends pulled from out server. For the most part in our app, this works perfectly, but with the Facebook stuff, it can take a heck of a long time to present all of this data. I am using a game object with a tk2dUILayout component added to lay out correctly.

I'm wondering what the best way to deal with this is. Is there something I can do to the current implementation to improve performance? I wondered about developing something similar to the UITableView from iPhone so that not all the records are displayed at any one time? Or is there something else I should be using to handle this many child items?

Thanks

Alan

[unikronsoftware]

Hi,

Its pretty easy to create a very large scrolling scrollable area with paging. The key thing to understand is - the scrollable area simply scrolls the "Content" object to display more content - the furthest it'll offset it is ContentLength - VisibleAreaLength. The offset of content.y = (contentLength - visibleAreaLength) * Value;

So all you need to know is how tall your "row" is in world units. With that knowledge you can work out what the first visible row is, and what the last visible row is. Since the row objects are children of the content object, all you need to do is make sure you have all the visible rows created. You won't need more than than Ceil(visibleAreaLength / rowHeight) + 1 rows, and you can pool them. If you write the code in such a way that it pools the rows, you will find that you can easily preallocate the necessary amount, avoid allocations at runtime and it will be fast.

[kujo]

Hi,

I've been trying to get this implemented, to little success. But I've just been looking over the UI Demos, specifically at the ScrollableArea demo and made it generate 1000 items on start up and it is massively faster than what I'm doing. I noticed that in the demo, it doesn't use a tk2dUILayoutContainerSizer, which I am doing. Could this have something to do with why its so slow?

I'm basically iterating through a list of objects I receive from the web as follow:

Code: [Select]

foreach (var item in fbFriends)
{
var layout = Instantiate (InactiveFriend) as tk2dUILayout;
ScreenLayout.AddLayout (layout, tk2dUILayoutItem.FixedSizeLayoutItem ());
layout.gameObject.SetActive (true);
SetListObject (layout.transform, item, false);
}


[unikronsoftware]

No, just instantiating 1000 items will be really slow. To get large lists working nicely you will have to pool & recycle (that means not using the container sizer). The good news is 2D Toolkit 2.4 will have a new sample that implements an "infinite" list. Its really fast. Email support and I'll sort you out with a preview of that demo.

Note: this isn't a component that does it, its a sample which you will have to customise for your needs but its well commented and should be easy enough to figure out.

[kujo]

Thanks very much - I've dropped Support an email