The Art and Zen of Mobile
Game Creation with Flash
Scott Janousek
flashforward@scottjanousek.com

Presentation Resources
You can find everything here:
http://www.scottjanousek.com/flashforward
(will be available Post‐Conference …)

Me
GENERAL INFO
From Boston, Massachusetts, USA
–
Working with desktop Flash for six years
–
Developer , “Try” to be a Designer
–
Blogging about Flash (Mobile) for 4 years
–
MOBILE
Working with Flash Lite 1.1, 2.0, 2.1
–
Flash Lite 1.1/2.x Training Instructor
–
Coauthor: “Foundation Flash Applications for Mobile Devices”
–
Mobile Gaming Enthusiast
–
– ™

Flash Lite Design, Development, Training, Consulting

Mobile Games Portfolio
• Flash Lite 1.1, 2.x, (2.x games coming to 3.0)
• Distribution:
– Working directly with 3rd party mobile (game) companies
– Flash Lite Exchange, Moket MCN (“in talks with”),
Partnerships: Handango, ClickApps, other aggregators, etc.
• Products soon
– Don’t Wake the Dragon, MORE!
viliv p1 Sudoku game
iRiver Clix game
Symbian Series 60 Content

Mobile Games
“Worldwide revenue for mobile gaming subscriptions
could increase from $3 billion to $10.5 billion in
2009.”
– Juniper Research Ltd.

Mobile Game Markets
“Power” “Casual”
Power Gamers Fun, Addictive
– –
High Learning Curve No learning curve
– –
More Expensive Inexpensive
– –
Guilt in not finishing No guilt
– –
More time investment Less time investment
– –

(Mobile) Game Genres
• Arcade/Action • Multiplayer
– Snake, Bomber, Alien – Mario Kart, Texas Hold’em
Invasion … • 2‐D, 3‐D Racers
• Role playing games (RPG) – Tron, Mario Kart
– Final Fantasy, etc. • Card and board games
• Sports – Slots, Blackjack,
– EA SPORTS™ Madden 07 Monopoly
• Skill, Strategy, Logic • First Person Shooters
– Mine Sweeper, Sudoku – Quake, Doom …
Above: these just happen to be Flash Lite games that fit some of the genres …

Mobile Game
Design with Flash
“Casual Games make most use of the inherent
advantages of the mobile platform. People want to
fill ‘dead time’ with easy to use, but fun games.”
– Bruce Gibson, Research Director with Juniper
Research.

Mobile Game Challenges
• Smaller Screen User Input
•
Sizes Walled Gardens
•
• Color Depths Portability
•
• Limited Memory Learning
•
Platforms
• Limited Processor
• Fragmentation
• File Size
• … many more!
• Battery Life

“Holy Grail” = W.O.R.A.
• Write Once Run Anywhere
• Nice idea for mobile, but …
– Lots of devices, different capabilities, implementations, etc
• Fragmentation is “fact of life”
– Native, J2ME, etc
– Flash Lite is NOT immune, but much LESS affected
Handsets PDAs “Consumer Electronics”

Platform Decisions for Mobile Games

Flash Lite Players *
* From Boston? Say “Play‐ahs”

Flash Lite Game Life Cycle
DESIGN GAME
Idea/Concept
DEVELOP GAME
TEST GAME
Other platforms … Symbian Series 60
DISTRIBUTION
DEPLOY OTHER DEPLOY
Operators, Aggregators
PLATFORMS
& Content Providers
.sis packaging

Mobile Game
Development with Flash
“The Flash Lite Platform offers one of the best
environments for rapid mobile game development for
casual type content found today.”
‐ Me

Flash Lite 1.1 versus 2.x
FL 2.x ‐ Class Based FL 1.1 ‐ Timeline Driven
• Penetration = Higher
• Penetration = Lower
• “ActionScript 0.5”
• ActionScript 2.0
Code Reuse
–
Code Reuse
–
Modularity
–
Modularity
–
Maintainance
–
Maintenance
–
Extensibility
–
Extensibility
–
Less time to learn
–
Less time to learn
–
Smaller project content
–
Larger project content
–

Flash Lite 1.1 Syntax Refresher
• tellTarget()
– tellTarget( /player_mc/ ) { /:x =+ 1; }
– movie clips can act as libraries (“function clips”)
• eval()
– Simulate Pseudo Arrays using variables and eval
– x1 = “foobar”; i = 1; eval( “x” add i );
• Game State Frame Labels (menu, gameplay, etc)
• More ...
– My Flash Lite 1.1 “Reference Sheet” (PDF)

