Playing between the clouds

Daniele MontagniDavide Cerbo

Stefano Linguerri

Friday, May 7, 2010

Who we are

http://exmachina.ch

Davide Cerbo

http://pronetics.it

Daniele MontagniStefano Linguerri

http://www.juglugano.ch http://www.jugroma.it

Friday, May 7, 2010

Gameset:Tankattack is a turn-based strategy game. The setting is a fixed map and player can control 2 tanks each game:

Goal of the game:win the match by destroying all against player's tanks

Gameplay

Friday, May 7, 2010

Gameplay

Rules:

•Map

•it has fixed size of 480*320 pixels. It is virtually divided in 12*8 squares

•it is not scrollable

•Movements

•each tank can move 2 squares every turn

•tanks can move freely into these squares except regions that has mountains and where are the opposite tanks.

•Damages

•each tank has 2000 points of stamina

•every shoot from the enemy cause 500 points of damage

•when a tank reach 0 points of stamina is delete from the screen

•a tank can shoot when is 2 squares far from the enemy.

•Who destroy both of enemy's tanks win the game

Friday, May 7, 2010

Multiplayer / Multiplatform

Friday, May 7, 2010

Google App Engine

Friday, May 7, 2010

Everybody can play

• A successful game must have a huge players number• Players wants to interact to each other• Players prefers human enemy rather than CPU

We must scale!

• How?• Horizontally? No, thanks. We do not want limits• Vertically? uhm...

Friday, May 7, 2010

Dilemma: Cluster? Cloud? Grid?

Cloud:

• More requests number• Small tasks

Grid:

• Less requests number• Large tasks

Many SERVERSwork for YOU

Friday, May 7, 2010

...found companies that offers Cloud or Grid Computing services

Searching on Google and...

Friday, May 7, 2010

If I want to make it by my own?

Friday, May 7, 2010

...but we can’t do it !

Friday, May 7, 2010

Why Google App Engine?• System Administration for dummies• Cheap, pay as much as the application grow up• Good installed software like Memcache, Bigtable etc...• Powerful Administration console with logs, access statistics,

application management and so on...

• JAVA, PYTHON and JVM based languages (Scala, Groovy, etc...) compatibility

• Multi-standard Java compatibility• No OS, one less problem.• Many limitations, but can be a great opportunity to write

scalable and balanced applications

Friday, May 7, 2010

How it works

Friday, May 7, 2010

Standard?

Friday, May 7, 2010

Limitations• HTTP request must be done within 30 seconds, otherwise

GAE throws a DeadlineExceededException

• No socket

• No threads

• Only 1000 file per application

• First requests can be slowly

Friday, May 7, 2010

Why?• More than 30 seconds can cause user sleep (and servers will

be blocked)

• More security is not enough

• Threads are cool, but tasks are much more manageable

• Sometimes you have to be happy with what you have

• Next slide...

Friday, May 7, 2010

Is first request slow?Dinamic Server allocation

Every new request will be forwarded to a new server only if the existing ones can't process it.

This is called “automatic load balancing” and cause slowdown

But...you can have as much more server as network traffic you produce!

Friday, May 7, 2010

Signup & Web Console

Friday, May 7, 2010

Daily free resources• 1,300,000 http requests• In/Out Bandwidth 1 Gb• CPU Time 6.5 CPU-h• Data Storage 1 Gb• Emails 7,000• Recipients emailed 2,000• Admins emailed 5,000• Url fetch 657,000• XMPP CALLS 657,000• Image Manipulation 864,000• Calls to Memcache 8,600,000• Tasks invocation 100,000• and a lot more...

Friday, May 7, 2010

Price list• Outgoing Bandwidth...........$0.12/Gb• Incoming Bandwidth...........$0.10/Gb• CPU Time.....................$0.10/h• Stored Data..................$0.15/Gb• Recipients Emailed.........$0.0001/rec

(Excluding taxes)

Choose a billable quotas to prevent the cost of the application from exceeding your budget

Friday, May 7, 2010

Who use GAE?

Friday, May 7, 2010

Tools• Eclipse • Maven • Spring• Spring MVC

Friday, May 7, 2010

XMPPExtensible Messaging and Presence Protocol (XMPP) is an open, XML-based protocol originally aimed at near-real-

time, extensible instant messaging (IM) and presence information, but now expanded into the broader realm of

message-oriented middleware.

App Engine applications can send and receive instant messages to and from users of XMPP-compatible instant

message services, including Google Talk

Friday, May 7, 2010

Pull VS. pushPull

Push

Friday, May 7, 2010

