Multi-platform Game
                       Design & Development
                       Adobe Flash Platform




                                                     Hemanth Sharma
                                           Platform Evangelist, Adobe Systems

                                                    http://www.hsharma.com
                                                            @hemanthsharma
                                    http://www.facebook.com/hemanthsharma

Friday 4 November 11
Multi-platform




Friday 4 November 11
Multi-platform


                                Google Android
                                BlackBerry PlayBook
                                Apple iOS
                                Windows
                                Macintosh
                                Linux



Friday 4 November 11
Multi-platform


                                  Across devices
                                  Richer experience
                                  Visibility

                       WHY?       More customers
                                  Revenue




Friday 4 November 11
Multi-platform


                                      Technology
                                      Display Resolution
                                      Screen Density (DPI)
                                      Physical Size
               Developer Challenges   Input
                                      Processor & Memory



Friday 4 November 11
The Process




Friday 4 November 11
The Process


                              Concept
                              Prototype
                              Concept Art
                              Development
                              Testing & Optimization
                              Deployment



Friday 4 November 11
Screen Resolution




Friday 4 November 11
Screen Resolution


                              320 px


                              Phone 480 px




Friday 4 November 11
Screen Resolution

                              480 px




                              Phone    800 px




Friday 4 November 11
Screen Resolution
                              640 px




                              Phone    960 px




Friday 4 November 11
Screen Resolution
                              768 px




                              Tablet   1024 px




Friday 4 November 11
Screen Resolution
                              800 px




                              Tablet   1280 px




Friday 4 November 11
Screen Resolution


                       1. Different Resolution

                       2. Scaling

                       3. Crop




Friday 4 November 11
Screen Resolution




Friday 4 November 11
Screen Resolution
            Different Resolution




                            350 x 350
                            logo_350.png   600 x 600
                                           logo_600.png




Friday 4 November 11
Screen Resolution
            Different Resolution




                            1024 x 768
                            bg_1024.png

                                           640 x 960
                                           bg_640.png




Friday 4 November 11
Screen Resolution
            Scaling




Friday 4 November 11
Screen Resolution
            Scaling




Friday 4 November 11
Screen Resolution
            Scale Down




            Scale Up




Friday 4 November 11
Screen Resolution
            Crop




Friday 4 November 11
Screen Resolution
            Crop




Friday 4 November 11
Graphics



                       Vector Graphics

                       Raster (Bitmap) Graphics




Friday 4 November 11
Screen DPI




Friday 4 November 11
Screen DPI
                                            Virtually
                                Desire HD               iPhone 4


                                                        640 px

                                 480 px




                                                                   960 px
                       800 px




Friday 4 November 11
Screen DPI
                                            Physically
                                Desire HD            iPhone 4


                                                         640 px

                                 480 px




                                                                  960 px
                       800 px




Friday 4 November 11
Screen DPI
                                            Physically
                                Desire HD            iPhone 4

                                 480 px
                                                         640 px




                       800 px                                     960 px




Friday 4 November 11
Screen DPI
                                                  Physically
                                 Desire HD                  iPhone 4

                                   480 px
                                                               640 px
                                1 inch
                                         240 px
                                                           1 inch
                                                                    326 px
                                240 px

                                                           326 px
                       800 px                                                960 px




Friday 4 November 11
Screen DPI

                               Device            Resolution   DPI

                          Apple iPhone 4S        640 x 960    326

                           HTC Desire HD         480 x 800    240

                             Apple iPad          768 x 1024   132

                       Samsung Galaxy 10.1 Tab   800 x 1280   149

                         BlackBerry PlayBook     600 x 1024   192




Friday 4 November 11
Screen DPI
                       Content Scaling for Virtual Size

                              object.width = n;




Friday 4 November 11
Screen DPI
                       Content Scaling for Physical Size

    object.width = flash.Capabilities.screenDPI * physicalSize;




Friday 4 November 11
Input




Friday 4 November 11
Input

                           Keyboard
                           Mouse
                           Multi-touch
                           Gestures
                           Accelerometer
                           Microphone
                           Camera



