Slideshow Transcript

1. Slide 1: Yes, it is a Mobile World Yes, it is a Mobile World This photo was NOT photo‐shopped. It is an actual images of old recycled 90’s devices.
2. Slide 2: Some “Boston‐ian Lingo” 1. CLAM  CHOW‐DAHH 1 CLAM “CHOW‐DAHH” 2. DOOR‐CHEST‐AHHH 3. P‐ahh‐k the K‐ahh on the T‐ahh
3. Slide 3: The Art and Zen of Mobile Game Creation with Flash Scott Janousek, Technical Director Scott Janousek, Technical Director www.hookenmobile.com fitc2007@hookenmobile.com fitc2007@hookenmobile com
4. Slide 4: About Me About Me GENERAL INFO From Boston, Massachusetts, USA F Bt M h tt USA – Working with desktop Flash for six years – Designer & Developer Designer & Developer – 3+ year old blog (time for a new one!) – MOBILE Working with Flash Lite 1.1 and 2.x – Flash Lite 1.1/2.x Training Instructor – Coauthor: “Foundation Flash Applications for Mobile Devices”  – Mobile Gaming Enthusiast – – ™
5. Slide 5: Flash Lite Design, Development, Training, Consulting
6. Slide 6: Mobile Games Portfolio Mobile Games Portfolio • Flash Lite 1 1 and 2 x Flash Lite 1.1 and 2.x • Distribution: – Working directly with 3rd party mobile game companies Working directly with 3 party mobile game companies – Flash Lite Exchange • More products in 2007 More products in 2007 – Don’t Wake the Dragon, MORE! viliv p1 Sudoku game Symbian Series  60 content  iRiver Clix game
7. Slide 7: M bil G Mobile Games “Worldwide revenue for mobile gaming Worldwide revenue for mobile gaming  subscriptions could increase from $3 billion  to $10.5 billion in 2009 “– Juniper Research  Ltd. Ltd
8. Slide 8: Mobile Game Markets 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  Less time investment – investment
9. Slide 9: Mobile Game Genres Mobile Game Genres • Arcade/Action • Multiplayer – Snake Bomber Alien Snake, Bomber, Alien  – Mario Kart Texas Hold’em Mario Kart, Texas Hold em Invasion … • 2‐D, 3‐D Racers • Role playing games (RPG) – Tron, Mario Kart Tron, Mario Kart – Final Fantasy, etc. • Card and board games • Sports – Slots, Blackjack, Monopoly – EA SPORTS™ Madden 07  • First Person Shooters  • Skill, Strategy, Logic – Quake, Doom … – Mi S Mine Sweeper, Sudoku Sdk Above:  these just happen to be Flash Lite games that fit some of the genres …
10. Slide 10: 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. fun games” – Bruce Gibson Research Director with Juniper Research
11. Slide 11: Mobile Game Challenges Mobile Game Challenges Smaller Screen Sizes Smaller Screen Sizes User Input User Input • • Color Depths Walled Gardens • • Limited Memory Portability • • Limited Processor Limited Processor Learning Platforms Learning Platforms • • File Size Fragmentation • • Battery Life … many more! • •
12. Slide 12: “Holy Grail” = W.O.R.A.  Holy Grail W.O.R.A. • Write Once Run Anywhere • Nice idea for mobile, but … – Lots of devices different capabilities implementations etc Lots of devices, different capabilities, implementations, etc • Fragmentation is “fact of life” – N ti J2ME t Native, J2ME, etc – Flash Lite is NOT immune, but much LESS affected Handsets PDAs “Consumer Electronics”
13. Slide 13: Platform Decisions for  Mobile Games …
14. Slide 14: Flash Lite Players *  Flash Lite Players  * From Boston? Say “Play‐ahs” ☺
15. Slide 15: Flash Lite Game Life Cycle DESIGN GAME Idea/Concept DEVELOP GAME DEVELOP GAME TEST GAME Other platforms … pf Symbian Series 60 y DISTRIBUTION DEPLOY OTHER DEPLOY OTHER DEPLOY                    Operators, Aggregators O t A t PLATFORMS & Content Providers .sis packaging
16. Slide 16: Mobile Game Mobile Game  Development with Flash with Flash “The Flash Lite Platform offers one of the best environments  for rapid mobile game development for casual type content  for rapid mobile game development for casual type content found  today.” ‐ Me
17. Slide 17: Flash Lite 1.1 vs. 2.x  Coding Paradigms FL 2.x ‐ Class Based FL 1.1 ‐ Timeline Driven • Penetration = Lower Penetration = Lower • Penetration = Higher Penetration = Higher • ActionScript 2.0 • “ActionScript 0.5” Code Reuse Code Reuse – – Modularity Modularity – – Maintenance Maintainance – – Extensibility Extensibility – – Less time to learn Less time to learn Less time to learn Less time to learn – – Larger project content Smaller project content – –
18. Slide 18: Flash Lite 1.1 Syntax Refresher Flash Lite 1.1 Syntax Refresher • tellTarget() – tellTarget( /player_mc/ ) { /:x =+ 1; } – movie clips can act as libraries (“function clips”) p ( p) • eval() – Si l t P d A Simulate Pseudo Arrays using variables and eval i i bl d l – x1 = 23; eval( “x” add i ); • Game state Frame Labels (menu, gameplay, etc) • More ... More ... – My Flash Lite 1.1 “Reference Sheet” (PDF)
19. Slide 19: Device Keys/Text Input Device Keys/Text Input • Target devices often vary g f y • Keys: 0,1,2,3,4,5,6,7,8, #, * • Soft Keys y – Typically LEFT, RIGHT – FL 2.x supports multiple  softkeys • Text Input – FL 1.1 uses device for input uses de ce o put – FL 2.x built in text input (T9) • 5 Way Direction Joystick – UP, DOWN, LEFT, RIGHT,  SELECT
20. Slide 20: Keys in Flash Lite 1.1 Keys in Flash Lite 1.1 • Flash 4 style syntax • “Key Catchers” – button off Stage with ActionScript button off Stage with ActionScript on( keyPress “<UP>” ) { /player_mc/:y += 1; }  • Soft Keys Soft Keys – Typically 2 or more retVal = fscommand2(  setSoftKeys left right ); retVal = fscommand2( “setSoftKeys”, “left”, “right” ); on( keyPress “<PAGEUP>” ) { //‐‐do xyz } EXAMPLE
21. Slide 21: Keys in Flash Lite 2.x Keys in Flash Lite 2.x //‐‐ method #2 – Key Listener  //‐‐ method #2 – keyDown event move_obj:Object = new Object(); bj Obj t Obj t() player_mc.onKeyDown = function() {  l KD f ti () { switch (Key.getCode()) { move_obj.onKeyDown = function() { case Key.UP : switch (Key.getCode()) { this y += 1; this._y += 1;  case Key.UP : break; player_mc._y += 1; } break; } } } } Key.addListener( move_obj ); Key.addListener( player_mc ); //‐‐ method #3 ‐ onEnterFrame and isDown() move_mc.onEnterFrame = function() { EXAMPLE if (Key.isDown(Key.UP)) { player_mc._y += 1; } if ( i ( )) { l } }
22. Slide 22: ne Button Casual Games ne Button Casual Games • Focus 5 Min Sample – user input, game play and graphics i t l d hi • Should be very responsive –SSmooth Animations th A i ti – Immediate Actions • Game Challenge Game Challenge – Better to have many stages/levels – Timing + Rhythm + Reaction = GAME EXPERIENCE Timing  Rhythm Reaction GAME EXPERIENCE • Key Lag – Between device platforms Between device platforms – Tweak timing calculations (if needed)
23. Slide 23: Collision Detection Collision Detection FLASH LITE 1.1 FLASH LITE 2.x FLASH LITE 1.1 FLASH LITE 2.x Flash 4 syntax ActionScript 2.0 ! • • hitTest() hitT t() hitTest() available hitT t() il bl • • Like Math? More complexity possible • • Chapter 6 in our book Ch 6i bk … also in 6 l i6 • • EXAMPLE EXAMPLE
24. Slide 24: onEnterFrame() • Can be your friend for Flash Lite 2.x games y g – 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() p () • Use only for more robust target devices • I l h Li 1 1 “f In Flash Lite 1.1 = “frame looping” l i”
25. Slide 25: File Size File Size • Typically no more than 500 KB for SWF • Some carriers restrict file size (KB) • Available Bandwidth 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 FL 2.x SWF decompresses incurring penalty – Images, Sounds must decompress
26. Slide 26: Mobile Sound 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” “P S d” • FL 2.x device sound synch • Background MIDI Tracks Background MIDI Tracks • Lots of handsets support MIDI • SONIFY ORG SOUND RESOURCES SONIFY.ORG: SOUND RESOURCES Articles by Hayden Porter
27. Slide 27: Mobile Game Text 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 • Nt Not consistent look & feel i t tl k&f l • C i t tl k&f l Consistent look & feel • No anti‐aliasing • No anti‐aliasing • Point Size Restrictions Point Size Restrictions • Use various point sizes 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
28. Slide 28: Mobile Game Graphics 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  Bad Scaling/Rotating = OK Scaling/Rotating  OK • • Vectors preserve look when scaled Pixilation occurs on bitmap assets when scaled
29. Slide 29: Target Device Memory Target Device Memory • Memory Heaps: • Static – nearly guaranteed  l d • Dynamic  • Typically 1000 KB 0 kB and up to 6 000 KB 1000 KB … 0 kB and up to 6,000 • Fluctuates depending on other apps, etc. • FSCommand2 API FSCommand2 API var total_num:Number = fscommand2( “GetTotalPlayerMemory” ); var free_num:Number = fscommand2( “GetFreePlayerMemory” ); • P bl Problem with Content #1: “Out of Memory” ith C t t #1 “O t f M ” • Garbage Collection • 60 60 seconds idle or significant rise in memory usage d idl i ifi t i i • We need an API to avoid memory leaks!
30. Slide 30: Memory Profiling Tools 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
31. Slide 31: Target Device Performance Target Device Performance • CPU • Equivalent to “Pentium PC” Equivalent to  Pentium PC • Target FPS • CPU “Timer Resolution” CPU  Timer Resolution • Nokia: 16 FPS, iRiver: 20 FPS • Other Flash Lite 1 1 devices Other Flash Lite 1.1 devices  • 8 to 20+ FPS • Speed‐o‐meters Speed o meters • Test FPS capabilities • K I S S Principle K.I.S.S. Principle Keep It Simply Silly •
32. Slide 32: Memory & Performance Tools Memory & Performance Tools OLD NEW ! Adobe Device Central  TASK SPY “Performance Calibration Tool” – Symbian  S60 Devices Each device has  index 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
33. Slide 33: Screen Sizes 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) 176 220 (“204”) V i 3 (BREW) 320 × 240:  Chumby 320 × 240:  iRiver u10, Clix 1/2, u20 128 × 128:  iRiver e10 480 × 272:  PSP Many others! Many others! • Adobe Device Central – Screen size searching, etc Screen size searching etc – Device “Profile sets”
34. Slide 34: Pixel Depths and Color Pixel Depths and Color • Not all devices support the same color depth! Not all devices support the same color depth! • 12‐bit to 24‐bit … typically 16‐bit • Example Devices l i • Nokia S40 6131 (24‐bit) versus Nokia S40 (18‐bit) • Adobe Device Central • Search capabilities Color Palette may need adjusting if ported to new target device.
35. Slide 35: Debugging  Flash Lite Games • trace() statement trace() statement • Flash Lite Error Codes Flash Lite Error Codes trace( “Got here!” );  • Common Errors • Toggling trace Toggling trace – O t fM Out of Memory – “Bad Data” //trace( “Got here!” ); … or: – ActionScript Stuck • Friendly Ghost Tool • Flash Lite 1.1 Orison Technologies Product
36. Slide 36: Optimization “Tips and Tricks” Use bitmaps over vectors where possible • .PNG’s over .JPG’s for bitmaps p • Optimize shapes and outlines • Split up and tile complex Background Bitmaps 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
37. Slide 37: Optimization  “Tips and Tricks” • Analyze size reports and optimize l d • Devnet Articles have LOTS OF TIPS! – http://www.adobe.com/devnet/devices/ p • 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
38. Slide 38: Misc Platforms “Perhaps the hardest thing with Flash Lite is  knowing the strengths and weaknesses of  the each and every reference platform. the each and every reference platform ” – Me
39. Slide 39: iRiver Clix Game iRiver Clix Game • ALIEN INVASION – Casual Game – Rapid Game Development = 2‐3 days for DEMO p p y – Flash Lite 2.0 (ActionScript 2.0) – OOP (Object based style architecture) j y WALKTHROUGH
40. Slide 40: Chumby Games Chumby Games • Flash Lite “2.1” Player running under Linux •TTarget Frame Rate: 12 fps F R • Screen size: 320 px × 240 px • Sound: MP3 • User Inputs: • Touch Screen, Bend Sensor,  • Light Sensor, Accelerometer • “Channels” and “Widgets” • “Throw‐away” type games • Simple == better Experimental Chumby Games
41. Slide 41: PSP Flash Games PSP Flash Games • Download update configure not preinstalled Download, update, configure … not – Sony PSP ROM update version 2.70 or later • Flash Player 6 (6 0 72 27) Flash Player 6 (6,0,72,27) – Reality = Think “Flash Lite 2.1” • Run methods Run methods – embedded in HTML page, standalone SWFS in web browser – file:/flash/filename.swf  • PSP Dev Center on Adobe – Features and Technical Info: • http://www.adobe.com/devnet/devices/psp.html
42. Slide 42: Flash Lite Multiplayer games Flash Lite Multiplayer “’Turn style’ games make most sense … but it depends  on your deployment environment including: operator,  dl i i l di bandwidth, target devices, etc.” – Me
43. Slide 43: Multiplayer Games Multiplayer Games • What kind of games make sense? – Turn based games … Card Games, Puzzles, etc. bd d l • Communication Methods – HTTP (Polling) Flash Lite 1 1 HTTP (Polling) – Flash Lite 1.1 • loadVariables(), loadVars(), etc Custom Socket Server … Chapter 6 – XML Socket • Flash Lite 2.1 or higher • Sushi Socket Server (Flash Lite API) – Flash Lite = Bluetooth • Intercommunication with 3rd party application p y pp Sushi Socket Server • Look for an “article” soon … EXAMPLES
44. Slide 44: Mobile Game Testing Mobile Game Testing Emulators help … but “Rule #1: Always test on actual  target handsets target handsets” ‐ ME
45. Slide 45: “Emulators”, Simulators, & Testing Emulators , Simulators, & Testing • All target devices All target devices – Adobe Device Central • GSM – Nokia 3rd Edition SDKs • BREW – Qualcomm Simulator Qualcomm Simulator • Others … ALWAYS TEST CONTENT ON TARGET DEVICES!
46. Slide 46: M bil G Mobile Game  Deployment l “Worldwide revenue for mobile gaming  subscriptions could increase from $3 billion  to $10.5 billion in 2009  Juniper Research  to $10 5 billion in 2009 “– Juniper Research Ltd.
47. Slide 47: Game Distribution Game Distribution • Aggregators, Content Providers, Operators Aggregators, Content Providers, • Device Manufacturer Pre‐installation … and MANY MANY OTHERS! • Memory Card (MMC) = “Virally”
48. Slide 48: Wrap Up W U Q&A, Where to go from here?,  Future thinking Q&A Where to go from here? “Future thinking”
49. Slide 49: Q&A Q & A • Questions? • What can we do with Flash Lite 3? – Native Flash Video now supported i l h id d – T.B.D. • “Wi h Li ” f Fl h Li “Wish List” for Flash Lite > 2.x 2 Garbage Collection API – Bitmap Caching? – Access to Camera/Bluetooth Support – LBS Support (Location Based Services) LBS Support (Location Based Services) – Others … –
50. Slide 50: Where to go from here? Where to go from here? • Foundation Flash Applications for Mobile Devices Foundation Flash Applications for Mobile Devices – http://www.flashmobilebook.com • Adobe DevNet articles – http://www.adobe.com/devnet/devices/ • – http //frame27 blogspot com http://frame27.blogspot.com • Contact Me fitc2007@scottjanousek com fitc2007@scottjanousek.com • Game Groups:
51. Slide 51: This slide left blank intentionally (almost)
52. Slide 52: MISC (unused/”nix”‐ed) MISC ( n sed/”ni ” ed)
53. Slide 53: Math and Physics Math and Physics • Limited Device Capabilities – Handsets vs. portable consoles – Memory and Performance EXAMPLE • Avoid overtly complex game computations Avoid overtly complex game computations • Flash Lite 1.1  – supports limited Flash 5 object supports limited Flash 5 object – Drawing API can be simulated (sort of) • Flash Lite 2 x Flash Lite 2.x – supports AS2 Math object – Drawing API Drawing API – onEnterFrame()
54. Slide 54: Flash Lite Games for iRiver Flash Lite Games for iRiver • iRiver Portable Media Players • Fl h Li 1 1 Flash Lite 1.1: u10  • Flash Lite 2.x: e10, Clix, “u20” (Clix 2G) • D‐Click Flash Lite interface  • Up, Down, Left,  Right, “softkeys” are +/‐ • Capabilities: • Flash Lite Games Flash Lite Games • MP3, stored data (u10), more! • Custom fscommand2’s • Yuck … Flash Lite API limitations
55. Slide 55: Methods of Game State Methods of Game State “Shared Objects” External Server • Mobile Shared Objects (FL 2.x) • Requires external data  connection • Write2File (FL 1.1) • Databases (MYSQL) • Pros: No data connection • Pros: Persistent in db • Cons: Not always supported  (only Flash Lite 2), file size (only Flash Lite 2) file size • Cons: Requires connection Cons: Requires connection Entering Predetermined “Codes” • Enter code “xyz” to get to level 3 • Pros: Simple to implement • Cons: Can decompile to figure out codes EXAMPLE
56. Slide 56: Leveraging Vibration Leveraging Vibration • Some devices support this feature Some devices support this feature  – Nokia 6680 for example • Simulate the result of an action or event Simulate the result of an action or event – Hit wall, Player died, alerts, etc. • retVal = fscommand2(“StartVibrate”,on,off,repeat); tV l f d2(“St tVib t ” ff t) • Enhancement – never require this for game play EXAMPLE
57. Slide 57: fscommand2 API fscommand2 API SetQuality • FullScreen UnEscape • • StartVibrate • GetTimeHours GetPowerSource • • StopVibrate • GetTimeMinutes GetBatteryLevel • • GetVolumeLevel • GetTimeSeconds GetMaxBatteryLevel • • GetMaxVolumeLevel • GetTimeZoneOffset SetSoftKeys GetSignalLevel • • • GetMaxSignalLevel • GetTotalPlayerMemory ResetSoftKeys • • GetNetworkConnectStatus • GetFreePlayerMemory GetDateDay • • GetNetworkRequestStatus • GetLanguage GetDateWeekDay • • GetNetworkStatus • GetDeviceID GetDateMonth • • GetNetworkName • GetPlatform GetDateYear SetInputTextType • • • Quit • GetDevice GetLocaleShortDate • • ExtendBacklightDuration (FL 2.x) • Launch GetLocaleLongDate • • setFocusRectColor (FL 2.x) • Escape GetLocaleTime • • fscommand2’s execute immediately … not supported on desktop retVal = fscommand2( “FullScreen”, true ); //‐‐ fullscreen mode (if supported)
58. Slide 58: “Toolsets” Toolsets • Mobile Tools • Simulators • FEExplorer • i‐mode • TaskSpy py • Simulator • Nokia • PC Suite • 3rd edition SDK • Verizon  • App Loader • BREW Simulator