Slides from the talk "DEVELOPING A CROSS-PLATFORM GAME WITH JAVA AND HTML5" done by Josep Prat at the GameLab BCN. The talk explains how to build a crossplatform game in a scalable and secure way. It starts explaining how the backend of the games are done at GameDuell and finishes explaining the architecture and some relevant decisions of the HTML5 client. About the conference: http://gamelab.es/2014/en/

1. © GameDuell 2014 |
Confidential
Developing Games in HTML5 and Java
GameLab BCN – 25 June 2014
Josep Prat – HTML5 Architect & Java Lead Developer - @jlprat

2. © GameDuell 2014 |
Confidential
Table of contents. What to expect?
1. What is Cross Platform?
2. Building Cross Platform Games
3. Building the HTML 5 Client
4. Q & A

3. © GameDuell 2013 |
Confidential
1. What is Cross Platform?

4. © GameDuell 2013 |
Confidential
Play the same game across several platforms

5. © GameDuell 2014 |
Confidential
Building a Cross Platform Game!
You are the new architect of GameDuell and
the management has a new task for you:

6. © GameDuell 2014 |
Confidential
What is Cross Platform?

7. © GameDuell 2014 |
Confidential
What is Cross Platform?
Deliver the best experience to all players

8. © GameDuell 2013 |
Confidential
Challenge Accepted!
Let’s introduce the GameDuell Team

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

10. © GameDuell 2014 |
Confidential
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

11. © GameDuell 2014 |
Confidential
Team Structure

Scrum teams

Product based

Specialists in many languages

12. © GameDuell 2013 |
Confidential
Architecture of the Backend
2. Building Cross Platform Games

13. © GameDuell 2014 |
Confidential
Architecture Overview

14. © GameDuell 2013 |
Confidential
Let's Start Building a Cross Platform Game!

15. © GameDuell 2014 |
Confidential
Security First
Design your software with security in mind

16. © GameDuell 2014 |
Confidential
Security First
Don't expose your internals

17. © GameDuell 2014 |
Confidential
Don't base your security on obfuscation

18. © GameDuell 2014 |
Confidential
Security First

19. © GameDuell 2014 |
Confidential
Security First
DO
NOT
TRUST
THE
CLIENTS

20. © GameDuell 2014 |
Confidential
Fat Server
GAME
LOGIC
TIMEOUTS
MARK
CLIENTS
COMMON
LOGIC

21. © GameDuell 2014 |
Confidential
Protocols

Game Protocol != Transport Protocol

Self Contained Messages

Human Readable

“Rescue Pills”

22. © GameDuell 2013 |
Confidential
Hacks - Spoofing

23. © GameDuell 2013 |
Confidential
Hacks – Faking Data

24. © GameDuell 2013 |
Confidential
Cool... But how do you code this?

25. © GameDuell 2014 |
Confidential
JBoss Drools

Developed by JBoss

Declarative, rule based, coding environment

Direct integration with Java

Readable behavior

Enables declarative programming

Models a state machine

26. © GameDuell 2014 |
Confidential
Follow the State Machine

27. © GameDuell 2014 |
Confidential
Hello World!
rule "Hello World Rule"
when
Player()
Game()
then
System.out.println("Hello World!");
end

28. © GameDuell 2014 |
Confidential
Real World Example
rule "Apply 10% discount to orders over US$ 100,00"
when
$order : Order()
$total : Number( doubleValue > 100 )
from accumulate( OrderItem( order == $order,
$value : value ), sum( $value ) )
then
# apply discount to $order
end

29. © GameDuell 2013 |
Confidential
The fun part of the game
3. Building the HTML 5 Client

30. © GameDuell 2014 |
Confidential
Architecture Overview

31. © GameDuell 2014 |
Confidential
KISS

Keep It Simple, Stupid!

Absolutely reactive

No main loop

Separate control from view

No game logic

32. © GameDuell 2014 |
Confidential
Let's get started!

33. © GameDuell 2014 |
Confidential
WRITE ONCE
Use anywhere

34. © GameDuell 2013 |
Confidential
But... What exactly is HTML5?

35. © GameDuell 2014 |
Confidential
What is HTML 5?

Set of APIs

Standardized by W3C

5th revision of the standard (HTML)

Still in progress

Buzzword since “Thoughts on Flash”

36. © GameDuell 2014 |
Confidential
A Standard, However...

37. © GameDuell 2014 |
Confidential
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

38. © GameDuell 2014 |
Confidential
Compared to Native Apps
 Less control
 Far away from the hardware
 No Integration with the device

39. © GameDuell 2013 |
Confidential
Hey, you didn't explain what is it yet!!

40. © GameDuell 2014 |
Confidential
Key Technologies under HTML5

New HTML Markup

CSS3

Geolocation

Canvas & WebGL

WebStorage

WebSockets

Video

41. © GameDuell 2014 |
Confidential
WebSockets – Talking to the Server

42. © GameDuell 2014 |
Confidential
How Can We Draw the Game?

43. © GameDuell 2014 |
Confidential
New Style - CSS3
#example.red.box {
background-color: red;
width: 200px;
height: 200px;
}
.rotate {
-webkit-transform: perspective( 400px ) rotateY( 30deg );
-webkit-transition: all 3s;
}
<!-- ....................... -->
<div id=”example” class=”red box”></div>
<!-- …................... -->
document.getElementById('example').classList.toggle('rotate')

44. © GameDuell 2014 |
Confidential
Drawing in the Browser
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var r = 90;
ctx.beginPath();
ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
ctx.lineWidth = 8;
ctx.strokeStyle = 'blue';
ctx.stroke();
</script>

45. © GameDuell 2013 |
Confidential
After some development time...

46. © GameDuell 2014 |
Confidential
Live Deploy!

47. © GameDuell 2013 |
Confidential
Q & A

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