Game ProtocolThe game engine is based on a protocol comunication built on xmpp

Friday, May 7, 2010

XMPPProblem

Every chat client (pigdin, empathy, etc...) can interact with our game, how can avoid it?

Solution

• Messages will be delivered in a non-conventional format, so common clients will refuse it.

• Messages will be sent using a specified resource string

• Messages that has no resource assigned from server will be rejected

Friday, May 7, 2010

XMPP and GAE• Add this code at appengine-web.xml file:<inbound-services> <service>xmpp_message</service> </inbound-services>

• We create a Servlet listening on a URL:

http://???.appspot.com/_ah/xmpp/message/chat/

• Now we can receive messages:

XMPPService xmpp = XMPPServiceFactory.getXMPPService();Message message = xmpp.parseMessage(req);JID fromJid = message.getFromJid();String body = message.getBody();

• And we can send messages:

JID j = new JID("example@gmail.com");String msgBody = "a text";Message m = new MessageBuilder().withRecipientJids(j).withBody(msgBody).build();boolean messageSent = false;XMPPService xmpp = XMPPServiceFactory.getXMPPService();if (xmpp.getPresence(j).isAvailable()) { SendResponse status = xmpp.sendMessage(m); messageSent = (status.getStatusMap().get(j) == SendResponse.Status.SUCCESS);}

Friday, May 7, 2010

Task QueueEasy to enqueue

TaskOptions taskOptions = TaskOptions.Builder.url("/start-game");taskOptions.param("roomId", roomId);Queue queue = QueueFactory.getQueue("start-game");queue.add(taskOptions);

• Easy to define a new task queue

<queue-entries>   <queue>       <name>start-game</name>       <rate>20/s</rate> <bucket-size>1</bucket-size>   </queue></queue-entries>

The work to do when the task comes executed must be defined in a servlet

Friday, May 7, 2010

CacheUsing JCache (JSR-107)

public void usingJCache() throws CacheException{    CacheFactory cacheFactory = CacheManager.getInstance().getCacheFactory();    Cache cache = cacheFactory.createCache(new HashMap());    cache.put("key", "value");    cache.get("key");}

Using low level API

public void usingGoogleService() throws CacheException{ MemcacheService memcache = MemcacheServiceFactory.getMemcacheService(); memcache.put("key", "value"); memcache.put("key2", "value2", Expiration.byDeltaSeconds(3000), SetPolicy.ADD_ONLY_IF_NOT_PRESENT); memcache.get("key");}

Friday, May 7, 2010

Authentication

Friday, May 7, 2010

Message Management

Friday, May 7, 2010

Clients communicationThe clients only knows the Google Bot

Friday, May 7, 2010

MessagesGame messages are transported as text enveloped in the body of the xmpp messages.

<message type="chat" id="purple3c8b244a" to="tankattack.player2@gmail.com/23125316" from="tankattack.player1@gmail.com/23517326"> <x xmlns="jabber:x:event"> <composing/> </x> <body>1:1:2:2:2</body> <html xmlns="http://jabber.org/protocol/xhtml-im"> <body xmlns="http://www.w3.org/1999/xhtml">1:1:2:2:2</body> </html> <nos:x value="disabled" xmlns:nos="google:nosave"/> <arc:record otr="false" xmlns:arc="http://jabber.org/protocol/archive"/></message>

Friday, May 7, 2010

Messages TypeType Format Sample

START START:[ROOM_ID]:[PLAYER_NUMBER] START:234523:1

MOVE 1:[XX]:[YY]:[ROTATION] 1:3:7:4

SHOOT 2:[SENDER]:[TARGET]:[DAMAGE] 2:1:3:500

ACK TRUE TRUE:[TANK_ID] TRUE:2

END GAME END:[ROOM_ID]:[PLAYER_LOSER_NUMBER] END:234523:1

Friday, May 7, 2010

TankAttack console

Friday, May 7, 2010

Google accountsAnyone has a Google Account can use your applicationYou must define who is Administrator using web console

Obviously there are a simple API//return the serviceUserService userService = UserServiceFactory.getUserService();//you can create a url to loginuserService.createLoginURL("/...returnUrl...")//or an url to logoutuserService.createLogoutURL("/...returnUrl...")//use standard to retrieve logged userPrincipal user = request.getUserPrincipal();

Friday, May 7, 2010

Links• SpringFramework

http://www.springsource.org/• Maven

http://maven.apache.org/• Maven GAE plugin

http://code.google.com/p/maven-gae-plugin/• GAE Documentation

http://code.google.com/appengine/docs/

Friday, May 7, 2010

iPhone

Friday, May 7, 2010