Flash Lite fscommand2 API
SetQuality
•
FullScreen
• UnEscape
•
StartVibrate
•
GetTimeHours
• GetPowerSource
•
StopVibrate
•
GetTimeMinutes
• GetBatteryLevel
•
GetVolumeLevel
•
GetTimeSeconds
• GetMaxBatteryLevel
• GetMaxVolumeLevel
•
GetTimeZoneOffset
•
SetSoftKeys GetSignalLevel
• •
GetTotalPlayerMemory
•
GetMaxSignalLevel
•
ResetSoftKeys
•
GetFreePlayerMemory
• GetNetworkConnectStatus
•
GetDateDay
•
GetLanguage
• GetNetworkRequestStatus
•
GetDateWeekDay
•
GetDeviceID
• GetNetworkStatus
•
GetDateMonth
•
GetPlatform GetNetworkName
• •
GetDateYear SetInputTextType
• •
GetDevice
•
Quit
•
GetLocaleShortDate
Launch •
•
ExtendBacklightDuration (FL 2.x)
•
Escape
• GetLocaleLongDate
•
setFocusRectColor (FL 2.x)
•
GetLocaleTime
•
fscommand2’s execute immediately and have return values
retVal = fscommand2( “FullScreen”, true ); //‐‐ fullscreen mode (if supported)

Device Keys/Text Input
• Target devices often vary
• Keys: 0,1,2,3,4,5,6,7,8, #, *
• Soft Keys
– Typically LEFT, RIGHT
– FL 2.x supports multiple softkeys
• Text Input
– FL 1.1 uses device for input
– FL 2.x built in text input (T9)
• 5 Way Direction Joystick
– UP, DOWN, LEFT, RIGHT, SELECT

Keys in Flash Lite 1.1
• Flash 4 style syntax
• “Key Catchers”
– button off Stage with ActionScript
on( keyPress “<UP>” ) { /player_mc/:y += 1; }
• Soft Keys
– Typically 2 or more
retVal = fscommand2( “setSoftKeys”, “left”, “right” );
on( keyPress “<PAGEUP>” ) { //‐‐do xyz }
EXAMPLE

Keys in Flash Lite 2.x
//‐‐ method #2 – Key Listener //‐‐ method #2 – keyDown event
move_obj:Object = new Object(); player_mc.onKeyDown = function()
{ switch (Key.getCode()) {
move_obj.onKeyDown = function()
case Key.UP :
{
this._y += 1;
switch (Key.getCode()) {
break;
case Key.UP :
}
player_mc._y += 1;
break; }
} }
} Key.addListener( player_mc );
Key.addListener( move_obj );
//‐‐ method #3 ‐ onEnterFrame and isDown()
move_mc.onEnterFrame = function() {
EXAMPLE
if (Key.isDown(Key.UP)) { player_mc._y += 1; }
}

ne Button Casual Games
• Focus
– user input, game play and graphics
• Should be very responsive
– Smooth Animations
– Immediate Actions Sample
• Game Challenge
– Better to have many stages/levels
– Timing + Rhythm + Reaction = GAME EXPERIENCE
• Key Lag
– Between device platforms
– Tweak timing calculations (if needed)

Collision Detection
FLASH LITE 1.1 FLASH LITE 2.x
Flash 4 syntax
• ActionScript 2.0
•
hitTest()
• hitTest() available
•
Primitive Math
• More complexity possible
•
Chapter 6 in our book
• … also in 6
•
EXAMPLE EXAMPLE

