Developing a Cross Platform Game with Java & HTML5

787 views
701 views

Published on

Do you want to create a cross-platform game and you don't want to die developing for different native platforms? In this session you will learn how to build a successful game that runs on any device taking advantage of the cross-platform capabilities of HTML 5. GameDuell’s HTML5 Game Architect Josep Prat will deliver a bottom-up journey from the backend strategies backed up by Java, to the architectural design of the HTML 5 client. Starting by defining what is true cross-platform architecture he will proceed to discuss the available technologies and their advantages and restrictions. From websockets, over long polling, CSS 3 transformations to protocols different aspects of an efficient and lean development process will be introduced by him. Josep will also explain how to structure a cross-platform project in the correct layers and conclude his talk with a live demo of a GameDuell prototype to showcase an efficient approach for a hands-on usage in efficient development projects.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
787
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Developing a Cross Platform Game with Java & HTML5

  1. 1. © GameDuell 2013 Developing a Cross Platform Game with Java and HTML5 Josep Prat – josep.prat@gameduell.de - @jlprat
  2. 2. © GameDuell 2013 1. What is Cross Platform? 2. Building Cross Platform Games 3. Building the HTML 5 Client 4. Live Demo 5. Q & A Agenda
  3. 3. © GameDuell 2013 The Mission: Play the same game across several platforms
  4. 4. © GameDuell 2013 Make a Cross Platform Game! You are the new architect of GameDuell and the management has a new task for you:
  5. 5. © GameDuell 2013 What is Cross Platform?
  6. 6. © GameDuell 2013 What is Cross Platform? Deliver the best experience to all players: Different flavor for the same game Interaction between platforms Keep the game logic in one place Some examples: Bubble Speed, Belote...
  7. 7. © GameDuell 2013 Challenge Accepted! Let’s introduce the GameDuell Team
  8. 8. © GameDuell 2013 Bringing people together to have a good time with games - Wherever, whenever!
  9. 9. © GameDuell 2013 Key Facts  Founded in 2003  Over 210 team members  More than 125 million registered players  Over 70 games in 7 languages  500 million page impressions per month  Tech Talks with technology experts
  10. 10. © GameDuell 2013 Team Structure  Scrum teams  Product based  Specialists in many languages • Java • Flash • iOS / Android SDK • HTML5
  11. 11. © GameDuell 2013 Let's Start Building a Cross Platform Game!
  12. 12. © GameDuell 2013 Architecture Overview
  13. 13. © GameDuell 2013 Considerations  Security First  Thin Client  Fat Server  Separate Game and Transport Protocol
  14. 14. © GameDuell 2013 Security First  Design your software with security in mind  Don't expose any of the internals  Don't base your security on obfuscation  Don't leave any debug flags live!  Don't trust the clients
  15. 15. © GameDuell 2013 Hacks - Spoofing Pretend being somebody else
  16. 16. © GameDuell 2013 Hacks – Faking Data Client lies and server doesn't validate the input
  17. 17. © GameDuell 2013 Fat Server  Add all game logic in the server  Contains any logic shared among clients  Take care of timeouts  Do a handshake and mark your clients  Again: don't trust your clients!
  18. 18. © GameDuell 2013 How do we build a Game Sever?  Java based Game Server  Drools (rule engine) defining the game logic  More readable  Speed and Scalability  Declarative programming
  19. 19. © GameDuell 2013 Protocols  Separate Game protocol from Transport protocol  Provide everything the client needs to show the action (no state needed on clients)  Use some serializable format i.e. JSON  Think about rescue pills
  20. 20. © GameDuell 2013 What About the Game Client?
  21. 21. © GameDuell 2013 Architecture Overview
  22. 22. © GameDuell 2013 KISS  Keep It Simple, Stupid!  Absolutely reactive  No main loop  Separate control from view  No game logic
  23. 23. © GameDuell 2013 Benefits of Layers  Each layer is more concise  The rendering can be changed without affecting the game  The game is defined only in the controllers
  24. 24. © GameDuell 2013 Benefits of Being Reactive  No loops  More efficient  Use RequestAnimationFrame  Simplified logic
  25. 25. © GameDuell 2013 Which Technology Can We Use?
  26. 26. © GameDuell 2013 WRITE ONCE Use anywhere
  27. 27. © GameDuell 2013 What is HTML 5?  Set of APIs  Standardized by W3C  5th revision of the standard (HTML)  Still in progress  Different key players (with different interests)  Buzzword since “Thoughts on Flash”
  28. 28. © GameDuell 2013 A Standard, However...  Not implemented completely everywhere  Different quality of implementation in each browser  Behavior is too many times browser specific
  29. 29. © GameDuell 2013 This Leads to the Following Challenges  Avoid Polyfills  Deliver same (or the closest possible) experience on all devices/platforms  Keep performance up  Manage different device sizes
  30. 30. © GameDuell 2013 Compared to Native Apps  Cross Platform by definition  Less specialization needed (JS + CSS)  Easy integration in existing platforms  No need for Stores, you are directly live
  31. 31. © GameDuell 2013 Compared to Native Apps  Cross Platform by definition  Less specialization needed (JS + CSS)  Easy integration in existing platforms  No need for Stores, you are directly live  Less control  Far away from the hardware  No Integration with the device
  32. 32. © GameDuell 2013 Key Technologies in Hand  New HTML Markup  CSS3  Geolocalization  Canvas & WebGL  WebStorage  WebSockets  Video
  33. 33. © GameDuell 2013 WebSockets
  34. 34. © GameDuell 2013 WebSockets  Client → Server communication  Enable Server → Client communication  Avoids polling from client  Old Browsers don't support it  Less load on servers  More performant
  35. 35. © GameDuell 2013 Alternative: Long Polling  Client → Server communication  Pseudo Server → Client communication  Does long lasting polls to the server  More stress on both client and server
  36. 36. © GameDuell 2013 CSS 3 Transformations Available methods are: rotate, skew-x skew-y, scale and translate Or all at once with matrix: • Take all 4 coordinates of a div • Multiply each one with the matrix • The result of each operation is the new coordinate
  37. 37. © GameDuell 2013 A Few Months Later...
  38. 38. © GameDuell 2013 HTML5 version at GameDuell available for mobile devices  Full sync with desktop accounts  Cross-platform play with desktop users
  39. 39. © GameDuell 2013 Q & A
  40. 40. © GameDuell 2013 Stay in Touch: inside.gameduell.de www.techtalk-berlin.de Further Information

×