The document discusses using Google App Engine (GAE) to build a multiplayer online game called Tankattack. It covers various aspects of using GAE including: the GAE architecture and how it scales applications automatically; integrating the game with GAE features like XMPP, task queues, and caching; building clients for the game on iPhone using Cocos2D, XMPPFramework, and communicating with the GAE backend; and various other implementation details.

1. Playing between the
clouds
Daniele Montagni
Davide Cerbo
Stefano Linguerri
Friday, May 7, 2010

2. Who we are
http://exmachina.ch http://pronetics.it
Davide Cerbo Daniele Montagni
Stefano Linguerri
http://www.juglugano.ch http://www.jugroma.it
Friday, May 7, 2010

3. Gameplay
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
Friday, May 7, 2010

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

5. Multiplayer / Multiplatform
Friday, May 7, 2010

6. Google App Engine
Friday, May 7, 2010

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

8. Dilemma: Cluster? Cloud? Grid?
Cloud: Grid:
• More requests number • Less requests number
• Small tasks • Large tasks
Many SERVERS
work for YOU
Friday, May 7, 2010

9. Searching on Google and...
...found companies that offers
Cloud or Grid Computing services
Friday, May 7, 2010

10. If I want to make it by my own?
Friday, May 7, 2010

11. ...but we can’t do it !
Friday, May 7, 2010

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

13. How it works
Friday, May 7, 2010

14. Standard?
Friday, May 7, 2010

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

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

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

18. Signup & Web Console
Friday, May 7, 2010

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

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

21. Who use GAE?
Friday, May 7, 2010

22. Tools
• Eclipse
• Maven
• Spring
• Spring MVC
Friday, May 7, 2010

23. XMPP
Extensible 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

24. Pull VS. push
Pull
Push
Friday, May 7, 2010

25. Game Protocol
The game engine is based on a protocol comunication built
on xmpp
Friday, May 7, 2010

26. XMPP
Problem
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

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

28. Task Queue
Easy 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

29. Cache
Using 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

30. Authentication
Friday, May 7, 2010

31. Message Management
Friday, May 7, 2010

32. Clients communication
The clients only knows the Google Bot
Friday, May 7, 2010

33. Messages
Game 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

34. Messages Type
Type 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

35. TankAttack console
Friday, May 7, 2010

36. Google accounts
Anyone has a Google Account can use your application
You 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

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

38. iPhone
Friday, May 7, 2010

39. iPhone: xcode
Friday, May 7, 2010

40. iPhone: all togheter
The iPhone game client consists of 3 frameworks
Friday, May 7, 2010

41. iPhone: cocos 2D
The iPhone game client consists of 3 frameworks
Friday, May 7, 2010

42. iPhone: cocos 2D
easy project setup
Friday, May 7, 2010

43. iPhone: cocos 2D
Some 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

44. iPhone: tiles map
The game uses a tiled background map
The map was realized with Tiled
Friday, May 7, 2010

45. Map layers
The map consist of three layer
• Plain layer
• Mountains layer
• Collision layer
The collision layer is invisible in the game.
Friday, May 7, 2010

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

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

48. iPhone: xmppframework
xmppframework it's an objective-c
implementation fo xmpp protocol
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];
Friday, May 7, 2010

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

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

51. Android
Friday, May 7, 2010

52. Android
• Architecture, frameworks and tools
• Code unfolded
• Tips and tricks
Friday, May 7, 2010

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

54. Android: sdk tools
Create your emulator through Android SDK and AVD manager
daniele@Daniele-Montagnis-MacBook~/android-sdk-mac_86/tools$./android
Starting Android SDK and AVD Manager...
Friday, May 7, 2010

55. Android: create project
Create "android" type project into Netbeans
That has this structure
...than click "Run" project
Friday, May 7, 2010

56. Android: emulator & adb
This will run the
emulator and deploy
logcat through Netbeans show status:
Friday, May 7, 2010

57. Android: Rokon
Rokon 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

58. Android: smack
Smack 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

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

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

61. Types of game
• Cards Game: Poker, Bridge
• Classic games: checkers, chess
• Tamagotchi like: Pets Society, FishVille
Friday, May 7, 2010

62. Success Stories:
Puzzle Pirate, Bang! Howdy
Friday, May 7, 2010

63. Success Stories:
Pet society, WORD challenge, Biggest Brain, Crazy planet
Friday, May 7, 2010

64. Success Stories:
Farmville, FishVille, Treasure Island, Café World
Friday, May 7, 2010

65. Types of game
Browser game like: Travian, OGame, hattrick
Friday, May 7, 2010

66. GAE Based: Neptune’s pride
It's a real time game
Friday, May 7, 2010

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

68. Microtransaction
Players can purchase items using "game currency".
To buy "game currency" player use real world money.
Friday, May 7, 2010

69. 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 Pride
http://googleappengine.blogspot.com/2010/04/games-on-app-engine-interview-with-jay.html
• PlayFish
http://www.playfish.com
• Zynga
http://www.zynga.com
• ThreeRing
http://www.threerings.net
• Neptune’s pride
http://np.ironhelmet.com
• Hattrick
http://www.hattrick.org
• Travian
http://www.travian.com
• OGame
http://www.ogame.org
Friday, May 7, 2010

70. Special thanks
Danc (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 development
twitter: http://twitter.com/fmarinelli
Friday, May 7, 2010

71. Contacts
Davide Cerbo
Twitter: http://twitter.com/davide_cerbo
Linkedin: http://www.linkedin.com/in/davidecerbo
Stefano Linguerri
Twitter: http://twitter.com/eljeko
Linkedin: http://www.linkedin.com/in/linguerri
Daniele Montagni
Twitter: http://twitter.com/dmontagni
LinkedIn: http://it.linkedin.com/in/danielemontagni
Friday, May 7, 2010

72. Q&A
Friday, May 7, 2010