Friday 4 November 11
Keyboard

   import flash.events.KeyboardEvent;

   stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown_handler);

   protected function keyDown_handler(event:KeyboardEvent):void {
      trace(event.keyCode);
   }




Friday 4 November 11
Mouse


   import flash.events.MouseEvent;

   stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown_handler);




Friday 4 November 11
Multitouch
   import 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);
   }

   protected function onTouchBegin(event:TouchEvent):void {
      trace(event.touchPointID);
   }




Friday 4 November 11
Multitouch Gestures
   import 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);
   }

   protected function onRotate(event:TransformGestureEvent):void {
      trace(event.rotation);
   }
   protected function onZoom(event:TransformGestureEvent):void {
      trace(event.scaleX + ", " + event.scaleY);
   }




Friday 4 November 11
Accelerometer
   import 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);
      trace(event.accelerationY);
      trace(event.accelerationZ);
   }




Friday 4 November 11
Input


                       Accelerometer Check     or   Multitouch/Gestures Check




                        Keyboard Fallback      or        Mouse Fallback




Friday 4 November 11
Technology




Friday 4 November 11
Technology



                              Java
                              Objective-C
                              C or others




Friday 4 November 11
Technology



                              .apk
                              .bar
                              .ipa




Friday 4 November 11
Technology


                       Adobe Flash Platform

                                              .apk
                                              .bar
                                              .ipa




Friday 4 November 11
Technology




                            DEMO

