Word Up Dog: Flash optimization for mobile platforms

I just put my new game Word Up Dog up for bidding on FlashGameLicense. It’s very different from my first game Rebuild (I needed a break from zombies!). In Word Up Dog, you play a dog digging underground for letters to anagram, aided by cute animals who speak in 90’s hiphop lingo. It has a simple interface and can be played in short sessions, so it’s a good fit for mobile platforms like the iPhone, iPad and Android phones.

When uploading a game to FlashGameLicense, one of the options is a “Mobile-ready” checkbox. Here’s what I did to make Word Up Dog mobile ready…

I have a Nexus One Android phone, which unlike the iPhone can run Flash in its browser. So as a first test I pointed it at the totally unoptimized game swf. I was pleased to see the game load quickly and error-free, and the graphics looked good on the bright little screen. The SimpleButtons were easy to hit and the mouse over state even showed briefly. Movement using both the trackball (which fires up/right/down/left KeyboardEvents) and touch worked correctly. But the framerate was crappy, and touching even a blank area on the screen brought the game to a crawl.

First, I looked at how I was rendering the map, a 800×550 sprite containing ~150 vector shape tiles. The tiles had cacheAsBitmap=true which had a noticeable effect on my pc, but it was hard to tell if it was doing anything on Android. Instead I manually drew each of the tiles to a Bitmap, which improved the framerate significantly. Drawing all the tiles onto one huge 800×550 bitmap was even better, but the way my tiles overlap made updating (by blitting) difficult.

I improved the movement speed by jumping the screen from square to square instead of smoothly scrolling it. I downgraded the target fps from 30 to 24, and simplified the gui animations so that instead of fading in, notice text pops into existance. I replaced contrast, emboss and drop shadow filters with graphical approximations. I cached the dog’s shape tween animations as Bitmaps using TouchMyPixel’s AnimationCache. Each of these things had a small but helpful effect on the framerate.

Now to tackle the touch issue. Holding down on any part of the screen lowered the framerate by 10fps, even after stripping out all MouseEvents. I couldn’t recreate it on pc (even via air at 250fps) or see evidence of it in a profiler. My guess is that Flash just isn’t very efficient at dealing with touch screens. What finally improved things was setting mouseEnabled=false and/or mouseChildren=false to everything in the game that isn’t meant to be clicked. This seems to be especially important for TextFields.

Finally, memory. The free FlashPreloadProfiler told me I was using 50mb, and showed the number of instances of each class and time in functions. Adobe’s Flash Builder Pro profiler gave me additional info including function stacks and the momeory used by each class.

I got my memory down to 20mb by instantiating some map-related things when they came into view rather than at game start. I verified that I didn’t have any memory leaks such as objects or handlers left around after exiting to menu and starting a new game.

To recap my optimizations:

• Draw shapes to Bitmaps instead of relying on cacheAsBitmap
• Simplify gui animations
• Cache character animations as Bitmaps
• Remove filters
• Set mouseEnabled=false and/or mouseChildren=false on non-clickables
• Other best practices I follow include cutting down on EnterFrame events, avoiding masks, and using strongly-typed variables.

I can now run Word Up Dog on my phone through Chrome at 20-24 fps! Not perfect and it will be slower on older phones, but I’m calling it a success. In my next post I’ll talk about packaging the game up using Air so I can sell it in the Android and iPhone app stores.