Game design & development
-
Upload
hemanth-sharma -
Category
Design
-
view
5.990 -
download
2
description
Transcript of Game design & development
Game Design & Development
Adobe Flash Platform
Hemanth SharmaPlatform Evangelist
Adobe Systems Inc.Twi!er: www.twi!er.com/hemanthsharmaFacebook: www.facebook.com/hemanth.sharma
is it different?
?
?
??How
Process - Game Design
Concept Design
Storyboard & Level Design
Graphic Design
Process - Game DevelopmentPrototype
Development
Testi
ng
Optimization
Deployment
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 Ads
Multiple Platforms
Android
BlackBerry
iOS
Windows
Macintosh
Linux
Why Multiple Platforms?
• Portability
• Rich Experience - Touch, Gestures, Accelerometer, etc.
• Richer Experience - Interconnect devices for better gameplay
Why Multiple Platforms?
• More customers
• Visibility across market places
• Money hai to....?
Multiple Devices
Handheld Devices Personal Computers Tablets Other Devices
Multiple Languages/Tools
• Android - Java
• iOS - Objective C
• Desktop - Objective C, Java, Multiple
• Testing Environment
• The way you deploy/package
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
Input Types
• Keyboard + Mouse
• Touch Interface - Multitouch and Gestures
• Accelerometer
• Joystick
• Augmented Reality / Gesture Recognition
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);
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);
}
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);}
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);}
Augmented Reality
• FlAR Toolkit for ActionScript 3.0http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
DEMO!
Other Challenges
• Layout - UI, Graphics, Front-end logic
• Performance - Optimization for Memory, Processor, etc.
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}
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!
Content Scaling for Physical Size
Capabilities.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
Social API
"ird Party API
UI Scaling Logic
Platform Logic
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
BlackBerry
Android
iOS
Windows
Macintosh
Linux
Publishing
BlackBerry
Android
iOS
Windows
Macintosh
Linux
Publishing
BlackBerry
Android
iOS
Windows
Macintosh
Linux
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
3 Dimentional - Demo
• Stereoscopic Games
• Realtime 3D Rendering (Hardware Accelerated)
3 Dimentional - Anaglyph
How is this achieved?
Molehill
• What is Molehill?
• Why Molehill?
• What is needed from end-user?
Molehill
http://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 number of nodes for Vectors
• Use opaque background for texts
• Experiment with Anti-aliasing options for text
Optimization Tips• Keep as less vector points as possible in the artwork
282 Points3.8 kb
542 Points5.1 kb
Optimization Tips
• Use only if absolutely necessary (for Mobile Content) –
★ Filters
★ Blend Modes
★ Transparency
★ Perspective Distortion
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
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.
Publishing
• Publishing to different/multiple Market places
★ Adobe InMarket
★ Intel AppUp
• Need to be connected!
• Communication with the back-end
• Optimization of Graphics
• Third Party API
Social Games
Adobe Flash?
?
?
??Why
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.)
Flash Builder 4.5
• 25+ Coding Enhancement Features
• On-Device Debugging for Mobile Content
• Easy testing/deployment on Devices
ActionScript 3.0 API
• Device Capabilities - Accelerometer, Geolocation, Multitouch Input, Gestures
• Smart Layout / Liquid Graphics
• Multi-density Authoring
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)
Thirdparty Engines - 2D
• Flixel (http://flixel.org/)
• FlashPunk (http://flashpunk.net/)
• PushButton (http://pushbuttonengine.com/)
Thirdparty Engines - Isometric
• AS3 ISO Lib (http://code.google.com/p/as3isolib/)
• TheoWorlds (http://www.theoworlds.com/)
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/)
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
Thank you