onEnterFrame()
• Can be your friend for Flash Lite 2.x games
– i.e. Character movement, etc.
enemy_mc.onEnterFrame = move;
player_mc.onEnterFrame = function() { //‐‐ do xyz }
• Performance
– Remember call is executed X times per FPS
– LIMIT multiple onEnterFrames()
• Use only for more robust target devices
• Flash Lite 1.1 = “frame looping”

Math and Physics
• Limited Device Capabilities
– Handsets vs. portable consoles
– Memory and Performance
EXAMPLE
• Avoid overtly complex game computations
• Flash Lite 1.1
– supports limited Flash 5 object
– Drawing API can be simulated (sort of)
• Flash Lite 2.x
– supports AS2 Math object
– Drawing API
– onEnterFrame()

File Size
• Typically no more than 500 KB for SWF
• Some carriers restrict file size (KB)
• Available Bandwidth
– GPRS 2/2.5G, 3G, others …
• OTA content delivery
– Sometimes user pays per kB download
• Decompression
– FL 2.x SWF decompresses incurring penalty
– Images, Sounds must decompress

Mobile Sound
Device Sounds Native Sounds
• Playback outside of Flash Lite • Playback within Flash Lite
• Smaller size • Larger Size
• Common formats: • Common formats:
– MIDI, MFi, SMAF, AMR, others – PCM, ADPCM, .WAV, .MP3
“Proxy Sounds”
•
FL 2.x device sound synch
•
Background MIDI Tracks
•
Lots of handsets support MIDI
•
SONIFY.ORG: SOUND RESOURCES
Articles by Hayden Porter

Mobile Game Text
Device Fonts Pixel Fonts
• Preinstalled device fonts • Hundreds available
• Results in smaller file size • Larger file size
• Position anywhere on x, y • Position on x, y integer values
doesn’t matter – i.e. x=0.0, y=0.0
• Not consistent look & feel • Consistent look & feel
• No anti‐aliasing • No anti‐aliasing
• Point Size Restrictions • Use various point sizes
Device fonts save space Use pixel fonts for look/feel
Use pixel fonts for look/feel
Device fonts save space
Use pixel fonts for look/feel
Device fonts save space

Mobile Game Graphics
“Versus”
Bitmap Vector
“Larger” file size “Smaller” file size
• •
Less CPU resources More CPU resources
• •
More memory Less memory
• •
Scaling/Rotating = Bad Scaling/Rotating = OK
• •
Vectors preserve look when scaled
Pixilation occurs on bitmap assets when scaled

Target Device Memory
• Memory Heaps:
• Static – nearly guaranteed
• Dynamic
• Typically 1000 KB … 0 kB and up to 6,000 KB
• Fluctuates depending on other apps, etc.
• FSCommand2 API
var total_num:Number = fscommand2( “GetTotalPlayerMemory” );
var free_num:Number = fscommand2( “GetFreePlayerMemory” );
• Problem with Content #1: “Out of Memory”
• Garbage Collection
• 60 seconds idle or significant rise in memory usage
• We need an API to avoid memory leaks!

Memory Profiling Tools
“OLD” SCHOOL “NEW” SCHOOL
TASK SPY Adobe Device Central
– Symbian Series Devices – Static/Dynamic Heap Info
– Download: – Memory usage graphing
www.pushl.com/taskspy – Heap Adjustments

Target Device Performance
• CPU
• Equivalent to “Pentium PC”
• Target FPS
• CPU “Timer Resolution”
• Nokia: 16 FPS, iRiver: 20 FPS
• Other Flash Lite devices
• 8 fps and up
• Speed‐o‐meters
• Test FPS capabilities
• K.I.S.S. Principle
Content = Keep It Simply Silly

Memory & Performance Tools
OLD NEW !
Adobe Device Central
TASK SPY
“Performance Calibration Tool”
– Symbian S60 Devices
Each device has “index”
– Download: –
Simulated CPU usage
–
www.pushl.com/taskspy
Performance reporting
–
Only visual elements
–
• AS 2.0 Profiling Tool
http://www.nochump.com/asprof

Screen Sizes
• Some common screen sizes on target devices …
176 × 208: Nokia Symbian Series 60
320 × 240/128 x 160: Nokia Series 40
176 × 220 (“204”): Verizon v3c (BREW)
320 × 240: Chumby
320 × 240: iRiver u10, Clix 1/2, u20
128 × 128: iRiver e10
480 × 272: PSP
Many others!
• Adobe Device Central
– Screen size searching, etc
– Device “Profile sets”

Pixel Depths and Color
• Not all devices support the same color depth
• 12‐bit to 24‐bit … typically 16‐bit
• Example Devices
• Nokia S40 6131 (24‐bit) versus Nokia S40 5300 (18‐bit)
• Adobe Device Central
• Search capabilities
Color Palette may need adjusting if ported to new target device.

Debugging Flash Lite Games
• trace() statement • Flash Lite Error Codes
trace( “Got here!” );
• Common Errors
• Toggling trace – Out of Memory
– “Bad Data”
//trace( “Got here!” ); … or:
– ActionScript Stuck
• Friendly Ghost Tool
• Flash Lite 1.1
Orison Technologies Product

Optimization “Tips and Tricks”
Use bitmaps over vectors where possible
•
.PNG’s over .JPG’s for bitmaps
•
Optimize shapes and outlines
•
Split up and tile complex Background Bitmaps
•
AVOID:
•
– animating simultaneous movieclips
– complex uses of Math and looping
– a lot of ActionScript contained in one frame

Optimization “Tips and Tricks”
• Analyze size reports and optimize
• Devnet Articles have LOTS OF TIPS!
– http://www.adobe.com/devnet/devices/
• MANY MORE tricks for Flash Lite (2.x) …
“Optimizing content for Flash Lite 2.0” ‐ Josh Ulm (Adobe)
http://www.adobe.com/devnet/devices/flash_lite_optimization.pdf

Misc Platforms
“Perhaps the hardest thing with Flash Lite is knowing
the strengths and weaknesses of the each and every
reference platform.”
– Me

Flash Lite Games for iRiver
• iRiver Portable Media Players
• Flash Lite 1.1: u10
• Flash Lite 2.x: e10, Clix, “u20” (Clix 2G), others
• D‐Click Flash Lite interface
• Up, Down, Left, Right, “softkeys” are +/‐
• Capabilities:
• Flash Lite Games
• MP3, stored data (u10), more!
• Custom fscommand2’s
• Flash Lite API limitations on legacy devices

iRiver Clix Game
• ALIEN INVASION
Casual Game
–
Rapid Game Development = 2‐3 days for DEMO
–
Flash Lite 2.0 (ActionScript 2.0)
–
OOP (Object based style architecture)
–
WALKTHROUGH

Chumby Games
• Flash Lite 3.0 Player (Linux)
• WiFi enabled
• Screen size: 320 px × 240 px
• Sound: MP3
• User Inputs:
• Touch Screen, Bend Sensor,
• Light Sensor, Accelerometer
• “Channels” and SWF “Widgets”
• “Ultra” causal type games
• Simple == better Chumby Games

PSP Flash Games
• Download, update, configure … not preinstalled
– Sony PSP ROM update version 2.70 or later
• Flash Player 6 (6,0,72,27)
– Reality = Think “Flash Lite 2.1”
• Run methods
– embedded SWF in HTML page for web browser
– file:/flash/filename.swf
• PSP Dev Center on Adobe
– Features, Technical, DevNet Article:
• http://www.adobe.com/devnet/devices/psp.html

Flash Lite Multiplayer games
“’Turn style’ games make most sense … but it depends on
your deployment environment including: operator,
bandwidth, target devices, etc.”
– Me

Multiplayer Games
• What kind of games make sense?
– Turn based games … Card Games, Puzzles, etc.
• Challenges
– Latency, Bandwidth, Billing Usage (pay per Kilobyte, etc)
• Communication Methods
Custom Socket Server … Chapter 6
– HTTP (Polling) – Flash Lite 1.1
• loadVariables(), loadVars(), etc
– XML Sockets – Flash Lite 2.1, 3.0
• Sushi Socket Server (Flash Lite API)
• Tornado – Open Source Java NIO Server
• Other commercial Socket Servers
– SWX
• SWF like format for data exchange
Sushi Socket Server Game
• http://www.swxformat.org
– Flash Lite = Bluetooth
• Extending Flash Lite = Kuneri Lite and Flyer (Open Source Project)

Mobile Game Testing
Emulators help … but “Rule #1: Always test on actual
target handsets (when at all possible)!”
‐ Everyone in the Mobile Development Community

“Emulators”, Simulators, & Testing
• All target devices
– Adobe Device Central
• GSM
– Nokia 3rd Edition SDKs
• BREW
– Qualcomm Simulator
• Others …
ALWAYS TEST CONTENT ON TARGET DEVICES!

Mobile Game
Deployment
“Worldwide revenue for mobile gaming subscriptions
could increase from $3 billion to $10.5 billion in 2009.“
– Juniper Research Ltd.

Game Distribution
• Aggregators, Content Providers, Operators
• Device Manufacturer Pre‐installation/On‐device
… and MANY OTHERS!
• Memory Card, or “Virally”

Wrap Up
Q&A, Where to go from here?, “Future thinking”

Q & A
• What can we do with Flash Lite 3?
– Native Flash Video now supported
– T.B.D.
• “Wish List” for Flash Lite in the future
Garbage Collection API
–
Bitmap Caching
–
Access to Camera/Bluetooth Support
–
LBS Support (Location Based Services)
–
Self contained Player distribution files
–
• Questions?

Where to go from here?
• Foundation Flash Applications for Mobile Devices
– http://www.flashmobilebook.com
• Resources
– http://www.scottjanousek.com/flashforward
•
– http://frame27.blogspot.com
• Contact Me
flashforward@scottjanousek.com
• Mobile Game Community