preparing data for performance-critical apps in flash (and html)

@vancura

Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010

Preparing Data for Performance-CriticalApps in Flash (and HTML)Václav VančuraSeptember 2009


● Illustrator who started to code

● Currently GUI designer and coder

● Developing Facebook games in Falanxia

● Tweaking Unity games by night

● @vancura, vaclav.vancura.org

Václav Vančura / FALANXIA


➊ Data basics ➋ Advanced data production

➌ Why to bother to optimize?

➍ Optimization basics

➎ Testing & profiling

➏ Advanced optimization

➐ Falanxia loves Github

Data basics


Static images

Data basics


Benefits OF STATIC IMAGES

Data basics

● Easy to create and maintain

● A lot of apps

● A lot of formatsBut Flash Player internally knows just a few

● Established and proven algorithmsExcept recent Internet Explorer PNG exploit


Disadvantages OF STATIC IMAGES

Data basics

● PNGLossless but large

● JPEGNo transparency but small (and lossy)JPEG transparency is our new project

● Embedding in AS3[Embed(source="/path/to/asset.png", compression="true", quality="90")]


Marginal or outdatedfile formatsOF STATIC IMAGES

Data basics

● MNGBasically an animated PNG

● JPEG2000Better (fractal) compression

● GIF, BMP, PCX


Sprites & MovieClipsIN FLASH

Data basics


Benefits OF SPRITES & MOVIECLIPS

Data basics

● Easy to create

● Rendering speed

● Transparency & dynamic blending modesMultiply, Screen, Overlay, …

● Dynamic effectsFilters like drop shadow, glow, blur, bevel, …

● VectorBetter scaling


Disadvantages OF SPRITES & MOVIECLIPS

Data basics

● Problematic compilationNeeds Flash IDE (or Illustrator, kind of)

● Difficult to maintainHard to change structure once it’s done

● Compiler strips out AS3 code

● VectorProblems with bitmaps, antialiasingPixel perfection is painful


Sound and MusicIN HTML5 & FLASH

Data basics


Features OF SOUND IN FLASH

Data basics

● Painless implementation

● Selective compression

● Dynamic soundAS3/FP10

● Only 32 sound channels at once

● Compilation problemsWindows (!) Flash IDE is actually a must.Haxe is a solution, but is painful to set up. http://haxe.org

http://j.mp/vancura-as3-libs-docs



Music

Data basics

● Still only MP3OGG Vorbis in Flash (and HTML) is a lot of work(mainly because of Alchemy)

● Multitracks & sequencersProcedural realtime mixing

● TrackersMOD, S3M, XM, IT etc.Unity 3 now has tracker support


CFXR

● Awesome toolwhen you needretro sounds

● Sonoport

http://thirdcog.eu/apps/cfxr

http://www.sonoport.com






VideoIN HTML5 & FLASH

Data basics


Video in HTML5

Data basics

● SpeedUsing GPU

● Cross-platformDesktop, mobile OS

● But too many formatsWebM, MP4/H.264, OGG TheoraFlash fallback

● Very difficult to encode

● No streaming so far


Video in Flash

Data basics

● FormatsFLV (Sorenson Spark / FLP 6+, ON2 VP6 / FLP 8+), F4V (H.264 / FLP9+)

● Painless implementation in Flash

● Streaming with Flash Media ServerStreaming from cameraAnd alternatives: Wowza Media Server, Red5

● DRM

● Transparency via VP6

● Encoding via FFmpeg and Adobe Media Encoder

● But CPU hogFlash Player 10.1 brings some optimizations (~30 %)


FontsIN HTML5 & FLASH

Data basics


Fonts in HTML5

Data basics

● Google Font API

● TypeKit

● sIFR

● Cufón

The only solution if you need accented glyphs

http://code.google.com/intl/cs/apis/webfonts

http://typekit.com

http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement

http://cufon.shoqolate.com










Fonts in Flash

Data basics

● Antialiasing tweakingLovely feature for pixel perverts like me

● Optimization of fontsUTF8 subset and simple fonts

● Problems with accented characters and localeIt’s hard and expensive to find the right font


➊ Data basics

➋ Advanced data production ➌ Why to bother to optimize?


➎ Testing & Profiling



Advanced data production


Scale9

● Elemental slicing method

● Adobe Flash: vector scale9 only

● ScaleBitmap


http://www.bytearray.org/?p=1206




Atlas



Examples OF ATLAS



Benefits OF ATLAS

● SpeedWhen rendering to one and only BitmapData

● Easy to createEasy to split and combine when using scripts

● CrossplatformHTML/CSSCocos2D, SparrowPro games: PlayStation, XBOX



Disadvantages OF ATLAS

● SpeedWhen using multiple BitmapDatas

● Somewhat difficult to maintain without scripting

● No layersRedundant compression of all pixels in each frame

● Update from one placeUse only single Event.ENTER_FRAME



GUI



Benefits OF FLEX WIDGETS

● Flash BuilderAs WYSIWYG editor

● A lot of coders



Disadvantages OF FLEX WIDGETS

● Data hogButton + edit box + dropdown = 50 kB

● Speed hogSlow rendering and no caching

● Not pixel perfectVectors everywherePixel hinting glitches when animating

● Difficult and slow animation

● Painful skinning

● Impossible 3D



3rd party widgets

● Liquid ComponentsDifficult skinning, data hog

● Yahoo Astra ComponentsData hog

● Bit ComponentsLicense issues

● Minimal ComponentsNo skinning (currently a few skins available)


http://j.mp/liquid-components

http://j.mp/yahoo-astra-components

http://j.mp/bit-components

http://j.mp/minimal-components










Falanxia widgets FEATURES

● Easy skinningSkinning without Flash, fully open source workflow

● Pixel perfect animationInspired by CoreAnimation technology

● Optimized for size~30 kB

● Optimized for speed

● Data loading via providersSWF, FAR, Librarium



Examples OF BARS



Examples OF BUTTONS



Examples OF GLYPHS



➊ Data basics

➋ Advanced data production

➌ Why to bother to optimize? ➍ Optimization basics




Why to bother to optimize?


Why to bother TO OPTIMIZE?

● Impatient userUser hates waiting – and usually has a crappy computer

● CPUCPU hates being hot

● MemoryMemory hates being full

● Server and bandwidthMaking a world better place

● Progressive loadingIt’s always better when the user is able to do something during loading

Why to bother to optimize?


➊ Data basics


➌ Why bother with optimizations?

➍ Optimization basics ➎ Testing & Profiling



Optimization basics


Runtime RECYCLATION

● GUI prefabs

● Textures

● Game elements

● Avatars

● Skins

● Subcomponents

Optimization basics


Filesystem OPTIMIZATIONS

● Less server requests

● Better compression

● Better data maintenance

● But recompression on a change neededPossible to handle server-side

● ZIP, FAR (Flash Archive), Librarium

Optimization basics


➊ Data basics




➎ Testing & Profiling ➏ Advanced optimization


Testing & Profiling


Testing & Profiling

● A slower computerEven better with OSX

● Debug vs. Release Flash Player

● Flash profilingFlash Builder, FDT Enterprise, FlashPreloadProfiler

● mm.cfg

Testing & Profiling

http://jpauclair.net/flashpreloadprofiler

http://jpauclair.net/2010/02/10/mmcfg-treasure






Charles Proxy

Testing & Profiling

http://vaclav.vancura.org/aplikace-1-charles




➊ Data basics





➏ Advanced optimization ➐ Falanxia loves Github

Advanced optimization


Image Optimization● It’s better to have fewer colors

● PosterizationClient or server-side

● Procedural effects in FlashNoise, gradients, …

● Runtime layer simulationPossible combination of JPEG and PNGBut don’t hold your breath:Flash has a layer count limit

● Photoshop problemsBeware the color profiles and dithering



Masking JPEGs

● Masking JPEG + vector in Flash

● Flash IDE needed

● Banners!



ImageOptim

● PNG, GIF & JPEG optimizationLook at the screenshot



ImageMagick

● Join images vertically, bottom aligned

● Join images into an atlas

● Split atlas into a list of files


convert -background transparent -gravity south NWimg.png NEimg2.png SEimg3.png SWimg3.png +append output.png

convert -background transparent -gravity south $(ls -1 *.png) +append output.png

convert -crop 22x34 +repage -background transparent altas_image.png frame_%02d.png


Splitting Files

● Browsers have a cache limit per fileIt’s safe to consider 1 MB as a hard limitHowever Chrome is able to cache larger files



➊ Data basics







Falanxia loves Github


Github Projects

● Moderatrix

● Emitor

● Utilitaris

Falanxia loves Github

http://github.com/falanxia/moderatrix

http://github.com/falanxia/emitor

http://github.com/falanxia/utilitaris







@vancura


Thanks.Questions?

Play Bzoonk Bar at

❧

Icons: Flurry System by the Iconfactory (http://iconfactory.com/freeware/preview/flrs)

[email protected] @vancura

http://apps.facebook.com/bzoonkbar



preparing data for performance-critical apps in flash (and html)

Technology

vancura webexpo

performancecritical

flash streaming

flash antialiasing

painful data basics

static images data basics

accented glyphs data

right font data basics