well behaved mobile apps on air - performance related

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Developing Well-Behaved Mobile Applications using Adobe AIR

David Knight | Computer Scientist, Adobe

Renaun Erickson | Developer Evangelist, Adobe


Introductions

Multiscreen Landscape An Adobe Developer’s View

AIR Profiles

Where to Start? Dissecting SWF Applications AIR RenderMode DisplayObject Caching Identifying & Measuring Performance Common Bottleneck Areas

Lets See it in Action! Objects Need a Pool and Proper Timing Rendering: What is that on the Screen

Agenda


Introductions (1/2)

David KnightComputer Scientist (5 years at Adobe)

Background in mobile OS programming, especially Symbian OS

Worked on Flash Platform products including:

AIR for AndroidAIR for iPhone Flash 10.1 for AndroidFlash Lite


Renaun EricksonPlatform Evangelist / Software Engineer (3 years at Adobe)

Implemented local microphone support in FP 10.1 / AIR 2

Worked on Pacifica (which turned into mic feature and server sockets in AIR 2)

Flex/Flash developer for a long time (Since Flex 1.5)

Introductions (2/2)


Multiscreen Landscape


Adobe Runtimes on Form Factors Desktop Mobile Tablet Digital Home (TV, Set-top boxes) Consoles

Hardware Constraints CPU Varies (600Mhz to 1Ghz +) ARM (Android, iOS, etc..), x86 (Mac, Win, *nix) GPU Varies (OpenGL ES 1.1 to 2.0 +) Memory Varies (128MB to 512MB +) Screen Quality and Sizes

User Expects Great Experiences High Quality Assets Fast Input Responses

An Adobe Developer’s View


Physical Size / Pixels Per Inch

Screen Resolutions are Independent of Physical Screen Size


iPhone 3GS(down clocked from 833 Mhz)

Droid

iPad / iPhone 4GDroid 2 / Droid XN1 / Evo / DesireGalaxy S Line & Tab

Qualcomm QSD8672 - ARMv7T.I. OMAP 4440 - ARM Cortex-A9

Power MBX / Power SGX 530,535,540 / Adreno 200, 2203Depends on Memory Channel Speed and GPU Clock Speed

*m t/s = millions of triangles per secondhttp://alienbabeltech.com/main/?p=19309

CPU / GPU


Touch Screen Different types perform differently Max number of touch points vary

Memory RAM / ROM RAM Varies from 128MB to 768MB Default ROM small to 1GB+ Expanded by SD or internal storage Type of Memory affects GPU speeds

Other Hardware Considerations

Expect performance like PCs of 7 years ago!


AIR Profiles


AIR Profiles

* May be present

“desktop” Profile “mobileDevice” ProfileCapabilities

“tv” Profile

SQLiteFullscreen Mode

File SystemNetworking*

TLF RenderingCamera/

Microphone*

NativeWindowPDF, PrintingContext MenuNotification

AS2 VMDRM

WebKit

renderMode=GPU Accelerometer cacheAsBitmapMatrix Orientation SystemIdleMode Camera Roll

cacheBitmapMatrixDRM

AS2 VM

http://bit.ly/aOlHQ3


How Packager for iPhone (iOS) Works

Runtime is cross compiled down to ARM instructions and is part

of each application.

SWFAsset

s


Where to Start?


Sean Christman - http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/

Dissecting SWF Applications: Frames

Slow FPS Indicate Bottlenecks, Which Side?


236 bytes

440 bytes

414 bytes

Shape/Bitmap

Sprite

MovieClip

Dissecting SWF Applications: DisplayList

Start with DisplayList Structure and Object Size


Flash Player Garbage CollectionReference CountMark & Sweep

0 count

0 count

Circular References

General Memory Guidelines Use smallest DisplayObject for the job Look at BitmapData.copyPixels for large trees of repeating

objects Event Listeners

Weak References Explicitly Remove References

GPU Memory Caching Limits

Dissecting SWF Applications: Memory & GC


Publish setting in Flash

Edit application descriptor in Flash Builder

AIR RenderMode: Changing Render Modes


AIR RenderMode: CPU vs GPU Rendering

Definitions Rasterizing – rendering graphics elements into a pixel buffer Scene Composing – arranging pixel buffers

*Caching keeps Bitmap and Rastered Vectors in GPU, no CPU rasterization hit

Two Different GPU renderModes: Blend & Vector


AIR RenderMode: Rendering Diagram


AIR RenderMode: Rendering Diagram: Dirty Area


AIR RenderMode: Rendering Diagram: Cache on non-Cache

Object.cacheAsBitmap = true;


AIR RenderMode: Rendering Diagram: All Proper Caching




AIR RenderMode: Rendering Diagram - Pitfall


DisplayObject Caching: Comparing Schemes

General Guidelines: Use cacheAsBitmapMatrix for 2D in AIR mobileDevice

profile Identity matrix usually fine

Always use cacheAsBitmapMatrix in AIR mobile


Use in conjunction with cacheAsBitmap Does nothing on it’s own 2.5D properties deactivate it

Manipulate the regular 2D properties to change the displayed object

Manipulating the cacheAsBitmapMatrix transform Affects the transform applied to the cached surface Re-rasterizes the cached surface

DisplayObject Caching: cacheAsBitmapMatrix

Sprite.scale = 1

CABM Matrix

Scale=0.25Rotation=45o

Sprite.scale = 0.25


DisplayObject Caching: Recap

26

Pros Reduces render time for complex vector art by rasterizing it

to a bitmap Essential for GPU Blend to be effective

For both Bitmaps and Rasterized Vectors Can be a big win with CPU and GPU Vector

Caching not necessary for Bitmaps, really it is about vector art

Cons Increased memory usage Especially caching Bitmaps in CPU and GPU Vector

Remember – DisplayObject share a surface with children Avoid parents with graphics Can easily undo any potential performance gainsCaching != GPUCaching Essential for GPU Blend


In Application Indicators FPS counters - http://github.com/mrdoob/Hi-ReS-Stats

Beware of performance hit by having FPS counter always visible

Duration stats

Flash Builder Profiler Memory Consumption Method Performance

Iterate Over and Over In application indicators are a good quick and high level

test to see if different approaches/solutions to problems work

Profiling and Debugging provide details to bottlenecks once found

Identifying & Measuring Performance


Object Creation & Destroying Pool Objects Create objects in loading phase, not during rendering/logic

phases Use smallest sized objects for DisplayList, augment with

generic data objects for tons of properties Alternatively using one BitmapData object and use Blitting

Rendering Incorrect caching of Bitmaps – both CAB and CABM Filters/Blends – GPU Vector in current release

Heavy Logic Areas Break Tasks to O(n) Algorithms possible then make n small as

possible Pre calculate values in look up tables

Think Outside Box Uses Bitmaps, Use Lookup Tables, Simplified App Logic

Common Bottleneck Areas


Lets See it in Action!


Objects Need a Pool


Problems Issues Always allocating new objects Creating objects during having rendering causes slow down Memory is too high

Approaches to Problem Pooling/Recycling Preloading Pools / Trade off of memory vs performance Clean up references to objects

Solutions – Objects Need a Pool


Rendering: What is that on the Screen


Solutions - Rendering: What is that on the Screen

PewPew App

Bitmap case in CPU and GPU VECTOR Do not need to cache Beware of variability of GPU/CPU relative performance

Bitmap case in GPU BLEND Caching essential Only leaf sprites cached

Recall: Vector cases may benefit from caching in all rendering modes try it for your content.

well behaved mobile apps on air - performance related

Technology