Friday 4 November 11
Game Engines - 2D


                       • Flixel (http://flixel.org/)
                       • FlashPunk (http://flashpunk.net/)
                       • PushButton (http://pushbuttonengine.com/)




Friday 4 November 11
Game Engines - Isometric



                       • AS3 ISO Lib (http://code.google.com/p/as3isolib/)
                       • TheoWorlds (http://www.theoworlds.com/)




Friday 4 November 11
Game 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/)




Friday 4 November 11
Multiplayer / Multiuser



                       P2P

                       Socket & SocketServer




Friday 4 November 11
3D & GPU




       Stage 3D (Molehill)
       http://alternativaplatform.com/en/demos/maxracer/

       Starling Framework
       http://www.starling-framework.org
Friday 4 November 11
Questions?

                                http://www.adobe.com/gaming
                                        http://labs.adobe.com




                                     http://www.hsharma.com
                                             @hemanthsharma
                       http://www.facebook.com/hemanthsharma



Friday 4 November 11

Multiplatform Game Design & Development

  • 1.
    Multi-platform Game Design & Development Adobe Flash Platform Hemanth Sharma Platform Evangelist, Adobe Systems http://www.hsharma.com @hemanthsharma http://www.facebook.com/hemanthsharma Friday 4 November 11
  • 2.
  • 3.
    Multi-platform Google Android BlackBerry PlayBook Apple iOS Windows Macintosh Linux Friday 4 November 11
  • 4.
    Multi-platform Across devices Richer experience Visibility WHY? More customers Revenue Friday 4 November 11
  • 5.
    Multi-platform Technology Display Resolution Screen Density (DPI) Physical Size Developer Challenges Input Processor & Memory Friday 4 November 11
  • 6.
  • 7.
    The Process Concept Prototype Concept Art Development Testing & Optimization Deployment Friday 4 November 11
  • 8.
  • 9.
    Screen Resolution 320 px Phone 480 px Friday 4 November 11
  • 10.
    Screen Resolution 480 px Phone 800 px Friday 4 November 11
  • 11.
    Screen Resolution 640 px Phone 960 px Friday 4 November 11
  • 12.
    Screen Resolution 768 px Tablet 1024 px Friday 4 November 11
  • 13.
    Screen Resolution 800 px Tablet 1280 px Friday 4 November 11
  • 14.
    Screen Resolution 1. Different Resolution 2. Scaling 3. Crop Friday 4 November 11
  • 15.
  • 16.
    Screen Resolution Different Resolution 350 x 350 logo_350.png 600 x 600 logo_600.png Friday 4 November 11
  • 17.
    Screen Resolution Different Resolution 1024 x 768 bg_1024.png 640 x 960 bg_640.png Friday 4 November 11
  • 18.
    Screen Resolution Scaling Friday 4 November 11
  • 19.
    Screen Resolution Scaling Friday 4 November 11
  • 20.
    Screen Resolution Scale Down Scale Up Friday 4 November 11
  • 21.
    Screen Resolution Crop Friday 4 November 11
  • 22.
    Screen Resolution Crop Friday 4 November 11
  • 23.
    Graphics Vector Graphics Raster (Bitmap) Graphics Friday 4 November 11
  • 24.
  • 25.
    Screen DPI Virtually Desire HD iPhone 4 640 px 480 px 960 px 800 px Friday 4 November 11
  • 26.
    Screen DPI Physically Desire HD iPhone 4 640 px 480 px 960 px 800 px Friday 4 November 11
  • 27.
    Screen DPI Physically Desire HD iPhone 4 480 px 640 px 800 px 960 px Friday 4 November 11
  • 28.
    Screen DPI Physically Desire HD iPhone 4 480 px 640 px 1 inch 240 px 1 inch 326 px 240 px 326 px 800 px 960 px Friday 4 November 11
  • 29.
    Screen DPI Device Resolution DPI Apple iPhone 4S 640 x 960 326 HTC Desire HD 480 x 800 240 Apple iPad 768 x 1024 132 Samsung Galaxy 10.1 Tab 800 x 1280 149 BlackBerry PlayBook 600 x 1024 192 Friday 4 November 11
  • 30.
    Screen DPI Content Scaling for Virtual Size object.width = n; Friday 4 November 11
  • 31.
    Screen DPI Content Scaling for Physical Size object.width = flash.Capabilities.screenDPI * physicalSize; Friday 4 November 11
  • 32.
  • 33.
    Input Keyboard Mouse Multi-touch Gestures Accelerometer Microphone Camera Friday 4 November 11
  • 34.
    Keyboard import flash.events.KeyboardEvent; stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown_handler); protected function keyDown_handler(event:KeyboardEvent):void { trace(event.keyCode); } Friday 4 November 11
  • 35.
    Mouse import flash.events.MouseEvent; stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown_handler); Friday 4 November 11
  • 36.
    Multitouch import 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); } protected function onTouchBegin(event:TouchEvent):void { trace(event.touchPointID); } Friday 4 November 11
  • 37.
    Multitouch Gestures import 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); } protected function onRotate(event:TransformGestureEvent):void { trace(event.rotation); } protected function onZoom(event:TransformGestureEvent):void { trace(event.scaleX + ", " + event.scaleY); } Friday 4 November 11
  • 38.
    Accelerometer import 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); trace(event.accelerationY); trace(event.accelerationZ); } Friday 4 November 11
  • 39.
    Input Accelerometer Check or Multitouch/Gestures Check Keyboard Fallback or Mouse Fallback Friday 4 November 11
  • 40.
  • 41.
    Technology Java Objective-C C or others Friday 4 November 11
  • 42.
    Technology .apk .bar .ipa Friday 4 November 11
  • 43.
    Technology Adobe Flash Platform .apk .bar .ipa Friday 4 November 11
  • 44.
    Technology DEMO Friday 4 November 11
  • 45.
    Game Engines -2D • Flixel (http://flixel.org/) • FlashPunk (http://flashpunk.net/) • PushButton (http://pushbuttonengine.com/) Friday 4 November 11
  • 46.
    Game Engines -Isometric • AS3 ISO Lib (http://code.google.com/p/as3isolib/) • TheoWorlds (http://www.theoworlds.com/) Friday 4 November 11
  • 47.
    Game 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/) Friday 4 November 11
  • 48.
    Multiplayer / Multiuser P2P Socket & SocketServer Friday 4 November 11
  • 49.
    3D & GPU Stage 3D (Molehill) http://alternativaplatform.com/en/demos/maxracer/ Starling Framework http://www.starling-framework.org Friday 4 November 11
  • 50.
    Questions? http://www.adobe.com/gaming http://labs.adobe.com http://www.hsharma.com @hemanthsharma http://www.facebook.com/hemanthsharma Friday 4 November 11