2

I really need help with this! I'm building a map containing loads of tiles.. like 200x200 small 50px tiles. These tiles resides in an UIScrollView so that I can drag myself around the map! Works really nice right? Well it's super slow since there are too many subviews in the map.

Right, so I load the subviews as I scroll then! Problem is, that takes some time too, makes the scrolling a bit laggy/slow. Can you help me improve this function? I'm out of ideas. Found the Grand Central Dispatch but I'm not sire how to use it.

Here's my code

-(void)loadMapTiles {
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_apply(1, queue, 
               ^(size_t row) {
                   int radiusX = 11;
                   int radiusY = 7;
                   int y = currentCoord.y-radiusY;
                   for(int x = currentCoord.x-radiusX; x < currentCoord.x+radiusX+1; x++) {
                       int currTag = mapSize.width*(y-1)+x;
                       if(![mapScroller viewWithTag:currTag]) {
                           UIImageView *mapTile = [[UIImageView alloc] initWithFrame:CGRectMake(50*x, 50*y, 50, 50)];
                           int mapNo = (rand() % 20) + 1;
                           if(mapNo > 11) {
                               mapNo = 1;
                           }

                           mapTile.image = [UIImage imageNamed:[NSString stringWithFormat:@"desert_map%d_50.gif", mapNo]];

                           //Tag the mapTile so that we can find it again!
                           [mapTile setTag:currTag];

                           [mapContentView addSubview:mapTile];
                           [mapTile release];
                       }
                       if(x == currentCoord.x+radiusX && y < currentCoord.y+radiusY) {
                           x = currentCoord.x-radiusX-1;
                           y++;
                       }
                   }
                   //Remove the other tiles outside the radius!
                   for (UIView *mapTile in [mapContentView subviews]) {
                       if(mapTile.frame.origin.x / 50 < currentCoord.x-radiusX || mapTile.frame.origin.x / 50 > currentCoord.x+radiusX || mapTile.frame.origin.y / 50 < currentCoord.y-radiusY || mapTile.frame.origin.y / 50 > currentCoord.y+radiusY) {
                           [mapTile removeFromSuperview];
                       }
                   }
               });
}

And the function to call the map-building function above:

-(void)scrollViewDidScroll:(UIScrollView *)myScrollView {  
    CGPoint newCoord = CGPointMake((int)(myScrollView.contentOffset.x + myScrollView.frame.size.width/2) /50, (int)(myScrollView.contentOffset.y + myScrollView.frame.size.height/2) /50);
    if(newCoord.x != currentCoord.x || newCoord.y != currentCoord.y) {
        currentCoord = newCoord;
        [self loadMapTiles];
    }
}  
3
  • 1
    What's the point of the dispatch_apply(1, queue, ...)? I think you want dispatch_async(queue, ^(){...})
    – hypercrypt
    Dec 14, 2011 at 20:55
  • If I do that all i get is Collection <CALayerArray: 0x3dc7c0> was mutated while being enumerated. :( I can't edit the scrollView asynchronously right?
    – Hjalmar
    Dec 14, 2011 at 22:10
  • 1
    UIKit calls should be on the main thread
    – hypercrypt
    Dec 14, 2011 at 22:30

4 Answers 4

4

You'll want to have a look at CATiledLayer. It lets you do what you want in a nice way regardless of how big your map is. It also supports having different images for different zoom levels.

1
  • This sounds great but I can't find any tutorials or good examples for how to make good use of this for a small tile map? :( Every article on this is from 2008 and uses PDFs.
    – Hjalmar
    Dec 14, 2011 at 22:35
1

I'm no obj-c developer but...

At a talk I was at a while ago on mobile web development, they recommend to re-use memory rather than allocate and free it.

Instead of creating a new UIImageView for every tile, could you have enough of them pre-allocated to for the whole screen and just change the images in them as the map is scrolled?

1

Maybe you should try using CoreGraphics and layers instead of scrollview to draw map and scroll it.

0

Look at WWDC 2010 video "Designing apps with scrollviews" and the corresponding sample code "PhotoScroller" there you will learn the big trick of "view reuse" in scrollViews. WWDC 2011 video of similar name is a continuation of the same trick.

"Views that are no longer in the visible area should be reused and repositioned for displaying new stuff"

Adding and removing subviews while scrolling is bound to cause slow downs. Instead you should just reposition the non visible ones and show new stuff.

Other usual causes of scrolling problems are

layer.cornerRadius layer.shadow (without setting shadowPath) any opacity on subviews.

Always profile your code on device using core animation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.