Download - GameLab - Developing Crossplatform Games in HTML5 and Java

© GameDuell 2014 | Confidential

Developing Games in HTML5 and Java

GameLab BCN – 25 June 2014

Josep Prat – HTML5 Architect & Java Lead Developer - @jlprat


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


1. What is Cross Platform?


Play the same game across several platforms


Building a Cross Platform Game!

You are the new architect of GameDuell and

the management has a new task for you:


What is Cross Platform?


What is Cross Platform?

Deliver the best experience to all players


Challenge Accepted!

Let’s introduce the GameDuell Team

© GameDuell 2013

Bringing people together to have a good time with games -

Wherever, whenever!


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


Team Structure

Scrum teams

Product based

Specialists in many languages


Architecture of the Backend

2. Building Cross Platform Games


Architecture Overview


Let's Start Building a Cross Platform Game!


Security First

Design your software with security in mind


Security First

Don't expose your internals


Don't base your security on obfuscation


Security First


Security First

DO

NOT

TRUST

THE

CLIENTS


Fat Server

GAME LOGIC TIMEOUTS

MARK CLIENTS

COMMON LOGIC


Protocols

Game Protocol != Transport Protocol

Self Contained Messages

Human Readable

“Rescue Pills”


Hacks - Spoofing


Hacks – Faking Data


Cool... But how do you code this?


JBoss Drools

Developed by JBoss

Declarative, rule based, coding environment

Direct integration with Java

Readable behavior

Enables declarative programming

Models a state machine


Follow the State Machine


Hello World!

rule "Hello World Rule"

when

Player()

Game()

then

System.out.println("Hello World!");

end


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


The fun part of the game

3. Building the HTML 5 Client


Architecture Overview


KISS

Keep It Simple, Stupid!

Absolutely reactive

No main loop

Separate control from view

No game logic


Let's get started!


WRITE ONCEUse anywhere


But... What exactly is HTML5?


What is HTML 5?

Set of APIs

Standardized by W3C

5th revision of the standard (HTML)

Still in progress

Buzzword since “Thoughts on Flash”


A Standard, However...


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


Compared to Native Apps

Less control

Far away from the hardware

No Integration with the device


Hey, you didn't explain what is it yet!!


Key Technologies under HTML5

New HTML Markup

CSS3

Geolocation

Canvas & WebGL

WebStorage

WebSockets

Video


WebSockets – Talking to the Server


How Can We Draw the Game?


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')


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>


After some development time...


Live Deploy!


Q & A


Stay in Touch:inside.gameduell.dewww.techtalk-berlin.de

Further Information