Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: jtate on January 06, 2013, 12:30:56 AM

Title: Scroll View with large amount of objects
Post by: jtate on January 06, 2013, 12:30:56 AM
I'm creating a scroll view that can have a very large number of objects in it (1000+).  This can obviously have very bad performance, especially on mobile devices.  I'd like to be able to limit the number of objects in the grid to a small number and dynamically add and remove them as the user scrolls up and down (and probably using an object pool to recycle them). 

Has anyone done this?  Is there an easy approach that I can use? 
Title: Re: Scroll View with large amount of objects
Post by: BeShifty on January 06, 2013, 01:09:43 AM
Off the top of my head, it might make sense to create enough UIGrids to contain all your objects with a max number of children in each, and then dynamically enable and disable them as they become visible. You could set up anchoring each grid to the bottom of the previous one in the initialization. Say the currently visible grid is #3. You check if you can see the bottom of the uigrid in the scroll view, and if so, enable grid 4 to the bottom of grid 3. If instead the bottom of the grid isn't visible, but you have a "next" grid enabled, disable it. Similar checks for the top of the grid.
It's almost like you've got a deck of grids above and a deck of grids below your visible grids, and you're just pulling them off the deck as needed.
Memory might be an issue here, I'm not sure.
Title: Re: Scroll View with large amount of objects
Post by: jtate on January 07, 2013, 03:45:21 PM
This may very well work.  I am having some trouble anchoring UIGrid objects.  How do I go about doing that (they aren't UIPanels or UIWidgets)?  Thanks in advance...
Title: Re: Scroll View with large amount of objects
Post by: BeShifty on January 07, 2013, 04:09:39 PM
Hmm that's true. You can still attach the UIAnchor script to the grid, but you'll need to anchor it to the last element of the previous grid.
Here's some very rough code to do the first half of the work (anchoring to the bottom of the last grid). You'd still need to add the code to create a second anchor that anchors to the top of the next grid, fill in the missing functions, and set up the Update routines to enable and disable the grids and their anchors selectively.
  1. void SetupGrids() {
  2.         int gridCount = 0;
  3.         GameObject lastAdded;
  4.         for( int i = 0; i < elements.Length; i++ ) {
  5.                 GameObject nextGridObj = NGUITools.AddChild( GetPanel().gameObject );
  6.                 nextGridObj.name = "Grid " + (gridCount++);
  7.                 UIGrid nextGrid = nextGridObj.AddComponent<UIGrid>();
  8.                 UIAnchor nextGridAnchor = nextGridObj.AddComponent<UIAnchor>();
  9.                 if( lastAdded != null )
  10.                         nextGridAnchor.widgetContainer = lastAdded.GetComponentInChildren<UIWidget>();
  11.                
  12.                 for( int j = 0; j < GRID_MAX_SIZE; j++ ) {
  13.                         lastAdded = GetNewElement();
  14.                         lastAdded.transform.parent = nextGridObj.transform;
  15.                 }
  16.         }
  17. }
  18.  
Title: Re: Scroll View with large amount of objects
Post by: jtate on January 07, 2013, 11:12:25 PM
Thanks BeShifty!  I used this approach and it worked great to reduce the draw calls.  Do you think there is some way to dynamically add/remove the UIGrids at run time in order to reduce the total number of objects (and avoiding any memory issues)? 
Title: Re: Scroll View with large amount of objects
Post by: BeShifty on January 08, 2013, 01:37:11 PM
If you've got functions that are called when the next grid needs to be attached, you could just add the code that creates the next grid there. Pretty much just detect which index the first element of the next grid should be, and then use the inner loop from the code I posted above.
Title: Re: Scroll View with large amount of objects
Post by: jtate on January 08, 2013, 02:02:09 PM
The problem comes when removing grids.  Removing a grid changes the positions of all the anchored grids below it, causing them to go out of view.
Title: Re: Scroll View with large amount of objects
Post by: BeShifty on January 08, 2013, 02:53:16 PM
Disable any anchors that point to it before destroying the grid.