Preparing Data for Performance-Critical Apps in Flash (and HTML)

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

Preparing Data for
Performance-Critical
Apps in Flash (and HTML)
Václav Vančura
September 2009

@vancura


Václav Vančura / FALANXIA
● Illustrator who started to code
● Currently GUI designer and coder
● Developing Facebook games in Falanxia
● Tweaking Unity games by night
● @vancura, vaclav.vancura.org


➊ 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

● Easy to create and maintain
● A lot of apps
● A lot of formats
But Flash Player internally knows just a few

● Established and proven algorithms
Except recent Internet Explorer PNG exploit

Data basics


Disadvantages OF STATIC IMAGES

● PNG
Lossless but large

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

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

Data basics


Marginal or outdated
file formats
OF STATIC IMAGES

● MNG
Basically an animated PNG

● JPEG2000
Better (fractal) compression

● GIF, BMP, PCX

Data basics


Sprites & MovieClips
IN FLASH

Data basics


Benefits OF SPRITES & MOVIECLIPS
● Easy to create
● Rendering speed
● Transparency & dynamic blending modes
Multiply, Screen, Overlay, …

● Dynamic effects
Filters like drop shadow, glow, blur, bevel, …

● Vector
Better scaling

Data basics


Disadvantages OF SPRITES & MOVIECLIPS
● Problematic compilation
Needs Flash IDE (or Illustrator, kind of)

● Difficult to maintain
Hard to change structure once it’s done

● Compiler strips out AS3 code
● Vector
Problems with bitmaps, antialiasing
Pixel perfection is painful

Data basics


Sound and Music
IN HTML5 & FLASH

Data basics


Features OF SOUND IN FLASH
● Painless implementation
● Selective compression
● Dynamic sound
AS3/FP10

● Only 32 sound channels at once
● Compilation problems
Windows (!) Flash IDE is actually a must.
Haxe is a solution, but is painful to set up. http://haxe.org

Data basics


Music

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

● Multitracks & sequencers
Procedural realtime mixing

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

Data basics


CFXR

● Awesome tool
when you need
retro sounds
http://thirdcog.eu/apps/cfxr

● Sonoport
http://www.sonoport.com


Video
IN HTML5 & FLASH

Data basics


Video in HTML5
● Speed
Using GPU

● Cross-platform
Desktop, mobile OS

● But too many formats
WebM, MP4/H.264, OGG Theora
Flash fallback

● Very difficult to encode
● No streaming so far

Data basics


Video in Flash
● Formats
FLV (Sorenson Spark / FLP 6+, ON2 VP6 / FLP 8+), F4V (H.264 / FLP9+)

● Painless implementation in Flash
● Streaming with Flash Media Server
Streaming from camera
And alternatives: Wowza Media Server, Red5

● DRM
● Transparency via VP6
● Encoding via FFmpeg and Adobe Media Encoder
● But CPU hog
Flash Player 10.1 brings some optimizations (~30 %)

Data basics


Fonts
IN HTML5 & FLASH

Data basics


Fonts in HTML5
● Google Font API
http://code.google.com/intl/cs/apis/webfonts

● TypeKit
http://typekit.com

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

● Cufón
http://cufon.shoqolate.com
The only solution if you need accented glyphs

Data basics


Fonts in Flash

● Antialiasing tweaking
Lovely feature for pixel perverts like me

● Optimization of fonts
UTF8 subset and simple fonts

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

Data basics


➊ Data basics




➎ 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

● Speed
When rendering to one and only BitmapData

● Easy to create
Easy to split and combine when using scripts

● Crossplatform
HTML/CSS
Cocos2D, Sparrow
Pro games: PlayStation, XBOX



Disadvantages OF ATLAS

● Speed
When using multiple BitmapDatas

● Somewhat difficult to maintain without scripting
● No layers
Redundant compression of all pixels in each frame

● Update from one place
Use only single Event.ENTER_FRAME



GUI



Benefits OF FLEX WIDGETS

● Flash Builder
As WYSIWYG editor

● A lot of coders



Disadvantages OF FLEX WIDGETS
● Data hog
Button + edit box + dropdown = 50 kB

● Speed hog
Slow rendering and no caching

● Not pixel perfect
Vectors everywhere
Pixel hinting glitches when animating

● Difficult and slow animation
● Painful skinning
● Impossible 3D


3rd party widgets
● Liquid Components http://j.mp/liquid-components
Difficult skinning, data hog

● Yahoo Astra Components http://j.mp/yahoo-astra-components

Data hog

● Bit Components http://j.mp/bit-components
License issues

● Minimal Components http://j.mp/minimal-components
No skinning (currently a few skins available)



Falanxia widgets FEATURES
● Easy skinning
Skinning without Flash, fully open source workflow

● Pixel perfect animation
Inspired by CoreAnimation technology

● Optimized for size
~30 kB

● Optimized for speed
● Data loading via providers
SWF, FAR, Librarium



Examples OF BARS



Examples OF BUTTONS



Examples OF GLYPHS



➊ Data basics






Why to bother to optimize?


Why to bother TO OPTIMIZE?
● Impatient user
User hates waiting – and usually has a crappy computer

● CPU
CPU hates being hot

● Memory
Memory hates being full

● Server and bandwidth
Making a world better place

● Progressive loading
It’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


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 needed
Possible to handle server-side

● ZIP, FAR (Flash Archive), Librarium

Optimization basics


➊ Data basics




Testing & Proﬁling


Testing & Profiling
● A slower computer
Even better with OSX

● Debug vs. Release Flash Player
● Flash profiling
Flash Builder, FDT Enterprise, FlashPreloadProfiler
http://jpauclair.net/ﬂashpreloadproﬁler

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



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



➊ Data basics



Advanced optimization


Image Optimization
● It’s better to have fewer colors
● Posterization
Client or server-side

● Procedural effects in Flash
Noise, gradients, …

● Runtime layer simulation
Possible combination of JPEG and PNG
But don’t hold your breath:
Flash has a layer count limit

● Photoshop problems
Beware the color profiles and dithering



Masking JPEGs

● Masking JPEG + vector in Flash
● Flash IDE needed
● Banners!



ImageOptim

● PNG, GIF & JPEG optimization
Look at the screenshot



ImageMagick
● Join images vertically, bottom aligned
convert -background transparent -gravity south NWimg.png NEimg2.png SEimg3.png
SWimg3.png +append output.png

● Join images into an atlas
convert -background transparent -gravity south $(ls -1 *.png) +append output.png

● Split atlas into a list of files
convert -crop 22x34 +repage -background transparent altas_image.png frame_%02d.png



Splitting Files

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



➊ Data basics


Falanxia loves Github


Github Projects

● Moderatrix
http://github.com/falanxia/moderatrix

● Emitor
http://github.com/falanxia/emitor

● Utilitaris
http://github.com/falanxia/utilitaris

Falanxia loves Github


Thanks.
Questions?
vaclav@vancura.org @vancura

Play Bzoonk Bar at http://apps.facebook.com/bzoonkbar

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

@vancura

Preparing Data for Performance-Critical Apps in Flash (and HTML)

Recommended

Recommended

More Related Content

Similar to Preparing Data for Performance-Critical Apps in Flash (and HTML)

Similar to Preparing Data for Performance-Critical Apps in Flash (and HTML) (20)

Recently uploaded

Recently uploaded (20)

Preparing Data for Performance-Critical Apps in Flash (and HTML)