iPhone: xcode

Friday, May 7, 2010

iPhone: all togheterThe iPhone game client consists of 3 frameworks

Friday, May 7, 2010

iPhone: cocos 2D

The iPhone game client consists of 3 frameworks

Friday, May 7, 2010

iPhone: cocos 2D

easy project setup

Friday, May 7, 2010

iPhone: cocos 2DSome key features:

• Sprites and Sprite Sheets• Effects: Lens, Ripple, Waves, Liquid, Twirl, etc.• Actions (behaviors):

• Trasformation Actions: Move, Rotate, Scale, Jump, etc.• Composable actions: Sequence, Spawn, Repeat, Reverse • Ease Actions: Exp, Sin, Cubic, etc.• Misc actions: CallFunc, OrbitCamera

• Tile Map support• Touch/Accelerometer support• OpenGL ES 1.1 based

Friday, May 7, 2010

iPhone: tiles mapThe game uses a tiled background map

The map was realized with Tiled

Friday, May 7, 2010

Map layersThe map consist of three layer

• Plain layer• Mountains layer• Collision layer

The collision layer is invisible in the game.

Friday, May 7, 2010

iPhone: layers code

CCTMXTiledMap *map;map = [CCTMXTiledMap tiledMapWithTMXFile:@"amap.tmx"];[self addChild:map z:0 tag:1];

CCTMXLayer *layer = [map layerNamed:@"collision"];

Get a tile at a coordinate:

int tileGID = [layer tileGIDAt:ccp(3, 4)];

Friday, May 7, 2010

Get tile at coordinates

CCSprite sprite;*sprite = [[CCSprite alloc] initWithFile:@"sprite.png"];[self addChild: sprite];

Animate a Sprite:

id actionRotate = [CCRotateTo actionWithDuration:1 angle:aNangle];id actionMove= [CCMoveTo actionWithDuration:1 position:aPosition]; [sprite runAction:[CCSequence actions:actionRotate, actionMove, nil]];

Friday, May 7, 2010

iPhone: xmppframework

Create a client to listen messages XMPPClient *xmppClient = [[XMPPClient alloc] init]; [xmppClient setDomain:@"a.chatDomain.xyz"]; [xmppClient setPort:5222]; NSString *jid; jid = [NSString stringWithFormat:@"%@/%@", @"aUserName", @"aResource"]; [xmppClient setMyJID:[XMPPJID jidWithString:jid]];[xmppClient setPassword:@"aPassword"]; [xmppClient setAutoLogin:YES];[xmppClient setAllowsPlaintextAuth:NO];[xmppClient setAutoPresence:YES];[xmppClient setAutoRoster:YES]; [xmppClient addDelegate:aClientDelegate];[xmppClient connect];

xmppframework it's an objective-c implementation fo xmpp protocol

Friday, May 7, 2010

iPhone: XMPPClient Delegate

- (void)xmppClientConnecting:(XMPPClient *)sender

- (void)xmppClientDidConnect:(XMPPClient *)sender

- (void)xmppClientDidNotConnect:(XMPPClient *)sender - (void)xmppClientDidDisconnect:(XMPPClient *)sender - (void)xmppClientDidRegister:(XMPPClient *)sender

- (void)xmppClient:(XMPPClient *)sender didNotRegister:(NSXMLElement *)error - (void)xmppClientDidAuthenticate:(XMPPClient *)sender - (void)xmppClient:(XMPPClient *)sender didNotAuthenticate:(NSXMLElement *)error

- (void)xmppClientDidUpdateRoster:(XMPPClient *)sender - (void)xmppClient:(XMPPClient *)sender didReceiveBuddyRequest:(XMPPJID *)jid

