Download - Game design & development
![Page 1: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/1.jpg)
Game Design & Development
Adobe Flash Platform
Hemanth SharmaPlatform Evangelist
Adobe Systems Inc.Twi!er: www.twi!er.com/hemanthsharmaFacebook: www.facebook.com/hemanth.sharma
![Page 2: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/2.jpg)
is it different?
?
?
??How
![Page 3: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/3.jpg)
Process - Game Design
Concept Design
Storyboard & Level Design
Graphic Design
![Page 4: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/4.jpg)
Process - Game DevelopmentPrototype
Development
Testi
ng
Optimization
Deployment
![Page 5: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/5.jpg)
The Difference
• Graphic Intensive
• Lot of attention towards Performance
• Full of Life!
• Social
![Page 6: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/6.jpg)
Intelligent Learning
• Analytics
★ What features are used most?
★ Demography - Gender, Regional, etc.
![Page 7: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/7.jpg)
Intelligent Hype
• Promotion and Hype
★ Seasonal / Themed Content
★ Virtual Goods and Currencies
★ In-game Ads
![Page 8: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/8.jpg)
Multiple Platforms
Android
BlackBerry
iOS
Windows
Macintosh
Linux
![Page 9: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/9.jpg)
Why Multiple Platforms?
• Portability
• Rich Experience - Touch, Gestures, Accelerometer, etc.
• Richer Experience - Interconnect devices for better gameplay
![Page 10: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/10.jpg)
Why Multiple Platforms?
• More customers
• Visibility across market places
• Money hai to....?
![Page 11: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/11.jpg)
Multiple Devices
Handheld Devices Personal Computers Tablets Other Devices
![Page 12: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/12.jpg)
Multiple Languages/Tools
• Android - Java
• iOS - Objective C
• Desktop - Objective C, Java, Multiple
• Testing Environment
• The way you deploy/package
![Page 13: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/13.jpg)
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
![Page 14: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/14.jpg)
Input Types
• Keyboard + Mouse
• Touch Interface - Multitouch and Gestures
• Accelerometer
• Joystick
• Augmented Reality / Gesture Recognition
![Page 15: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/15.jpg)
Input TypesKeyboard & Mouse
import 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);
![Page 16: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/16.jpg)
Input TypesMultitouch Input
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);
}
![Page 17: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/17.jpg)
Input TypesMultitouch 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);
}
function onRotate(event:TransformGestureEvent):void { trace(event.rotation);}function onZoom(event:TransformGestureEvent):void { trace(event.scaleX + ", " + event.scaleY);}
![Page 18: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/18.jpg)
Input TypesAccelerometer
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 + ", " + event.accelerationY + ", " + event.accelerationZ);}
![Page 19: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/19.jpg)
Augmented Reality
• FlAR Toolkit for ActionScript 3.0http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
DEMO!
![Page 20: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/20.jpg)
Other Challenges
• Layout - UI, Graphics, Front-end logic
• Performance - Optimization for Memory, Processor, etc.
![Page 21: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/21.jpg)
LayoutLiquid Layout in pure ActionScript 3.0
import 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}
![Page 22: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/22.jpg)
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!
![Page 23: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/23.jpg)
Content Scaling for Physical Size
Capabilities.screenDPI * (physicalSize) = Same size on any screen!
![Page 24: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/24.jpg)
Content Scaling for Virtual Size
![Page 25: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/25.jpg)
Content Scaling for Games
• Load bitmap sprites based on Screen DPI
• Scaling is not everything!
![Page 26: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/26.jpg)
Keep it separate
CORE LOGIC
Social API
"ird Party API
UI Scaling Logic
Platform Logic
![Page 27: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/27.jpg)
Testing
• Accelerometer
• Multitouch
• Multiple Devices, Screen layouts and sizes
![Page 28: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/28.jpg)
TestingAdobe Device Central CS5.5
![Page 29: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/29.jpg)
Publishing
Android
BlackBerry
iOS
Windows
Macintosh
Linux
![Page 30: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/30.jpg)
Publishing
Android
BlackBerry
iOS
Windows
Macintosh
Linux
![Page 31: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/31.jpg)
Publishing
BlackBerry
Android
iOS
Windows
Macintosh
Linux
![Page 32: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/32.jpg)
Publishing
BlackBerry
Android
iOS
Windows
Macintosh
Linux
![Page 33: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/33.jpg)
Publishing
BlackBerry
Android
iOS
Windows
Macintosh
Linux
![Page 34: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/34.jpg)
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
![Page 35: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/35.jpg)
3 Dimentional - Demo
• Stereoscopic Games
• Realtime 3D Rendering (Hardware Accelerated)
![Page 36: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/36.jpg)
3 Dimentional - Anaglyph
How is this achieved?
![Page 37: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/37.jpg)
Molehill
• What is Molehill?
• Why Molehill?
• What is needed from end-user?
![Page 38: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/38.jpg)
Molehill
http://labs.adobe.com/technologies/flashplatformruntimes/incubator/
Molehill 2Dhttps://github.com/egreenfield/M2D
![Page 39: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/39.jpg)
Multiplayer
• Socket Server - AIR 2 SocketServer Class
• Peer to Peer - AIR 2.5 P2P
![Page 40: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/40.jpg)
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
![Page 41: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/41.jpg)
Optimization Tips• Keep as less vector points as possible in the artwork
282 Points3.8 kb
542 Points5.1 kb
![Page 42: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/42.jpg)
Optimization Tips
• Use only if absolutely necessary (for Mobile Content) –
★ Filters
★ Blend Modes
★ Transparency
★ Perspective Distortion
![Page 43: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/43.jpg)
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
![Page 44: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/44.jpg)
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.
![Page 45: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/45.jpg)
Publishing
• Publishing to different/multiple Market places
★ Adobe InMarket
★ Intel AppUp
![Page 46: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/46.jpg)
• Need to be connected!
• Communication with the back-end
• Optimization of Graphics
• Third Party API
Social Games
![Page 47: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/47.jpg)
Adobe Flash?
?
?
??Why
![Page 48: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/48.jpg)
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.)
![Page 49: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/49.jpg)
Flash Builder 4.5
• 25+ Coding Enhancement Features
• On-Device Debugging for Mobile Content
• Easy testing/deployment on Devices
![Page 50: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/50.jpg)
ActionScript 3.0 API
• Device Capabilities - Accelerometer, Geolocation, Multitouch Input, Gestures
• Smart Layout / Liquid Graphics
• Multi-density Authoring
![Page 51: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/51.jpg)
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)
![Page 52: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/52.jpg)
Thirdparty Engines - 2D
• Flixel (http://flixel.org/)
• FlashPunk (http://flashpunk.net/)
• PushButton (http://pushbuttonengine.com/)
![Page 53: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/53.jpg)
Thirdparty Engines - Isometric
• AS3 ISO Lib (http://code.google.com/p/as3isolib/)
• TheoWorlds (http://www.theoworlds.com/)
![Page 54: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/54.jpg)
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/)
![Page 55: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/55.jpg)
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
![Page 56: Game design & development](https://reader034.vdocuments.mx/reader034/viewer/2022050817/55388e1a4a7959f66c8b4762/html5/thumbnails/56.jpg)
Thank you