Follow me on twitter @wovencharlie to be notified when Comb Over Charlie is available for download.
Coming soon to an iPad, iPhone, Android Tablet, Android Phone, Blackberry Playbook, and Google Chrome Store near you.
Over the past few weeks I’ve had the privilege to work with the AIR 2.6 pre-release; I have to say I was completely shocked. The first time I used the AIR to iOS compiler that shipped with CS5, the frame-rates were poor enough that I disregarded it and never planned on using it again. About two months ago I decided to give it another go. I was shocked to say the least.
My application went from about 10 to 15 fps to a solid 40 fps. While I started off with the goal to create something with AIR for the sake of calling it an AIR app, I was able to forget about the technology and just focus on the game. Now, I spend more time creating new characters, backgrounds, and other game features instead of working around limitations.
The result is a smooth 40 fps game “Comb Over Charlie”:
Here are a few things I learned while creating Comb Over Charlie:
- Object Pool – Object Pool – Object Pool!
- Use JPGs where you can instead of PNGs
- Use CacheAsBitmap wherever possible
- At least for iOS – set stage.stageQuality to StageQuality.LOW during heavy animations
- With games similar these, make sure you enable GPU mode for iOS
- Limit the number of cacheAsBitmapMatrix objects
- Object Pool some more
- Create images as small as possible and scale them up x 2. So instead of a 1200 x 600 image have use 600 x 300 image
- Don’t have too many very large transparent layers overlapping
- If you have vectors and can convert them to bitmaps, do it!
- Profile your app to to catch memory leaks early
- Did I mention Object Pooling?
There are a few reasons why object pooling is so important:
1) Object pooling allows you to keep the amount of objects created to a minimum.
2) When objects are created and destroyed this tends to cause bumps or hiccups in the visuals (very bad for a smooth side scrolling game) – with object pooling you’re not creating something new on the fly, you’re only re-using what you’ve already created.
3) The less objects you have, the less memory you use. Re-use of objects contributes to less memory consumed, better battery life, and better performance.
Whenever I run into performance issues, it’s usually because I am forgetting to destroy something properly. So, consistently profile your application to spot memory leaks as early as possible.
Check back in the coming weeks to see more in depth tutorials on how Comb Over Charlie was made.
For now check out these great sites for more info and resources:
Elad Elrom’s optimization classes – great BitmapCaching class!:
https://github.com/EladElrom/Flash-Optimizing-Tools
Awesome site with object pooling tutorials and classes:
http://lab.polygonal.de/2008/06/18/using-object-pools/
FriendsOfEd Flash Games : Great game book with loads of techniques / code:
http://friendsofed.com/book.html?isbn=1430226145
Jesse Freeman on Advanced Blitting:
http://www.developria.com/2010/08/advanced-blitting-bitmap-scrol.html
Come and learn more about AIR 2.6 iOS development at FATC June 9 – 12th – Flash And The City
Special thanks to Christian Croft for helping code the Score / Leader / Achievements board. – http://www.ecosquid.com
Pingback: AIR 2.6, iPads, iPhones, Android devices all play together nicely. | Papervision 3D Tutorials
Any tips on how to install 2.6 for use with Flash CS5?
WOW! Can’t wait to play the game on my iPhone and iPad! Looks like some great performance.
Congrats! Your game looks great. I’ve been looking around for a specific example of how to compile via adt for iOS. Could you help us out?
Pingback: AIR for iOS? - Flashforum
Pingback: FlashApplications » Air”mania” 2.6 and iOS by “Flash 3D Tutorials”
dang! Nice performance on the iOS devices (as well as the Androids of course). nice work!
Did you develop using Flash IDE, Flex, or something else? Curious to know how you compiled to iOS if you weren’t using Flash IDE. Would be nice to see a decent Flex to iOS workflow. Thanks.
I created it with FlashBuilder 4.5 as an Actionscript Mobile project. I only used Flash CS5 to make a swc of assets. I’ll have a tutorial out shortly out lining start to finish the process of getting up and running.
Charlie
wow, will definitely look forward to that..
Pingback: Comb Over Charlie vs the Web-Beacon’d Pundits of Doom « jd/adobe
hey charlie,
cant wait to see how it is done.
nice job.
Interesting that you say to use jpg instead of png. From what I understand, Apple recommends using png at all times. Is that something to do with the iOS conversion?
I noticed a decent performance gain when going from PNGs to JPGs. It could be the way memory is handled. One thing I did not try was PNG-8 vs PNG-24. I’ll have to test that out and see if the results are better, same, or worse.
Great demo, thanks. i look forward to reading your tutorials!
I’m not so sure JPGs are a good idea over PNGs. On iOS the hardware accelerates PNGs therefore it makes much more sense to use them. For Android, however, JPG might be better, though I don’t think you’ll see a major lose with PNG (and PNG look much better).
All of my art is PNGs in Bear Bounce.
I’ve found that if you have to choose between a 400k PNG and a 70k JPG the 70k JPG performs better. I’ll retest and try to publish some results.
Thank you so much for your tips! Keep them coming and I’m very excited for the tutorials. I’m making a game for ios right now for my class at NYU and every and all info is seriously appreciated.
Pingback: Erstellung von iPhone-Apps mit Flash CS5, FDT und dem neuen Adobe AIR 2.6 - Flashforum
I modified the bitmap test of GUIMark2 (http://www.craftymind.com/factory/guimark2/FlashGamingTest.html) and package it to iOS to test the frame rate.
However, I find that on iPad, the highest frame rate is roughly 18 and on iPhone4 is 22, even the test program is significantly simplified. I tried ENTER_FRAME or timer, or set SWF frame rates and got the same result.
Is there any frame rate limit on iOS?
Thanks very much.
Hey have you tried to turn on GPU rendering?
http://blogs.adobe.com/cantrell/archives/2010/10/gpu-rendering-in-adobe-air-for-android.html
Charlie
Yes I turned on the GPU mode. Today I make the stage nearly empty except a textField to display the frame rate. It reported 40 on iPad. So I’m very curious to know how you can achieve 40 fps in a full functional game.
Thanks.
Pingback: AIR 2.6 で iOS アプリ開発 – 参考サイトメモ | イナヅマtvログ
Pingback: “Better a witty fool than a foolish wit” « jd/adobe
Pingback: The White Wood | 2011… Year to be a Flash Dev with some emerging technology… Thank you Apple
Pingback: What is Larry Thinking? #39 => How I Got Here and the Future – Larry Ullman
Nice work, and I am pleased that you are sharing your experience, this is something that we all need to do in the community if AIR is to be successful on mobile. The last thing we want is a bunch of sluggish apps flooding the market, well done.
Pingback: 4 Power Tips to Increase Adobe AIR Mobile Performance | Flashstreamworks