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