game design & development
DESCRIPTION
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.TRANSCRIPT
![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