Date post: | 22-Apr-2015 |
Category: |
Software |
Upload: | josep-prat |
View: | 358 times |
Download: | 2 times |
© 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