Game Design & Development    Adobe Flash Platform                                            Hemanth Sharma               ...
??                      rent?How?        is it diffe    ?
Process - Game Design                                     Graphic Design     Concept Design                      Storyboar...
Process - Game DevelopmentPr  ot    ot                               Op      yp                           g               ...
The Difference•   Graphic Intensive•   Lot of attention towards Performance•   Full of Life!•   Social
Intelligent Learning•   Analytics    ★   What features are used most?    ★   Demography - Gender, Regional, etc.
Intelligent Hype•   Promotion and Hype    ★   Seasonal / Themed Content    ★   Virtual Goods and Currencies    ★   In-game...
Multiple Platforms      Android      BlackBerry      iOS      Windows      Macintosh      Linux
Why Multiple Platforms?•   Portability•   Rich Experience - Touch, Gestures, Accelerometer, etc.•   Richer Experience - In...
Why Multiple Platforms?•   More customers•   Visibility across market places•   Money hai to....?
Multiple DevicesHandheld Devices   Personal Computers   Tablets   Other Devices
Multiple Languages/Tools•   Android - Java•   iOS - Objective C•   Desktop - Objective C, Java, Multiple•   Testing Enviro...
Solution•   Adobe Flash Professional CS5.5•   Adobe Flash Builder 4.5 / Flex 4.5•   Adobe Flash Player•   Adobe AIR•   Ado...
Input Types•   Keyboard + Mouse•   Touch Interface - Multitouch and Gestures•   Accelerometer•   Joystick•   Augmented Rea...
Input Types      Keyboard & Mouseimport flash.events.KeyboardEvent;stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown_...
Input Types       Multitouch Inputimport flash.ui.Multitouch;import flash.ui.MultitouchInputMode;import flash.events.Touch...
Input Types      Multitouch Gesturesimport flash.ui.Multitouch;import flash.ui.MultitouchInputMode;import flash.events.Tra...
Input Types      Accelerometerimport flash.sensors.Accelerometer;import flash.events.AccelerometerEvent;var acc_obj:Accele...
Augmented Reality•   FlAR Toolkit for ActionScript 3.0    http://www.libspark.org/wiki/saqoosha/FLARToolKit/en    DEMO!
Other Challenges•   Layout - UI, Graphics, Front-end logic•   Performance - Optimization for Memory, Processor, etc.
Layout      Liquid Layout in pure ActionScript 3.0import flash.display.StageAlign;import flash.display.StageScaleMode;impo...
Content Scaling for Games•   Not as easy as you think•   For any technology for that matter!•   Define different bitmaps f...
Content Scaling for Physical SizeCapabilities.screenDPI * (physicalSize) = Same size on any screen!
Content Scaling for Virtual Size
Content Scaling for Games•   Load bitmap sprites based on Screen DPI•   Scaling is not everything!
Keep it separate                CORE LOGIC               ird Party API                   Social API             UI Scaling...
Testing•   Accelerometer•   Multitouch•   Multiple Devices, Screen layouts and sizes
TestingAdobe Device Central CS5.5
Publishing     Android     BlackBerry     iOS     Windows     Macintosh     Linux
Publishing     Android     BlackBerry     iOS     Windows     Macintosh     Linux
Publishing     Android     BlackBerry     iOS     Windows     Macintosh     Linux
Publishing     Android     BlackBerry     iOS     Windows     Macintosh     Linux
Publishing     Android     BlackBerry     iOS     Windows     Macintosh     Linux
Vectors & Bitmaps•   Bitmaps are costly on file size and loading•   Optimize Bitmaps as necessary•   Intelligently use PNG...
3 Dimentional - Demo•   Stereoscopic Games•   Realtime 3D Rendering (Hardware Accelerated)
3 Dimentional - AnaglyphHow is this achieved?
Molehill           •   What is Molehill?           •   Why Molehill?           •   What is needed from end-user?
Molehillhttp://labs.adobe.com/technologies/flashplatformruntimes/incubator/Molehill 2Dhttps://github.com/egreenfield/M2D
Multiplayer•   Socket Server - AIR 2 SocketServer Class•   Peer to Peer - AIR 2.5 P2P
Optimization Tips•   Bitmaps for Performance Vs Vectors for Less Memory•   Keep bitmaps as small as possible•   Reduce num...
Optimization Tips•   Keep as less vector points as possible in the artwork                542 Points                      ...
Optimization Tips•   Use only if absolutely necessary (for Mobile Content) –     ★ Filters     ★ Blend Modes     ★ Transpa...
Optimization Tips•   Set Frame Rate as low as possible•   Adjust Frame Rate dynamically•   Combine Event Handlers function...
Optimization Tips•   Place text/graphics on whole pixels (Pixel Boundaries)•   Avoid object creation inside loops•   Insta...
Publishing•   Publishing to different/multiple Market places     ★ Adobe InMarket     ★ Intel AppUp
Social Games•   Need to be connected!•   Communication with the back-end•   Optimization of Graphics•   Third Party API
??                    sh?  y h?           obe FlaW           Ad    ?
Flash Professional CS5.5•   A designer’s paradise•   Canvas to design characters, backdrops, artwork•   Library - reusabil...
Flash Builder 4.5•   25+ Coding Enhancement Features•   On-Device Debugging for Mobile Content•   Easy testing/deployment ...
ActionScript 3.0 API•   Device Capabilities - Accelerometer, Geolocation, Multitouch Input,    Gestures•   Smart Layout / ...
Thirdparty Engines - 3D•   Alternativa 3D (http://alternativaplatform.com/en/)•   Away3D (http://www.away3d.com/)•   Paper...
Thirdparty Engines - 2D•   Flixel (http://flixel.org/)•   FlashPunk (http://flashpunk.net/)•   PushButton (http://pushbutt...
Thirdparty Engines - Isometric•   AS3 ISO Lib (http://code.google.com/p/as3isolib/)•   TheoWorlds (http://www.theoworlds.c...
Thirdparty Engines - Physics•   JigLib (http://www.jiglibflash.com/blog/)•   Box2D (http://box2dflash.sourceforge.net/)•  ...
Questions?        • http://www.hsharma.com/tech        • http://www.twitter.com/hemanthsharma        • http://www.facebook...
Thank you
Upcoming SlideShare
Loading in …5
×

Game design & development

6,272 views

Published on

Learn the aspects of building multi-screen and multi-form factor games for various devices ranging from mobiles, tablets to desktop. Also covered will be the aspects of design/development for web based games and standalone games for multiple devices. Understand how Adobe Flash Platform makes it extremely easy for you to build striking games, test and publish them for many devices.

Published in: Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,272
On SlideShare
0
From Embeds
0
Number of Embeds
2,382
Actions
Shares
0
Downloads
155
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Game design & development

  1. 1. Game Design & Development Adobe Flash Platform Hemanth Sharma Platform Evangelist Adobe Systems Inc. Twi er: www.twi er.com/hemanthsharmaFacebook: www.facebook.com/hemanth.sharma
  2. 2. ?? rent?How? is it diffe ?
  3. 3. Process - Game Design Graphic Design Concept Design Storyboard & Level Design
  4. 4. Process - Game DevelopmentPr ot ot Op yp g stin e tim Te izat ion Deve lopm ent ent eploym D
  5. 5. The Difference• Graphic Intensive• Lot of attention towards Performance• Full of Life!• Social
  6. 6. Intelligent Learning• Analytics ★ What features are used most? ★ Demography - Gender, Regional, etc.
  7. 7. Intelligent Hype• Promotion and Hype ★ Seasonal / Themed Content ★ Virtual Goods and Currencies ★ In-game Ads
  8. 8. Multiple Platforms Android BlackBerry iOS Windows Macintosh Linux
  9. 9. Why Multiple Platforms?• Portability• Rich Experience - Touch, Gestures, Accelerometer, etc.• Richer Experience - Interconnect devices for better gameplay
  10. 10. Why Multiple Platforms?• More customers• Visibility across market places• Money hai to....?
  11. 11. Multiple DevicesHandheld Devices Personal Computers Tablets Other Devices
  12. 12. Multiple Languages/Tools• Android - Java• iOS - Objective C• Desktop - Objective C, Java, Multiple• Testing Environment• The way you deploy/package
  13. 13. Solution• Adobe Flash Professional CS5.5• Adobe Flash Builder 4.5 / Flex 4.5• Adobe Flash Player• Adobe AIR• Adobe Device Central CS5.5• Adobe Photoshop CS5.5• Adobe Illustrator CS5.5
  14. 14. Input Types• Keyboard + Mouse• Touch Interface - Multitouch and Gestures• Accelerometer• Joystick• Augmented Reality / Gesture Recognition
  15. 15. Input Types Keyboard & Mouseimport flash.events.KeyboardEvent;stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown_handler);private function keyDown_handler(event:KeyboardEvent):void { trace(event.keyCode);}import flash.events.MouseEvent;stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown_handler);
  16. 16. Input Types Multitouch Inputimport flash.ui.Multitouch;import flash.ui.MultitouchInputMode;import flash.events.TouchEvent;if (Multitouch.supportsTouchEvents) { Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT; stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin); stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);}
  17. 17. Input Types Multitouch Gesturesimport flash.ui.Multitouch;import flash.ui.MultitouchInputMode;import flash.events.TransformGestureEvent;if (Multitouch.supportsGestureEvents) { Multitouch.inputMode = MultitouchInputMode.GESTURE; stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onRotate); stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onZoom);}function onRotate(event:TransformGestureEvent):void { trace(event.rotation);}function onZoom(event:TransformGestureEvent):void { trace(event.scaleX + ", " + event.scaleY);}
  18. 18. Input Types Accelerometerimport flash.sensors.Accelerometer;import flash.events.AccelerometerEvent;var acc_obj:Accelerometer;if (Accelerometer.isSupported) { acc_obj = new Accelerometer(); acc_obj.addEventListener(AccelerometerEvent.UPDATE, onAccUpdate);}private function onAccUpdate(event:AccelerometerEvent):void { trace(event.accelerationX + ", " + event.accelerationY + ", " + event.accelerationZ);}
  19. 19. Augmented Reality• FlAR Toolkit for ActionScript 3.0 http://www.libspark.org/wiki/saqoosha/FLARToolKit/en DEMO!
  20. 20. Other Challenges• Layout - UI, Graphics, Front-end logic• Performance - Optimization for Memory, Processor, etc.
  21. 21. Layout Liquid Layout in pure ActionScript 3.0import flash.display.StageAlign;import flash.display.StageScaleMode;import flash.events.Event;stage.align = StageAlign.TOP_LEFT;stage.scaleMode = StageScaleMode.NO_SCALE;stage.addEventListener(Event.RESIZE. onResize);private function onResize(event:Event):void { // LAYOUT LOGIC}
  22. 22. Content Scaling for Games• Not as easy as you think• For any technology for that matter!• Define different bitmaps for different screen densities• flash.system.Capabilities.screenDPI is your KEY!
  23. 23. Content Scaling for Physical SizeCapabilities.screenDPI * (physicalSize) = Same size on any screen!
  24. 24. Content Scaling for Virtual Size
  25. 25. Content Scaling for Games• Load bitmap sprites based on Screen DPI• Scaling is not everything!
  26. 26. Keep it separate CORE LOGIC ird Party API Social API UI Scaling Logic Platform Logic
  27. 27. Testing• Accelerometer• Multitouch• Multiple Devices, Screen layouts and sizes
  28. 28. TestingAdobe Device Central CS5.5
  29. 29. Publishing Android BlackBerry iOS Windows Macintosh Linux
  30. 30. Publishing Android BlackBerry iOS Windows Macintosh Linux
  31. 31. Publishing Android BlackBerry iOS Windows Macintosh Linux
  32. 32. Publishing Android BlackBerry iOS Windows Macintosh Linux
  33. 33. Publishing Android BlackBerry iOS Windows Macintosh Linux
  34. 34. Vectors & Bitmaps• Bitmaps are costly on file size and loading• Optimize Bitmaps as necessary• Intelligently use PNG / JPG• Vectors are costly on rendering• Cache (static) vector images as bitmaps when necessary
  35. 35. 3 Dimentional - Demo• Stereoscopic Games• Realtime 3D Rendering (Hardware Accelerated)
  36. 36. 3 Dimentional - AnaglyphHow is this achieved?
  37. 37. Molehill • What is Molehill? • Why Molehill? • What is needed from end-user?
  38. 38. Molehillhttp://labs.adobe.com/technologies/flashplatformruntimes/incubator/Molehill 2Dhttps://github.com/egreenfield/M2D
  39. 39. Multiplayer• Socket Server - AIR 2 SocketServer Class• Peer to Peer - AIR 2.5 P2P
  40. 40. Optimization Tips• Bitmaps for Performance Vs Vectors for Less Memory• Keep bitmaps as small as possible• Reduce number of nodes for Vectors• Use opaque background for texts• Experiment with Anti-aliasing options for text
  41. 41. Optimization Tips• Keep as less vector points as possible in the artwork 542 Points 282 Points 5.1 kb 3.8 kb
  42. 42. Optimization Tips• Use only if absolutely necessary (for Mobile Content) – ★ Filters ★ Blend Modes ★ Transparency ★ Perspective Distortion
  43. 43. Optimization Tips• Set Frame Rate as low as possible• Adjust Frame Rate dynamically• Combine Event Handlers functions wherever possible• Use EnterFrame over Timers• Use Event.RESIZE over StageOrientationEvent.ORIENTATION_CHANGE
  44. 44. Optimization Tips• Place text/graphics on whole pixels (Pixel Boundaries)• Avoid object creation inside loops• Instantiate one Library Bitmap and re-use the BitmapData• Use Loader.unloadAndStop(); - Sounds, Listeners, Timers, HW, etc.
  45. 45. Publishing• Publishing to different/multiple Market places ★ Adobe InMarket ★ Intel AppUp
  46. 46. Social Games• Need to be connected!• Communication with the back-end• Optimization of Graphics• Third Party API
  47. 47. ?? sh? y h? obe FlaW Ad ?
  48. 48. Flash Professional CS5.5• A designer’s paradise• Canvas to design characters, backdrops, artwork• Library - reusability• Integrated Coding environment• Publishing capability for Multi-platform (Android, iOS, etc.)
  49. 49. Flash Builder 4.5• 25+ Coding Enhancement Features• On-Device Debugging for Mobile Content• Easy testing/deployment on Devices
  50. 50. ActionScript 3.0 API• Device Capabilities - Accelerometer, Geolocation, Multitouch Input, Gestures• Smart Layout / Liquid Graphics• Multi-density Authoring
  51. 51. Thirdparty Engines - 3D• Alternativa 3D (http://alternativaplatform.com/en/)• Away3D (http://www.away3d.com/)• Papervision3D (http://blog.papervision3d.org/)• Flare3D (http://flare3d.com/)• Sophie3D (http://sophie3d.com/)• Yoghurt3D (http://www.yogurt3d.com/)• Minko (http://aerys.in/minko)
  52. 52. Thirdparty Engines - 2D• Flixel (http://flixel.org/)• FlashPunk (http://flashpunk.net/)• PushButton (http://pushbuttonengine.com/)
  53. 53. Thirdparty Engines - Isometric• AS3 ISO Lib (http://code.google.com/p/as3isolib/)• TheoWorlds (http://www.theoworlds.com/)
  54. 54. Thirdparty Engines - Physics• JigLib (http://www.jiglibflash.com/blog/)• Box2D (http://box2dflash.sourceforge.net/)• APE (http://www.cove.org/ape/)• WOW (http://code.google.com/p/wow-engine/)
  55. 55. Questions? • http://www.hsharma.com/tech • http://www.twitter.com/hemanthsharma • http://www.facebook.com/hemanth.sharma • http://www.adobe.com/devnet • http://tv.adobe.com
  56. 56. Thank you

×