- (void)xmppClient:(XMPPClient *)sender didReceiveIQ:(XMPPIQ *)iq - (void)xmppClient:(XMPPClient *)sender didReceiveMessage:(XMPPClient *)message {

Friday, May 7, 2010

iPhone: links

Links:• cocos 2D: http://www.cocos2d-iphone.org• xmppframework: http://code.google.com/p/xmppframework• Apple Dev Center: http://developer.apple.com/iphone/index.action

Friday, May 7, 2010

Android

Friday, May 7, 2010

Android

• Architecture, frameworks and tools• Code unfolded• Tips and tricks

Friday, May 7, 2010

Android: architecture, tools, frameworks

Architecture and frameworks:

• Android platform: 1.6• Rokon game engine: 1.1.1• Smack libraries: 3.1.0

Tools:

• Android SDK for Mac: 2.1 (r5)• Netbeans: 6.8• Android plugin for netbeans

Friday, May 7, 2010

Android: sdk tools

daniele@Daniele-Montagnis-MacBook~/android-sdk-mac_86/tools$./android Starting Android SDK and AVD Manager...

Create your emulator through Android SDK and AVD manager

Friday, May 7, 2010

Android: create projectCreate "android" type project into Netbeans

That has this structure

...than click "Run" project

Friday, May 7, 2010

Android: emulator & adb

This will run the emulator and deploy

logcat through Netbeans show status:

Friday, May 7, 2010

Android: RokonRokon basics

public class TankAttack extends RokonActivity {public void onCreate() {     createEngine(480, 320, true); }public void onLoad() {    ...    Background background = new TileTextureBackground(atlas, tileloader.getLayers());    ...    Sprite sprite = new Sprite(80, 180, spriteTexture);}public void onLoadComplete() {    rokon.setBackground(background);    rokon.addSprite(sprite);}

Friday, May 7, 2010

Android: smackSmack basics:

ConnectionConfiguration connConfig = new ConnectionConfiguration(host, port, service);XMPPConnection connection = new XMPPConnection(connConfig);connection.login(username, password);

Presence presence = new Presence(Presence.Type.available);connection.sendPacket(presence);xmppClient.setConnection(connection);

Message msg = new Message(to, Message.Type.chat);msg.setBody(text);connection.sendPacket(msg);

Friday, May 7, 2010

Android: tips&tricks• Rokon is under development: things must be

done from scratch! (ex. TileTextureBackground...)

• Android plugin for Netbeans is not stable (build.xml must be modified...)

• For rapid development use Eclipse that is supported by Android community: http://developer.android.com/sdk/eclipse-adt.html#installing

Friday, May 7, 2010

Android: links• Android SDK:

http://developer.android.com/sdk/index.html

• Rokon:http://www.rokonandroid.com

• Smack xmpp:http://www.igniterealtime.org/projects/smack

• Netbeans plugin:http://kenai.com/projects/nbandroid/pages/Install

Friday, May 7, 2010

Types of game

• Cards Game: Poker, Bridge• Classic games: checkers, chess • Tamagotchi like: Pets Society, FishVille

Friday, May 7, 2010

Success Stories:

Puzzle Pirate, Bang! Howdy

Friday, May 7, 2010

Success Stories:

Pet society, WORD challenge, Biggest Brain, Crazy planet

Friday, May 7, 2010

Success Stories:

Farmville, FishVille, Treasure Island, Café World

Friday, May 7, 2010

Types of game

Browser game like: Travian, OGame, hattrick

Friday, May 7, 2010

GAE Based: Neptune’s pride

It's a real time game

Friday, May 7, 2010

What about money?• Playfish: Electronic Arts acquired Playfish for approximately

300$ milion dollars.

• Zynga: last year has earned over 250$ milion dollars.

• Three Rings: Puzzle Pirates takes in approximately $230,000 a month.

...all of them are based on microtransaction

Friday, May 7, 2010

MicrotransactionPlayers can purchase items using "game currency".

To buy "game currency" player use real world money.

Friday, May 7, 2010

Link and resources• How Buddypoke scales on Facebook using GAE

http://highscalability.com/blog/2010/1/22/how-buddypoke-scales-on-facebook-using-google-app-engine.html

• Games on App Engine: An interview with Jay Kyburz, developer for Neptune’s Pridehttp://googleappengine.blogspot.com/2010/04/games-on-app-engine-interview-with-jay.html

• PlayFishhttp://www.playfish.com

• Zyngahttp://www.zynga.com

• ThreeRinghttp://www.threerings.net

• Neptune’s pridehttp://np.ironhelmet.com

• Hattrickhttp://www.hattrick.org

• Travianhttp://www.travian.com

• OGamehttp://www.ogame.org

Friday, May 7, 2010

Special thanksDanc (www.lostgarden.com)

for his free tiles map

http://www.lostgarden.com/2006/07/more-free-game-graphics.html

Android:

Fabio Marinelli for help in Rokon developmenttwitter: http://twitter.com/fmarinelli

Friday, May 7, 2010

ContactsDavide Cerbo

Twitter: http://twitter.com/davide_cerboLinkedin: http://www.linkedin.com/in/davidecerbo

Stefano Linguerri

Twitter: http://twitter.com/eljekoLinkedin: http://www.linkedin.com/in/linguerri

Daniele Montagni

Twitter: http://twitter.com/dmontagniLinkedIn: http://it.linkedin.com/in/danielemontagni

Friday, May 7, 2010

Q&A

Friday, May 7, 2010