Your SlideShare is downloading. ×
Adobe AIR - Mobile Performance – Tips & Tricks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adobe AIR - Mobile Performance – Tips & Tricks

10,767
views

Published on


0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,767
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
108
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile Performance – Tips & Tricks Mihai Corlan | Developer Evangelist | h p://corlan.org© 2011 Adobe Systems Incorporated.
  • 2. Agenda   Focus on AIR development for Android and iOS   Understanding Mobile Landscape   CPU vs GPU mode   Flex “Hero” considerations© 2011 Adobe Systems Incorporated.
  • 3. Multiscreen Landscape   Adobe AIR Runtimes for:   Desktop   Mobile & Tablet   Digital Home (TV, Set-top boxes)   Hardware: User Expectations:   CPU from 500MHz to 2GHz dual core; •  Responsive Apps ARM to x86 •  Beautiful Apps   GPU from OpenGL ES 1.1 to 2.0   RAM from 128MB to 1GB+   Screen Resolution & DPI 800 x 480 & 254 ppi / 3.7” 1024 x 600 & 170 ppi / 7”© 2011 Adobe Systems Incorporated.
  • 4. Mobile CPU/GPU Differences m t/s – millions of triangles per second h p://alienbabeltech.com/main/?p19309© 2011 Adobe Systems Incorporated.
  • 5. General Performance Tricks© 2011 Adobe Systems Incorporated.
  • 6. Where you can optimize? Heavy Code Rendering See Ted Patrick / Sean Christman posts on Elastic Racetrack© 2011 Adobe Systems Incorporated.
  • 7. DisplayList – Choosing the Right DisplayObject Type Less 236 Shape/Bitmap Bytes DisplayList MEMORY 414 Sprite Bytes 440 MovieClip Bytes More© 2011 Adobe Systems Incorporated.
  • 8. General Optimizations Tricks Apply to Mobile   Keep the DisplayList as simple as possible (BitmapData.copyPixels() and Mark & Sweep/Garbage Collection)   Avoid Memory Leaks (Remove Event Listeners / Weak References)   Avoid Memory Fragmentation (data models: using a large object instead of lots of small objects)   Pool of Objects (avoid object creation especially for UI)© 2011 Adobe Systems Incorporated.
  • 9. Mobile Render Mode© 2011 Adobe Systems Incorporated.
  • 10. AIR Pro les© 2011 Adobe Systems Incorporated.
  • 11. Mobile Render Mode   You can choose:   CPU Mode   GPU Mode   Auto Mode ( for now it defaults to CPU Mode)   In Flash Builder: <!– Application Descriptor File --> <initialWindow> <renderMode>gpu</renderMode> </initialWindow>© 2011 Adobe Systems Incorporated.
  • 12. Understanding GPU Mode ere are two different stages where the GPU can be used for rendering:   Rasterizing – rendering graphic elements into a pixel buffer   Scene Composing – arranging pixel buffers Today’s AIR Mobile GPU Modes: Render GPU Type Rasterizing Composing AIR Mobile Mode Version Platforms CPU - CPU CPU All All GPU Blend* CPU GPU 2.0 iOS GPU GPU Vector GPU GPU 2.5 Android * iOS will have GPU Rasterizing support in the future© 2011 Adobe Systems Incorporated.
  • 13. GPU Blend vs. GPU Vector   GPU Blend:   Rasterizing  CPU Pixels are copied from the System Memory   Composing  GPU to the GPU Memory (expensive operation)   GPU Vector:   Rasterizing  GPU Pixels don’t need to be copied   Composing  GPU© 2011 Adobe Systems Incorporated.
  • 14. Understanding Caching: cacheAsBitmap & cacheAsBitmapMatrix© 2011 Adobe Systems Incorporated.
  • 15. Rendering Cycles Frame x: DisplayList© 2011 Adobe Systems Incorporated.
  • 16. Rendering Cycles Frame x + 1: 2 objects moved DisplayList Transformation Matrix Changed (translation, rotation, scaling, skewing)© 2011 Adobe Systems Incorporated.
  • 17. Rendering Cycles Frame x + 1: Flash Player calculates the dirty region which in turns DisplayList will trigger a re-rasterizing of the affected display objects© 2011 Adobe Systems Incorporated.
  • 18. Rendering Cycles Frame x + 2: In our case all 4 objects will be rasterized again and bli ed on DisplayList the screen© 2011 Adobe Systems Incorporated.
  • 19. Understanding cacheAsBitmap   Rasterizing process can be expensive (even in GPU Vector mode)   Solution?  DisplayObject.cachAsBitmap = true;   Objects are rasterized in an offscreen buffer   e offscreen buffer is bli ed to the main screen buffer when translations are applied Pitfall: DisplayObject.cachAsBitmap = true; Offscreen Buffer One Children is changed  all 3 objects will be re-rasterized© 2011 Adobe Systems Incorporated.
  • 20. Understanding cacheAsBitmap and cacheAsBitmapMatrix DisplayObject.cachAsBitmapMatrix = new Matrix(); (reuse the same Matrix instance across display objects) Translate Scale Rotate visible=false Platforms cacheAsBitmap Yes - - - FP + AIR cacheAsBitmap + Yes Yes Yes Yes AIR 2.0 Mobile cacheAsBitmapMatrix 2.5D shapes Yes Yes Yes - AIR 2.0 Mobile •  2.5D properties deactivate cacheAsBitmap & cacheBitmapMatrix •  Manipulate the regular 2D properties if you don’t want to invalidate the cache© 2011 Adobe Systems Incorporated.
  • 21. Caching: Pros & Cons   Pros:   If content is expensive to be rasterized (eg. complex vector) caching can help   GPU Blend usually essential – usually you get be er performances   CPU & GPU Vector can be a big win   Cons:   Increased memory usage  especially caching bitmaps in CPU and GPU Vector   Depending on the GPU quality (remember devices don’t have the same GPU)© 2011 Adobe Systems Incorporated.
  • 22. Different devices – different performances for the same code   Task: scaling 10 rotating vectors (some red rectangles) CPU Mode GPU Mode Device cABM No cABM cABM No cABM Droid X 15fps 38fps 32fps 45fps Nexus One 27fps 39fps 39fps 30fps cABM means cacheAsBitmapMatrix h p://renaun.com/blog/2010/10/gpu-rendermode-for-air-mobile-pro le-and-caching-clari cation/© 2011 Adobe Systems Incorporated.
  • 23. Ge ing Good Performances   Try your application on the actual device!!!   FPS (frames per second) is an excellent indicator (24FPS is great)   h ps://github.com/mrdoob/Hi-ReS-Stats   Initialization/Rendering stats – log endTime - startTime for different parts of your app   Flash Builder Pro ler   Memory Consumption   Methods Performances   ink early at optimization (as opposed to desktop development)   Iterate a lot to catch issues early – easier to nd the issues when the application is not that big© 2011 Adobe Systems Incorporated.
  • 24. Possible Bo leneck Areas   Object Creation & Destroying:   Use Pool Objects   Try avoid using lots objects if reusing/copyPixels is possible   Rendering :   Incorrect bitmap caching (cacheAsBitmap & cacheAsBitmapMatrix)   Filters/Blends/Alpha can heart performance especially for GPU mode (at least for now) -> they are applied using CPU   Heavy ActionScript code execution:   Break longer tasks across multiple frames© 2011 Adobe Systems Incorporated.
  • 25. Flex “Hero” Considerations Note: ese apply to MAX Flex “Hero” preview release.   List scrolling not as smooth as the native ones   Big dataProviders shouldn’t slowdown the app   Creating skins for the mobile components using MXML Graphics hurts performance   Try using FXG or bitmaps instead of MXML Graphics   Using transparent lists can heart the performance   Se ing up renderMode=“gpu” seems to decrease performance© 2011 Adobe Systems Incorporated.
  • 26. ank You!   Renaun Erickson   h p://tv.adobe.com/watch/max-2010-develop/developing-wellbehaved-mobile- applications-for-adobe-air-/   h p://renaun.com/blog/   Christian Cantrell - h p://blogs.adobe.com/cantrell/   Ben Stucki’s MAX Session:   h p://2010.max.adobe.com/online/2010/MAX126_1288126140366VDFJ   Adobe Developer Center:   h p://www.adobe.com/devnet/ My Contact Info: mihai.corlan@adobe.com h p://corlan.org© 2011 Adobe Systems Incorporated.
  • 27. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 28. Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, the Adobe PDF logo, AIR, ColdFusion, ColdFusion Builder, Flash, Flash Builder, the Flash logo, Flex, LiveCycle, and Reader are eithe registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. © 2010 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 9102xxxx 3/10Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, ActionScript, AIR, Flash, Flash Builder, Flash Catalyst, the Flash logo, Flex, and LiveCycle are either registered trademarks or trademarks of AdobeSystems Incorporated in the United States and/or other countries. Microso and Windows are either registered trademarks or trademarks of Microso Corporation in the United States and/or othercountries. Java is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. All other trademarks are the property of their respective owners.Printed in the USA. 91023957 3/10© 2011 Adobe Systems Incorporated.

×