I need a strategy for developing graphics for a Cocos2d-iPhone project.

Question

My little game project is a physics based platform jobbie created with Chipmunk (via SpaceManager) in Cocos2d.

I wanted something a little different to the a-typical tile mapped level design, so I'm creating levels as SVG files in Illustrator, which I then parse to create the landscape, platforms, spawn points etc etc. It's working pretty well and I feel like I can be as creative as I want with the level design this way.

However, this approach only creates the chipmunk bodies and shapes so far. It doesn't help me when it comes to creating graphics for things like the landscape.

So to illustrate what I'm talking about, a basic level would look a little something like this (scaled down)

The grey areas would represent the landscape.

My first thought was to trace over these levels in Photoshop, and slice them up into 512x512 pngs, which could then be laid on on top of the physics layer. But that instinctively sounds like a very inefficient way to go.

the guys behind Rolando have taken a super simple approach which works well for them

But I would like a bit more detail in my levels, almost similar to what they've achieved in MX Mayhem

Which the more I look at, thew more I'm convinced that they're using the first approach I mentioned of laying large images over the top of everything.

So, my question is, does anyone have any tips or insight into what sort of stuff I should be exploring or reading up on to accomplish this sort of stuff. Up to now, my only experience with creating level graphics in Cocos2d has been with TMXTileMaps. I'm still new to game development so perhaps there's some jargon and terminology to describe what I'm aiming for that I just don't know yet.

Any help or advice is greatly appreciated.

PS: I know question within questions are bad form but it makes sense here: What's the math behind memory usage? Is there a formula I can use to figure out the memory usage of my graphics up front.

Answer 1

How about something in between? In Cocos2d, you can create your sprites using a texture, which you can generate by drawing into an image buffer. That would give you the best of both worlds. You could use the level data to draw the large 512x512 image chunks you mention with large vector shapes for the terrain areas, but then use smaller graphics to decorate them to your heart's content, either based on the data you include with your map, or procedurally. That would allow you to create something like what MX Mayhem has without shipping lots of giant image files with your app. (In fact, it wouldn't surprise me if this is how MX Mayhem does it.)

Here's some code I'm using at the moment to accomplish something similar:

- (CGContextRef) createBitmapContextOfSize:(CGSize) size {
    CGContextRef    context = NULL;
    CGColorSpaceRef colorSpace;
    void *          bitmapData;
    int             bitmapByteCount;
    int             bitmapBytesPerRow;

    bitmapBytesPerRow   = (size.width * 4);
    bitmapByteCount     = (bitmapBytesPerRow * size.height);

    colorSpace = CGColorSpaceCreateDeviceRGB();
    bitmapData = malloc( bitmapByteCount );
    if (bitmapData == NULL) {
        fprintf (stderr, "Memory not allocated!");
        return NULL;
    }
    context = CGBitmapContextCreate (bitmapData,
                                     size.width,
                                     size.height,
                                     8,      // bits per component
                                     bitmapBytesPerRow,
                                     colorSpace,
                                     kCGImageAlphaPremultipliedLast);
    CGContextSetAllowsAntialiasing (context,NO);
    if (context== NULL) {
        free (bitmapData);
        fprintf (stderr, "Context not created!");
        return NULL;
    }
    CGColorSpaceRelease( colorSpace );
    return context;
}

- (UIImage *)drawLevelImage {

    UIImage *gfx = [UIImage imageNamed:@"gfx.png"];
    CGContextRef myBitmapContext = [self createBitmapContextOfSize: CGSizeMake(1024,1024)];
    //  Preserve alpha
    CGContextClearRect (myBitmapContext, CGRectMake(0,0,1024,1024));

    //  Step through your shapes here, and whenever you need to draw something out of your gfx:
    CGImageRef _imageRef = CGImageCreateWithImageInRect(gfx.CGImage, sourceImageRect);
    CGContextDrawImage(myBitmapContext, destinationImageRect, _imageRef);
    CGImageRelease(_imageRef);
    //  The above could be sped up by caching the image refs if you use them more than once.

    UIImage *result = [UIImage imageWithCGImage: CGBitmapContextCreateImage(myBitmapContext)];
    CGContextRelease( myBitmapContext );
    return result;
}