GameLab - Developing Crossplatform Games in HTML5 and Java

transcript

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?

Deliver the best experience to all players

Challenge Accepted!

Let’s introduce the GameDuell Team

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

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"

Player()

Game()

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

Real World Example

rule "Apply 10% discount to orders over US$ 100,00"

$order : Order()

$total : Number( doubleValue > 100 )

from accumulate( OrderItem( order == $order,

$value : value ), sum( $value ) )

# apply discount to $order

The fun part of the game

3. Building the HTML 5 Client

Architecture Overview

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

Geolocation

Canvas & WebGL

WebStorage

WebSockets

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!

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

Further Information

GameLab - Developing Crossplatform Games in HTML5 and Java

Software