PNG Stacking to Cut Sown on Graphics Load

This should be filed under the 'why didn't I think of this earlier' category. Except that it didn't become as much of an issue until the iPhone 4 and @2x graphics started coming into play and needing to keep games within the 20mb download limit for downloading to an iPhone over the 3G network.

So... We have a few poker games for iOs.
Poker games need cards.
A deck of cards (with both standard and 4-color decks) requires 78 "card face" images (13*6).
The iPhone version of our game(s) has two sizes of cards--one larger set for the individual players and a smaller set for the board. 13*6*2 = 156 images.
It also uses a different set of board cards for 1-player and 2-player games. 13*6*3 = 234.
iPhone4 adds retina @2x versions of things. 13*6*3*2=468.
Poker 1 on 1 with Vanessa Rousso is a universal app, so it needs the iPad cards, too (13*6*3*2)+(13*6) = 546 images.

That adds up...

So, by using a single PNG-24 blank as the background of every card and then stacking a cropped PNG-8 of the card face on top of it, we can get a perfectly looking card with the full alpha channel shading at a fraction of the download size per deck.
iPad HD deck alone dropped from 1.62mb to 517k.
The full compliment of iPhone decks (multiple decks @1x and @2x) dropped from 5.63mb to 2.47mb.
A zoomed in look in PhotoShop can show very slight dithering on some of the face cards when converted to PNG8, but this will be imperceptible in the game. (Look at the blue border as it passes over the queen's head. See the dithering? I didn't think so.)



These will all be implemented (but won't be noticed) in the next update of Poker 1 on 1 with Vanessa Rousso, Heads Up: Hold'em, Heads Up: Hold'em HD.

What WILL be noticed is that this frees up over 4mb for new content.

This technique could be used for any card game, domino game, etc. and any game that uses tiles or rectangle shaped game pieces.

You're welcome.
-Pete