flashforward 2007 (boston) - the art and zen of mobile game creation with flash
DESCRIPTION
This session will focus primarily on casual mobile game creation using Flash Lite. Scott will provide an overview of designing, developing, testing, and deploying both standalone and multiplayer mobile game content using Flash Lite across a number of platforms, including Nokia Series 40 and Series 60, BREW, iRiver, PSP, and more. Scott will also discuss more advanced topics such as effective mobile game play, device limitations and constraints, optimization, fragmentation woes, as well as the tips, tricks, and best practices to help address some of these challenges as they apply to both mobile game development and Flash Lite. Attendees will come away from this session with insight on creating games for handhelds and other portable devices, leveraging the Flash platform.TRANSCRIPT
The Art and Zen of Mobile Game Creation with Flash
Scott [email protected]
Presentation Resources
You can find everything here:
http://www.scottjanousek.com/flashforward
(will be available Post‐Conference …)
MeGENERAL 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!
Symbian Series 60 Content iRiver Clix game
viliv p1 Sudoku game
Mobile Games“Worldwide revenue for mobile gaming subscriptionscould increase from $3 billion to $10.5 billion in2009.”
– Juniper Research Ltd.
Mobile Game Markets“Power”
– Power Gamers
– High Learning Curve
– More Expensive
– Guilt in not finishing
– More time investment
“Casual”– Fun, Addictive
– No learning curve
– Inexpensive
– No guilt
– Less time investment
(Mobile) Game Genres• Arcade/Action
– Snake, Bomber, Alien Invasion …
• Role playing games (RPG)
– Final Fantasy, etc.
• Sports
– EA SPORTS™ Madden 07
• Skill, Strategy, Logic
– Mine Sweeper, Sudoku
• Multiplayer
– Mario Kart, Texas Hold’em
• 2‐D, 3‐D Racers
– Tron, Mario Kart
• Card and board games
– Slots, Blackjack, Monopoly
• First Person Shooters
– Quake, Doom …
Above: these just happen to be Flash Lite games that fit some of the genres …
Mobile GameDesign 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 Sizes
• Color Depths
• Limited Memory
• Limited Processor
• File Size
• Battery Life
• User Input• Walled Gardens• Portability• Learning Platforms
• Fragmentation• … many more!
“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
TEST GAME
DEVELOP GAME
DEPLOY
DISTRIBUTIONDEPLOY OTHERPLATFORMS
Idea/Concept
Operators, Aggregators& Content Providers
.sis packaging
Other platforms … Symbian Series 60
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
• Penetration = Lower
• ActionScript 2.0– Code Reuse
– Modularity
– Maintenance
– Extensibility
– Less time to learn
– Larger project content
FL 1.1 ‐ Timeline Driven
• Penetration = Higher• “ActionScript 0.5”
– Code Reuse– Modularity– Maintainance– Extensibility– Less time to learn– Smaller 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• StartVibrate• StopVibrate• GetVolumeLevel• GetMaxVolumeLevel• GetSignalLevel• GetMaxSignalLevel• GetNetworkConnectStatus• GetNetworkRequestStatus• GetNetworkStatus• GetNetworkName• SetInputTextType• Quit• ExtendBacklightDuration (FL 2.x)• setFocusRectColor (FL 2.x)
• UnEscape
• GetPowerSource
• GetBatteryLevel
• GetMaxBatteryLevel
• SetSoftKeys
• ResetSoftKeys
• GetDateDay
• GetDateWeekDay
• GetDateMonth
• GetDateYear
• GetLocaleShortDate
• GetLocaleLongDate
• GetLocaleTime
• FullScreen• GetTimeHours• GetTimeMinutes• GetTimeSeconds• GetTimeZoneOffset• GetTotalPlayerMemory• GetFreePlayerMemory• GetLanguage• GetDeviceID• GetPlatform• GetDevice• Launch• Escape
retVal = fscommand2( “FullScreen”, true ); //‐‐ fullscreen mode (if supported)fscommand2’s execute immediately and have return values
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 ActionScripton( keyPress “<UP>” ) { /player_mc/:y += 1; }
• Soft Keys– Typically 2 or moreretVal = fscommand2( “setSoftKeys”, “left”, “right” );on( keyPress “<PAGEUP>” ) { //‐‐do xyz }
EXAMPLE
Keys in Flash Lite 2.x//‐‐method #2 – Key Listener move_obj:Object = new Object();move_obj.onKeyDown = function()
{switch (Key.getCode()) {case Key.UP :player_mc._y += 1;break;
}}Key.addListener( move_obj );
//‐‐method #2 – keyDown eventplayer_mc.onKeyDown = function()
{ switch (Key.getCode()) {case Key.UP :this._y += 1; break;}
}}Key.addListener( player_mc );
//‐‐method #3 ‐ onEnterFrame and isDown()move_mc.onEnterFrame = function() {if (Key.isDown(Key.UP)) { player_mc._y += 1; }}
EXAMPLE
ne Button Casual Games• Focus
– user input, game play and graphics
• Should be very responsive– Smooth Animations
– Immediate Actions
• Game Challenge– Better to have many stages/levels
– Timing + Rhythm + Reaction = GAME EXPERIENCE
• Key Lag– Between device platforms
– Tweak timing calculations (if needed)
Sample
Collision DetectionFLASH LITE 1.1
• Flash 4 syntax• hitTest()• Primitive Math• Chapter 6 in our book
FLASH LITE 2.x• ActionScript 2.0
• hitTest() available
• More complexity possible
• … 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• 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()
EXAMPLE
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 SoundDevice Sounds
• Playback outside of Flash Lite
• Smaller size
• Common formats:– MIDI, MFi, SMAF, AMR, others
• “Proxy Sounds”
• FL 2.x device sound synch
• Background MIDI Tracks
• Lots of handsets support MIDI
Native Sounds• Playback within Flash Lite
• Larger Size
• Common formats:– PCM, ADPCM, .WAV, .MP3
SONIFY.ORG: SOUND RESOURCESArticles by Hayden Porter
Mobile Game TextDevice Fonts
• Preinstalled device fonts• Results in smaller file size• Position anywhere on x, y
doesn’t matter• Not consistent look & feel• No anti‐aliasing• Point Size Restrictions
Pixel Fonts
• Hundreds available
• Larger file size
• Position on x, y integer values– i.e. x=0.0, y=0.0
• Consistent look & feel
• No anti‐aliasing
• Use various point sizes
Device fonts save space
Device fonts save space
Device fonts save space
Use pixel fonts for look/feel
Use pixel fonts for look/feel
Use pixel fonts for look/feel
Mobile Game GraphicsBitmap Vector
• “Larger” file size• Less CPU resources• More memory• Scaling/Rotating = Bad
• “Smaller” file size• More CPU resources• Less memory• Scaling/Rotating = OK
Vectors preserve look when scaledPixilation occurs on bitmap assets when scaled
“Versus”
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 APIvar 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
TASK SPY– Symbian Series Devices– Download:www.pushl.com/taskspy
“NEW” SCHOOL
Adobe Device Central– Static/Dynamic Heap Info
– Memory usage graphing
– 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. PrincipleContent = Keep It Simply Silly
Memory & Performance ToolsOLD
TASK SPY– Symbian S60 Devices– Download:www.pushl.com/taskspy
NEW !Adobe Device Central “Performance Calibration Tool”
– Each device has “index”– Simulated CPU usage– Performance reporting– Only visual elements
• AS 2.0 Profiling Toolhttp://www.nochump.com/asprof
• Some common screen sizes on target devices …
• Adobe Device Central– Screen size searching, etc
– Device “Profile sets”
176 × 208: Nokia Symbian Series 60320 × 240/128 x 160: Nokia Series 40 176 × 220 (“204”): Verizon v3c (BREW)320 × 240: Chumby320 × 240: iRiver u10, Clix 1/2, u20128 × 128: iRiver e10480 × 272: PSPMany others!
Screen Sizes
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
trace( “Got here!” );
• Toggling trace//trace( “Got here!” ); … or:
• Friendly Ghost Tool• Flash Lite 1.1
• Flash Lite Error Codes
• Common Errors– Out of Memory
– “Bad Data”
– ActionScript Stuck
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
• 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) …
Optimization “Tips and Tricks”
“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– 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
• http://www.swxformat.org
– Flash Lite = Bluetooth• Extending Flash Lite = Kuneri Lite and Flyer (Open Source Project)
Custom Socket Server … Chapter 6
Sushi Socket Server Game
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.
• Aggregators, Content Providers, Operators
• Device Manufacturer Pre‐installation/On‐device
• Memory Card, or “Virally”
Game Distribution
… and MANY OTHERS!
Wrap UpQ&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
• Mobile Game Community