Saturday, March 24, 2012

Handy Graphics Tricks

This is one that Pete came up with, for cards in our poker apps, but it's worth mentioning again with the new iPad's retina screen needing even bigger graphics. And we did a slight variation in Knife Dancing too.

All the hands in the game are really recolored versions of the same hand photo to have different skin tones.  So they're exactly the same shape and outline.  Pete saved them as 8 bit images, which for the hands looks good, but the blending along the edges isn't as nice.  It's hard to see here but there's an outline around the hands for the edge blending that happens next.

Pete made a separate 32bit version that does have all the levels of alpha at the edges, but just blank for the hand part so very small to store.  All 4 versions of the hand can share this one alpha image!

Then in the app I combine them on the fly into one graphic.


CGRect  rect = CGRectMake(007681024)
UIGraphicsBeginImageContextWithOptions(CGSizeMake(768, 1024), NO, 0.0);
[[UIImage imageNamed:@"ipad-hand1-8bit.png"] drawInRect:rect];
[[UIImage imageNamed:@"ipad-hand-alpha.png"] drawInRect:rect 
          blendMode:kCGBlendModeDestinationIn alpha:1.0];
theHand.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();


The iPad retina hands saved normally are over 7MB(!)  Using these split and shared images it reduces those to 2.5MB.

No comments: