Upload
vaclav-vancura
View
110
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
@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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
● 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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
➊ Data basics ➋ Advanced data production
➌ Why to bother to optimize?
➍ Optimization basics
➎ Testing & profiling
➏ Advanced optimization
➐ Falanxia loves Github
Data basics
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Static images
Data basics
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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")]
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Marginal or outdatedfile formatsOF STATIC IMAGES
Data basics
● MNGBasically an animated PNG
● JPEG2000Better (fractal) compression
● GIF, BMP, PCX
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Sprites & MovieClipsIN FLASH
Data basics
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Sound and MusicIN HTML5 & FLASH
Data basics
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
CFXR
● Awesome toolwhen you needretro sounds
● Sonoport
http://thirdcog.eu/apps/cfxr
http://www.sonoport.com
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
VideoIN HTML5 & FLASH
Data basics
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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 %)
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
FontsIN HTML5 & FLASH
Data basics
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
➊ Data basics
➋ Advanced data production ➌ Why to bother to optimize?
➍ Optimization basics
➎ Testing & Profiling
➏ Advanced optimization
➐ Falanxia loves Github
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Scale9
● Elemental slicing method
● Adobe Flash: vector scale9 only
● ScaleBitmap
Advanced data production
http://www.bytearray.org/?p=1206
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Atlas
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Examples OF ATLAS
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Examples OF ATLAS
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
GUI
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Benefits OF FLEX WIDGETS
● Flash BuilderAs WYSIWYG editor
● A lot of coders
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
3rd party widgets
● Liquid ComponentsDifficult skinning, data hog
● Yahoo Astra ComponentsData hog
● Bit ComponentsLicense issues
● Minimal ComponentsNo skinning (currently a few skins available)
Advanced data production
http://j.mp/liquid-components
http://j.mp/yahoo-astra-components
http://j.mp/bit-components
http://j.mp/minimal-components
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Examples OF BARS
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Examples OF BUTTONS
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Examples OF GLYPHS
Advanced data production
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
➊ Data basics
➋ Advanced data production
➌ Why to bother to optimize? ➍ Optimization basics
➎ Testing & Profiling
➏ Advanced optimization
➐ Falanxia loves Github
Why to bother to optimize?
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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?
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
➊ Data basics
➋ Advanced data production
➌ Why bother with optimizations?
➍ Optimization basics ➎ Testing & Profiling
➏ Advanced optimization
➐ Falanxia loves Github
Optimization basics
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Runtime RECYCLATION
● GUI prefabs
● Textures
● Game elements
● Avatars
● Skins
● Subcomponents
Optimization basics
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
➊ Data basics
➋ Advanced data production
➌ Why bother with optimizations?
➍ Optimization basics
➎ Testing & Profiling ➏ Advanced optimization
➐ Falanxia loves Github
Testing & Profiling
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Charles Proxy
Testing & Profiling
http://vaclav.vancura.org/aplikace-1-charles
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Charles Proxy
Testing & Profiling
http://vaclav.vancura.org/aplikace-1-charles
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Charles Proxy
Testing & Profiling
http://vaclav.vancura.org/aplikace-1-charles
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Charles Proxy
Testing & Profiling
http://vaclav.vancura.org/aplikace-1-charles
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
➊ Data basics
➋ Advanced data production
➌ Why bother with optimizations?
➍ Optimization basics
➎ Testing & Profiling
➏ Advanced optimization ➐ Falanxia loves Github
Advanced optimization
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Advanced optimization
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Masking JPEGs
● Masking JPEG + vector in Flash
● Flash IDE needed
● Banners!
Advanced optimization
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
ImageOptim
● PNG, GIF & JPEG optimizationLook at the screenshot
Advanced optimization
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
ImageMagick
● Join images vertically, bottom aligned
● Join images into an atlas
● Split atlas into a list of files
Advanced optimization
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
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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
Advanced optimization
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
➊ Data basics
➋ Advanced data production
➌ Why bother with optimizations?
➍ Optimization basics
➎ Testing & Profiling
➏ Advanced optimization
➐ Falanxia loves Github
Falanxia loves Github
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
Github Projects
● Moderatrix
● Emitor
● Utilitaris
Falanxia loves Github
http://github.com/falanxia/moderatrix
http://github.com/falanxia/emitor
http://github.com/falanxia/utilitaris
@vancura
Preparing Data for Performance-Critical Apps in Flash (and HTML) @vancura — WebExpo 2010
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