SOCIAL SPEED Improving Flash Performance Amitt Mahajan Zynga

  • Slides: 35
Download presentation
® SOCIAL SPEED Improving Flash Performance Amitt Mahajan, Zynga

® SOCIAL SPEED Improving Flash Performance Amitt Mahajan, Zynga

® My Background • Worked on Gears of War & Unreal Engine 3 at

® My Background • Worked on Gears of War & Unreal Engine 3 at Epic • Co-founder / CTO, My. Mini. Life • • Director of Engineering, Zynga • • • Flash Virtual World, Acquired by Zynga in 2009 Co-creator & Lead Developer, Farm. Ville/Treasure Isle Built the first prototype of City. Ville Created ZEngine and Example. Ville, Zynga’s common game engine and game framework ®

® High-Level Takeaways Load time impacts new installs Runtime performance impacts retention Gather real

® High-Level Takeaways Load time impacts new installs Runtime performance impacts retention Gather real data to know where to spend your time Try to optimize as low-level as possible and build checks into your build process Performance deteriorates over-time and needs to be continually re-examined ®

® Loading • Extended load-time causes people to navigate away from your game •

® Loading • Extended load-time causes people to navigate away from your game • We define load-time as the period the player has to wait for the app to become interactive ®

® Common Reasons for Loading Delays • Downloading your game SWF • Waiting for

® Common Reasons for Loading Delays • Downloading your game SWF • Waiting for Facebook API to respond • Round-trip for player data from game servers • Asset size and number of assets • Computation (depth-sorting, parsing XML, etc. ) ®

® Measuring Load-Times • Fire. Bug can be used for asset load measurement •

® Measuring Load-Times • Fire. Bug can be used for asset load measurement • The Flash Builder profiler can give insight into where loadtime computation is occurring • Link-exports can determine why your SWF is a certain size ®

® Using Link-Export • Flash’s compiler provides a link-export option to export size breakdown

® Using Link-Export • Flash’s compiler provides a link-export option to export size breakdown of a SWF mxmlc -link-report=C: Your. Link. Report. xml Your. App. as ®

® Using Link-Export • We use a tool* to visualize the link-report and identify

® Using Link-Export • We use a tool* to visualize the link-report and identify assets to remove from the SWF * http: //www. kahunaburger. com/2008/03/08/air-link-report-visualizer/ ®

® Reducing Waits on Social Networks • Social network data retrievals significantly impact load-times

® Reducing Waits on Social Networks • Social network data retrievals significantly impact load-times • Ideally, don’t require social network data at all to load the game • A compromise is to pre-fetch social network data server-side and then embed it into Javascript ®

® Normal Facebook Data Flow GAME SERVER (PHP) CLIENT (FLASH) FACEBOOK Your Canvas Callback

® Normal Facebook Data Flow GAME SERVER (PHP) CLIENT (FLASH) FACEBOOK Your Canvas Callback apps. facebook. com/yourapp Initial Page Load users. get. Logged. In. User() Render Flash HTML friends. get() ®

® Optimized Facebook Data Flow GAME SERVER (PHP) CLIENT (FLASH) FACEBOOK Your Canvas Callback

® Optimized Facebook Data Flow GAME SERVER (PHP) CLIENT (FLASH) FACEBOOK Your Canvas Callback apps. facebook. com/yourapp Initial Page Load Fetch all Facebook Data users. get. Logged. In. User() friends. get() Render Flash HTML & Data JSON Retrieve User/Friend Data From JS JSON object ®

® Optimizing Initial Asset Load • Set the bar high for what needs to

® Optimizing Initial Asset Load • Set the bar high for what needs to be loaded at all • Both asset size and number of assets matter • Version assets and use correct HTTP headers to ensure that assets will be cached by the browser Expires: Fri, 24 Feb 2012 03: 06: 45 GMT Cache-Control: max-age=2592000 ®

® Optimizing Asset Size • Use low-res assets first and stream in high-res assets

® Optimizing Asset Size • Use low-res assets first and stream in high-res assets later • Pack PNG assets into SWF files for additional compression PNG: 20 kb SWF (50%): 4. 2 kb SWF (30%): 2. 5 kb ®

® Asset Bundling • Bundle similar assets together in a SWF to avoid a

® Asset Bundling • Bundle similar assets together in a SWF to avoid a DNS look-up and HTTP connection round-trip for each asset road. swf road 1. png road 3. png road 2. png road 4. png Add assets to a SWF library and compile road 1 road 2 road 3 road 4 ®

® Multiple Asset Domains • HTTP spec has a request limit per domain, can

® Multiple Asset Domains • HTTP spec has a request limit per domain, can get around this by having DNS aliases Loading. Manager. load() Load pig. png Flash Client assets 0. farmville. com/pig. png assets 1. farmville. com/pig. png ++load. Count%4 assets 2. farmville. com/pig. png assets 3. farmville. com/pig. png ®

® Pre-Computing Static Game Data • XML & JSON can be expensive to parse

