Game design & development

Game Design & Development
Adobe Flash Platform

Hemanth Sharma
Platform Evangelist
Adobe Systems Inc.
Twi er: www.twi er.com/hemanthsharma
Facebook: www.facebook.com/hemanth.sharma

?
? rent?
How? is it diffe

?

Process - Game Design

Graphic Design
Concept Design

Storyboard &
Level Design

Process - Game Development
Pr
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 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 Types
Keyboard & 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 Types
Multitouch 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 Types
Multitouch 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 Types
Accelerometer

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

ird Party API

Social API

UI Scaling Logic

Platform Logic

Testing

• Accelerometer

• Multitouch

• Multiple Devices, Screen layouts and sizes

Testing
Adobe 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 - Anaglyph
How is this achieved?

Molehill

• What is Molehill?

• Why Molehill?

• What is needed from end-user?

Molehill

http://labs.adobe.com/technologies/ﬂashplatformruntimes/incubator/

Molehill 2D
https://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 Fla
W 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

Game design & development

More Related Content

Similar to Game design & development

Recently uploaded

Game design & development