Tile based map movement sluggish with UIImage

Question

I have the following code which draws a bunch of uiimage tiles on screen each time the screen is touched (its a character exploring a tile dungeon). But the movement is very jumpy if I click quickly. Why is it acting sluggishly.

Thanks.

- (void) updateView {
// lets remove all subviews and start fresh
for (UIView *subview in self.view.subviews)
    [subview removeFromSuperview];

[self drawVisibleDungeon];
[self displayMonsters];

[self drawPlayer];
[self.view setNeedsDisplay];

[self.view addSubview:messageDisplay];
[self.view addSubview:miniMap];
[miniMap setNeedsDisplay];
}   

- (void) processTouchAtX: (int)x AndY: (int)y
{
int tempx = 0;
int tempy = 0;

if (x > 4)
    tempx++;
if (x < 4)
    tempx--;
if (y > 6)
    tempy++;
if (y < 6)
    tempy--;    

[[[self _accessHook] dungeonReference]processOneTurnWithX:tempx AndY:tempy];
[self updateView];
}

- (void) displayMonsters
{
UIImage *aImg;
int x, y;
NSString *aString;
int monCount = [[[_accessHook dungeonReference]aDungeonLevel]monsterCount];
NSMutableArray *monArray = [[[_accessHook dungeonReference]aDungeonLevel]mArray];
int player_x_loc = [[[self _accessHook] dungeonReference] thePlayer].x_location;
int player_y_loc = [[[self _accessHook] dungeonReference] thePlayer].y_location;

for (int i=0; i<monCount; i++)
{
    x = [[monArray objectAtIndex: i] x_loc];
    y = [[monArray objectAtIndex: i] y_loc];

    if ([self LOSFrom:CGPointMake(x, y)])
        if ((x >= player_x_loc-4) && (x < (player_x_loc+5)) && (y >= player_y_loc-6) && (y < (player_y_loc+6)))
        {
            UIImageView *imgView=[[UIImageView alloc]init];
            aString = [[monArray objectAtIndex:i]monsterPicture];
            aImg = [UIImage imageNamed:aString];
            imgView.frame=CGRectMake((x - (player_x_loc-4))*32, (y - (player_y_loc-6))*32, 32, 32);
            imgView.image = aImg;
            [self.view addSubview:imgView];
            [self.view bringSubviewToFront:imgView];
            [imgView release];
        }
}
}

Answer 1

Your idea of using cocos2d is fine, and it's a very good framework and probably well suited to other problems you may face. But... why don't we also discuss why you're having so much trouble.

You're using a separate UIImageView for each tile. UIImage is fine, and pretty efficient for most purposes. But a full view for every tile is pretty expensive. Worse, every time you call updateView, you take everything and throw it away. That's very, very expensive.

Just as step one, because it's easy for you to fix, set up all the image views at the beginning and store them in an array. Then in displayMonsters, just change their locations and images rather than deleting them and creating new ones. That by itself will dramatically improve your performance I suspect.

If you still need more performance, you can switch to using CALayer rather than UIImageView. You can very easily create a CALayer and set its contents to aImg.CGImage. Again, you'd add a bunch of CALayer objects with [view.layer addSublayer:layer], just like adding views. Layers are just much cheaper than views because they don't handle things like touch events. They just draw.

But if you anticipate needing fancier 2D graphics, there's nothing wrong with Cocos2D.