adobe air - mobile performance – tips & tricks

© 2011 Adobe Systems Incorporated.

Mobile Performance – Tips & Tricks Mihai Corlan | Developer Evangelist | h!p://corlan.org


Agenda

  Focus on AIR development for Android and iOS

  Understanding Mobile Landscape

  CPU vs GPU mode

  Flex “Hero” considerations


Multiscreen Landscape

  Adobe AIR Runtimes for:

  Desktop

  Mobile & Tablet

  Digital Home (TV, Set-top boxes)

  Hardware:

  CPU from 500MHz to 2GHz dual core; ARM to x86

  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”

User Expectations:

•  Responsive Apps

•  Beautiful Apps


Mobile CPU/GPU Differences

m t/s – millions of triangles per second h!p://alienbabeltech.com/main/?p19309


General Performance Tricks


Where you can optimize?

See Ted Patrick / Sean Christman posts on Elastic Racetrack

Heavy Code Rendering


DisplayList – Choosing the Right DisplayObject Type

236 Bytes

414 Bytes

440 Bytes

Shape/Bitmap

Sprite

MovieClip

DisplayList

MEM

ORY

Less

More


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)


Mobile Render Mode


AIR Pro#les


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>


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:

* iOS will have GPU Rasterizing support in the future

Render Mode

GPU Type Rasterizing Composing AIR Version

Mobile Platforms

CPU - CPU CPU All All

GPU GPU Blend* CPU GPU 2.0 iOS

GPU Vector GPU GPU 2.5 Android


GPU Blend vs. GPU Vector

  GPU Blend:

  Rasterizing CPU

  Composing GPU

  GPU Vector:

  Rasterizing GPU

  Composing GPU

Pixels are copied from the System Memory to the GPU Memory (expensive operation)

Pixels don’t need to be copied


Understanding Caching: cacheAsBitmap & cacheAsBitmapMatrix


Rendering Cycles

DisplayList

Frame x:


Rendering Cycles

DisplayList

Frame x + 1: 2 objects moved

Transformation Matrix Changed (translation, rotation, scaling, skewing)


Rendering Cycles

DisplayList

Frame x + 1:

Flash Player calculates the dirty region which in turns will trigger a re-rasterizing of the affected display objects


Rendering Cycles

DisplayList

Frame x + 2:

In our case all 4 objects will be rasterized again and bli!ed on the screen


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

DisplayObject.cachAsBitmap = true;

Offscreen Buffer

Pitfall:

One Children is changed all 3 objects will be re-rasterized


Understanding cacheAsBitmap and cacheAsBitmapMatrix

Translate Scale Rotate visible=false Platforms

cacheAsBitmap Yes - - - FP + AIR

cacheAsBitmap + cacheAsBitmapMatrix Yes Yes Yes Yes AIR 2.0 Mobile

2.5D shapes Yes Yes Yes - AIR 2.0 Mobile

DisplayObject.cachAsBitmapMatrix = new Matrix(); (reuse the same Matrix instance across display objects)

•  2.5D properties deactivate cacheAsBitmap & cacheBitmapMatrix •  Manipulate the regular 2D properties if you don’t want to invalidate the cache


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)


Different devices – different performances for the same code

  Task: scaling 10 rotating vectors (some red rectangles)

h!p://renaun.com/blog/2010/10/gpu-rendermode-for-air-mobile-pro#le-and-caching-clari#cation/

Device CPU Mode GPU Mode

cABM No cABM cABM No cABM

Droid X 15fps 38fps 32fps 45fps

Nexus One 27fps 39fps 39fps 30fps

cABM means cacheAsBitmapMatrix


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


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


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


$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:

[email protected]

h!p://corlan.org


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 either 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/10

Adobe, 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 Adobe Systems 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 other countries. 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

adobe air - mobile performance – tips & tricks

Documents