Playing between the clouds - Better Software 2010
6 likes1,363 views
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.
![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](https://image.slidesharecdn.com/presentazione-final-02-100507102839-phpapp01/85/Playing-between-the-clouds-Better-Software-2010-34-320.jpg)
![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](https://image.slidesharecdn.com/presentazione-final-02-100507102839-phpapp01/85/Playing-between-the-clouds-Better-Software-2010-46-320.jpg)
![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](https://image.slidesharecdn.com/presentazione-final-02-100507102839-phpapp01/85/Playing-between-the-clouds-Better-Software-2010-47-320.jpg)
![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](https://image.slidesharecdn.com/presentazione-final-02-100507102839-phpapp01/85/Playing-between-the-clouds-Better-Software-2010-48-320.jpg)
Playing between the clouds - Better Software 2010
- 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 鍖xed 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 鍖xed 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 cant 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 鍖le 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 鍖rst 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 speci鍖ed 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 voidusingJCache()throwsCacheException{ CacheFactory cacheFactory = CacheManager.getInstance().getCacheFactory(); Cache cache = cacheFactory.createCache(newHashMap()); 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()); ... Spritesprite = 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: Neptunes 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 Neptunes 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 Neptunes 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