Jocs en HTML5 i Java

Josep Prat / HTML5 Architect and Java Lead Developer / @jlprat

Índex

  1. Què és Multiplataforma?
  2. Construint el Backend
  3. Construint el Client
  4. Live Demo!
  5. Preguntes

1. Què és Multiplataforma?

Jugar el mateix joc en diverses plataformes

Contruint un joc multiplataforma

Ets el nou arquitecte de GameDuell i l'equip de direcció té una nova tasca per tu:

Què és Multiplataforma?

Què és Multiplataforma?

Proporcionar la millor experiència a tots els jugadors

Repte acceptat!

Anem a conèixer l'equip de GameDuell

GameDuell

Bringing people together to have good times with games - Wherever, whenever!




Dades clau

  • Fundada el 2003
  • Més de 210 treballadors
  • Més de 125 milions de jugadors
  • Més de 70 jocs en 7 idiomes diferents
  • 500 milions de visites per mes
  • Tech Talks amb experts mundials

Estructura dels equips

  • Scrum
  • Centrats en Producte
  • Especialistes en diversos llenguatges

2. Construint jocs multiplataforma

Arquitectura del backend

Visió general de l'arquitectura

Comencem a contruir un joc multiplataforma!

Primer la seguretat

Dissenya la teva aplicació tenint en compte la seguretat

Primer la seguretat

No exposis les parts internes del backend

No basis la teva segurat en l'obfuscació

Primer la serguretat

Konami Code


B A

Primer la seguretat



NO

CONFIÏS

EN

ELS

CLIENTS

Servidor pesat

Protocols

  • Protocol del joc != Protocol de transport
  • Missatges autoexplicatius
  • Llegibles
  • Missatges de rescat

Hacks - Spoofing

Hacks - Dades falses

Tot això està molt bé, però... Com ho desenvolupes?

JBoss Drools

  • Desenvolupat per JBoss
  • Entorn de programació basat en regles
  • Integració directa amb Java
  • Comportament llegible
  • Permet la programació declarativa
  • Modela una màquina d'estat

Segueix la màquina d'estat!

Hello World!


rule "Hello World Rule"
  when
    Player()
    Game()
  then
    System.out.println("Hello World!");
end
                        

Exemple més realista


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
                    
* Exemple tret de la documentació de JBoss

Construint el client HTML5

La part divertida del joc

Visió general de l'arquitectura

KISS

  • Keep It Simple, Stupid!
  • Completament reactiu
  • Sense bucle principal
  • Separació entre contoladors i vista
  • Sense lògica del joc

Doncs comencem!

Write Once

Use anywhere

Però exactament, què és HTML5?

Què és HTML5

  • Conjunt d'APIs
  • Estandardizat per W3C
  • 5a revisió de l'estàndard
  • Encara en desenvolupament
  • De moda des de "Thoughts on Flash"

Tot i ser un estàndard...



Comparat amb les aplicacions natives

  • Multiplataforma per definició
  • Es necessita menys especialització
  • Fàcil d'integrar en platformes existents
  • No fa falta cap Store
  • Menys control
  • Lluny del maquinari
  • Cap mena d'integració amb el dispositiu

Ei! Encara no has explicat què és!

Tecnologies clau en HTML5

  • Nou Marcat     HTML5 Semantics Logo
  • CSS3     HTML5 CSS Styling Logo
  • Geolocalització     HTML5 Device Access Logo
  • Canvas i WebGL     HTML5 3D Effects Logo
  • Emmagatzemament Web     HTML5 Offline Storage Logo
  • WebSockets     HTML5 Connectivity Logo
  • Video     HTML5 Multimedia Logo

Nou Marcat

Carregant, esperi un moment
working...

Nou Marcat


Carregant, esperi un moment
working...

Nou Marcat

Aquí aniria un conjunt de paraules que tenen sentit en un tot, per exemple un post en un blog, l'ajuda d'un joc... Això va en benefici de la web semàntica

Aquesta és la nostra mascota Fluffy

Nou Marcat


Aquí aniria un conjunt de paraules que tenen sentit en un tot, per exemple un post en un blog, l'ajuda d'un joc... Això va en benefici de la web semàntica

Aquesta és la nostra mascota Fluffy

CSS3 - Fonts


@font-face {
    font-family: 'League Gothic';
    src: url("../../lib/font/league_gothic-webfont.eot");
    src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}
                     

CSS3 - Borders

CSS3 - Borders



CSS3 - Gradients

CSS3 - Gradients



CSS3 Transform


CSS3 Transform




CSS3 Animations

CSS3 Animations



CANVAS - Dibuixant al navegador

CANVAS - Dibuixant al navegador




                    

WebSockets - Parlant amb el servidor

WebSockets - Exemple


var websocket = new Websocket("ws://myserver.com/path/to/connect");
websocket.onopen = function (event) {
//Websocket is fully functional now
};
websocket.onmessage = function (event) {
//Called every time the server sends a message
};
websocket.onerror = function (event) {
//Called when there is an error communicating with the server
}
websocket.onclose = function (event) {
//Called when the connection to the server is closed
}
//to send messages
websocket.send("foo");
//end communication
websocket.close();
                    

Què podem fer utilitzar com a render?

DOM CANVAS
WebGL

Després d'un temps desenvolupant...

Live Demo!

www.gameduell.de

Preguntes?

Més informació

Esteu en contacte:
inside.gameduell.de
www.techtalk-berlin.de