gamelab - developing crossplatform games in html5 and java
DESCRIPTION
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/TRANSCRIPT
© GameDuell 2014 | Confidential
Developing Games in HTML5 and Java
GameLab BCN – 25 June 2014
Josep Prat – HTML5 Architect & Java Lead Developer - @jlprat
© 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
© GameDuell 2013 | Confidential
1. What is Cross Platform?
© GameDuell 2013 | Confidential
Play the same game across several platforms
© GameDuell 2014 | Confidential
Building a Cross Platform Game!
You are the new architect of GameDuell and
the management has a new task for you:
© GameDuell 2014 | Confidential
What is Cross Platform?
© GameDuell 2014 | Confidential
What is Cross Platform?
Deliver the best experience to all players
© GameDuell 2013 | Confidential
Challenge Accepted!
Let’s introduce the GameDuell Team
© GameDuell 2013
Bringing people together to have a good time with games -
Wherever, whenever!
© 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
© GameDuell 2014 | Confidential
Team Structure
Scrum teams
Product based
Specialists in many languages
© GameDuell 2013 | Confidential
Architecture of the Backend
2. Building Cross Platform Games
© GameDuell 2014 | Confidential
Architecture Overview
© GameDuell 2013 | Confidential
Let's Start Building a Cross Platform Game!
© GameDuell 2014 | Confidential
Security First
Design your software with security in mind
© GameDuell 2014 | Confidential
Security First
Don't expose your internals
© GameDuell 2014 | Confidential
Don't base your security on obfuscation
© GameDuell 2014 | Confidential
Security First
© GameDuell 2014 | Confidential
Security First
DO
NOT
TRUST
THE
CLIENTS
© GameDuell 2014 | Confidential
Fat Server
GAME LOGIC TIMEOUTS
MARK CLIENTS
COMMON LOGIC
© GameDuell 2014 | Confidential
Protocols
Game Protocol != Transport Protocol
Self Contained Messages
Human Readable
“Rescue Pills”
© GameDuell 2013 | Confidential
Hacks - Spoofing
© GameDuell 2013 | Confidential
Hacks – Faking Data
© GameDuell 2013 | Confidential
Cool... But how do you code this?
© 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
© GameDuell 2014 | Confidential
Follow the State Machine
© GameDuell 2014 | Confidential
Hello World!
rule "Hello World Rule"
when
Player()
Game()
then
System.out.println("Hello World!");
end
© 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
© GameDuell 2013 | Confidential
The fun part of the game
3. Building the HTML 5 Client
© GameDuell 2014 | Confidential
Architecture Overview
© GameDuell 2014 | Confidential
KISS
Keep It Simple, Stupid!
Absolutely reactive
No main loop
Separate control from view
No game logic
© GameDuell 2014 | Confidential
Let's get started!
© GameDuell 2014 | Confidential
WRITE ONCEUse anywhere
© GameDuell 2013 | Confidential
But... What exactly is HTML5?
© 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”
© GameDuell 2014 | Confidential
A Standard, However...
© 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
© GameDuell 2014 | Confidential
Compared to Native Apps
Less control
Far away from the hardware
No Integration with the device
© GameDuell 2013 | Confidential
Hey, you didn't explain what is it yet!!
© GameDuell 2014 | Confidential
Key Technologies under HTML5
New HTML Markup
CSS3
Geolocation
Canvas & WebGL
WebStorage
WebSockets
Video
© GameDuell 2014 | Confidential
WebSockets – Talking to the Server
© GameDuell 2014 | Confidential
How Can We Draw the Game?
© 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')
© 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>
© GameDuell 2013 | Confidential
After some development time...
© GameDuell 2014 | Confidential
Live Deploy!
© GameDuell 2013 | Confidential
Q & A
© GameDuell 2013 | Confidential
Stay in Touch:inside.gameduell.dewww.techtalk-berlin.de
Further Information