® Pre-Computing Static Game Data • XML & JSON can be expensive to parse and download • Can pre-compile this data into Flash SWF files for download and processing savings Raw Static Data (XML, JSON, Text, etc. ) Generate AS 3 Code Auto-generated. as file that embeds data in a Dictionary MXMLC Compressed. SWF file Download & Load Class Loaded Data ®

® Runtime Performance • Runtime performance is defined by perceived responsiveness of the application

® Runtime Performance • Runtime performance is defined by perceived responsiveness of the application • Sluggish performance hampers users enjoyment of the game • Runtime performance issues also reduce interactivity ®

® How Performance Affects Virality # Of Social Actions 0 -4 5 -8 9

® How Performance Affects Virality # Of Social Actions 0 -4 5 -8 9 -12 13 -16 17 -20 21 -24 25+ FPS ®

® Common Causes of Slow Performance • Poorly authored assets • • Unoptimized game

® Common Causes of Slow Performance • Poorly authored assets • • Unoptimized game loops • • Vector instead of Bitmap, Excessive Animation Iterating over all game objects, excessive object allocation/deallocation Flash VM CPU hogging • Expensive graphics filters, continually updating display list ®

® Measuring Runtime Performance • FPS is a good starting metric to make visible

® Measuring Runtime Performance • FPS is a good starting metric to make visible on dev builds • The Flash Builder profiler is solid and the normal profile/fix issues cycle works great for AS 3 • It is harder to see where draw-time is going, redraw regions help ®

® Redraw Regions • Redraw regions show you where your render time is going

® Redraw Regions • Redraw regions show you where your render time is going and can help identify problems ®

® Authoring Assets • Vector assets render slower than bitmaps • Bitmap assets have

® Authoring Assets • Vector assets render slower than bitmaps • Bitmap assets have larger file sizes than vector • A hybrid-approach can give the best of both worlds ®

® Farmville Pig • This asset killed our frame-rate due to unnecessary vectors *Vector

® Farmville Pig • This asset killed our frame-rate due to unnecessary vectors *Vector images courtesy of Justin Church (byxb. com) ®

® Vector / Bitmap Hybrid • All assets are downloaded by the Flash client

® Vector / Bitmap Hybrid • All assets are downloaded by the Flash client as vector • At load-time, generate rasterized bitmap sprite sheets at the lowest possible resolution that avoids scaling • If necessary, re-generate bitmaps at higher resolutions ®

® Bitmap Sprite Sheets • • Alternative to vector-based animation Uses fast pixel-based operations

® Bitmap Sprite Sheets • • Alternative to vector-based animation Uses fast pixel-based operations City. Ville_Construction. Worker. png ®

® No-Draw Sprite Sheets • First, we pre-split the Bitmap Original Bitmap. Data. copy.

® No-Draw Sprite Sheets • First, we pre-split the Bitmap Original Bitmap. Data. copy. Pixels() One Bitmap Data Object per Frame ®

® No-Draw Sprite Sheets Shared Bitmap. Data Objects Instance of an Animated Object Bitmap

® No-Draw Sprite Sheets Shared Bitmap. Data Objects Instance of an Animated Object Bitmap Object . bitmap. Data ®

® Flash CPU Usage • Flash can consumes CPU and slow down browser performance

® Flash CPU Usage • Flash can consumes CPU and slow down browser performance • High CPU usage causes slow responses from social networks ®

® Optimizing the Game Loop • Have a single ENTER_FRAME event that drives game

® Optimizing the Game Loop • Have a single ENTER_FRAME event that drives game updates • Split the updating of objects across frames • Controlling the game loop also lets you control simulation speeds by adjusting time delta ®

® Game Loop Flow ENTER_FRAME callback Game. update. World() Choose bucket in round-robin fashion

® Game Loop Flow ENTER_FRAME callback Game. update. World() Choose bucket in round-robin fashion Bucket 0 Bucket 1 Bucket 2 Bucket 3 Objects[0] Objects[4] Objects[8] Objects[1] Objects[4] Objects[9] Objects[2] Objects[6] Objects[10] Objects[3] Objects[7] Objects[11] Call. update(time. Delta) on each object in bucket ®

® Screen Freezing • Swap Flash with Static Bitmap to reduce CPU Freeze background

® Screen Freezing • Swap Flash with Static Bitmap to reduce CPU Freeze background processing & replace with Bitmap FB. ui() Un-freeze background processing & show Flash again ®

® Optimization Best Practices • Optimization for social games is on-going, even post-launch •

® Optimization Best Practices • Optimization for social games is on-going, even post-launch • Build-in detection of bad assets and code into your build process • Have your client report back performance metrics, and actually use the data to fix issues • Continually monitor your load-time and initial download size; They tend to increase over time ®

® | Thank you! Questions? Email: amahajan@zynga. com Twitter: @amittm Blog: www. amitt. com

® | Thank you! Questions? Email: amahajan@zynga. com Twitter: @amittm Blog: www. amitt. com