Game design & development

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

?? rent?How? is it diffe ?

Process - Game Design Graphic Design Concept Design Storyboard & Level Design

Process - Game DevelopmentPr ot ot Op yp g stin e tim Te izat ion Deve lopm ent ent eploym D

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 DevicesHandheld 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 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);

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);}

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);}

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);}

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;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 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 Logic Platform Logic

Testing• Accelerometer• Multitouch• Multiple Devices, Screen layouts and sizes

TestingAdobe Device Central CS5.5

Publishing Android BlackBerry 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 - AnaglyphHow is this achieved?

Molehill • What is Molehill? • Why Molehill? • What is needed from end-user?

Molehillhttp://labs.adobe.com/technologies/ﬂashplatformruntimes/incubator/Molehill 2Dhttps://github.com/egreenﬁeld/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 542 Points 282 Points 5.1 kb 3.8 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

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 - 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

http://www.hsharma.com	1776
http://gowdhamanr.blogspot.com	31
http://gowdhamanr.blogspot.in	16
url_unknown	5
http://translate.googleusercontent.com	4
http://gowdhamanr.blogspot.fr	2
http://www.slideshare.net	2
http://feeds.feedburner.com	1
http://static.slideshare.net	1
http://gowdhamanr.blogspot.hk	1

Game design & development

by Hemanth Sharma on Apr 26, 2011

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 1,839

Statistics

Game design & development Presentation Transcript