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.

1. © GameDuell 2013
Developing a Cross Platform Game with Java and HTML5
Josep Prat – josep.prat@gameduell.de - @jlprat

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. © GameDuell 2013
The Mission:
Play the same game across several platforms

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. © GameDuell 2013
What is Cross Platform?

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. © GameDuell 2013
Challenge Accepted!
Let’s introduce the GameDuell Team

8. © GameDuell 2013
Bringing people together to have a good time with games -
Wherever, whenever!

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. © GameDuell 2013
Team Structure
 Scrum teams
 Product based
 Specialists in many languages
• Java
• Flash
• iOS / Android SDK
• HTML5

11. © GameDuell 2013
Let's Start Building a Cross Platform Game!

12. © GameDuell 2013
Architecture Overview

13. © GameDuell 2013
Considerations
 Security First
 Thin Client
 Fat Server
 Separate Game and Transport Protocol

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. © GameDuell 2013
Hacks - Spoofing
Pretend being somebody else

16. © GameDuell 2013
Hacks – Faking Data
Client lies and server doesn't validate the input

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. © 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. © 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. © GameDuell 2013
What About the Game Client?

21. © GameDuell 2013
Architecture Overview

22. © GameDuell 2013
KISS
 Keep It Simple, Stupid!
 Absolutely reactive
 No main loop
 Separate control from view
 No game logic

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. © GameDuell 2013
Benefits of Being Reactive
 No loops
 More efficient
 Use RequestAnimationFrame
 Simplified logic

25. © GameDuell 2013
Which Technology Can We Use?

26. © GameDuell 2013
WRITE ONCE
Use anywhere

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. © GameDuell 2013
A Standard, However...
 Not implemented completely everywhere
 Different quality of implementation in each
browser
 Behavior is too many times browser specific

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. © 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. © 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. © GameDuell 2013
Key Technologies in Hand
 New HTML Markup
 CSS3
 Geolocalization
 Canvas & WebGL
 WebStorage
 WebSockets
 Video

33. © GameDuell 2013
WebSockets

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. © 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. © 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. © GameDuell 2013
A Few Months Later...

38. © GameDuell 2013
HTML5 version at GameDuell available for mobile devices
 Full sync with desktop accounts
 Cross-platform play with desktop users

39. © GameDuell 2013
Q & A

40. © GameDuell 2013
Stay in Touch:
inside.gameduell.de
www.techtalk-berlin.de
Further Information