Approaches for Cross Platfrom Games

Josep Prat / HTML5 Architect / @jlprat

@ Beuth Hochschule - 21.10.2014

Index

  1. What is Cross Platform?
  2. Different Approaches to reach it
  3. The HTML5 way

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 Platfrom?

What is Cross Platfrom?

Deliver the best experience to all players

Challenge Accepted!

Let's introduce the GameDuell Team

GameDuell

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




Key Facts

  • Founded in 2003
  • Over 210 team members
  • More than 125 million players
  • Over 70 games in 7 different languages
  • 500 million page impressions per month
  • Tech Talks with international experts

Team Structure

  • Scrum teams
  • Product based
  • Specialists in many langauges

2. Different Approaches

to build Cross Platform Games

One solution per Platform

And what happens when you find this?

Cross Compilation solutions

The basic idea is developing in a single language, and then cross compile it to any platform you want

HTML5 solution

The game is coded only in HTML5 and reaches all the platforms via a Browser

But...

You can build it the way you prefer, but you still need some common guidelines

Security First

Design your software with SECURITY in mind

Security First

Don't expose your internals

Obfuscation is not the solution

Securit First

Konami Code


B A

Security First



DO

Not

TRUST

THE

CLIENTS

Protocols

  • Game Protocol != Transport Protocol
  • Self Contained Messages
  • Readable
  • "Rescue Pills"

And how do you code the server?

JBoss Drools

  • Developed by JBoss
  • Rule based coding environment
  • Direct integration with Java
  • Readable behavior
  • Enables declarative programming
  • Models a state machine

Hello World!


rule "Boss is killed"
  when
    $boss : Boss()
    $total : Number( doubleValue >= $boss.maxLive )
        from accumulate( Damage( target == $boss,
            $value : value ), sum( $value ) )
  then
    /* boss is killed! */
end

Follow the state machine!

3. The HTML5 way

Where the fun is

Architecture Overview

KISS

  • Keep It Simple, Stupid!
  • Completely reactive
  • Without main loop
  • Separate control from view
  • No game logic

Write Once

Use anywhere

What is exactly HTML5?

  • Set of API's
  • Standardized by W3C
  • 5th revision of the Standard
  • Not yet finalized
  • Buzzword since "Thoughts on Flash"

Despite being a Standard...



Compared to Native applications

  • Cross Platform by definition
  • Less specialization needed
  • You own your own platform
  • No need for Stores
  • Almost no control on the Device
  • 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     HTML5 Semantics Logo
  • CSS3     HTML5 CSS Styling Logo
  • Geolocation     HTML5 Device Access Logo
  • Canvas & WebGL     HTML5 3D Effects Logo
  • Offline Storage     HTML5 Offline Storage Logo
  • WebSockets     HTML5 Connectivity Logo
  • Video     HTML5 Multimedia Logo

New HTML Markup

Loading, please wait
working...

New HTML Markup


Loading, please wait

working...

New HTML Markup

Live

New HTML Markup



    Live

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 - Drawing in the browser

CANVAS - Drawing in the browser

SVG - Another way of drawing

SVG - Another way of drawing


<svg id="swoosh" version="1.1" xmlns="http://www.w3.org/2000/svg">
    
    
</svg>

WebSockets - Talking to the Server

WebSockets - Example


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();

After some time developing...

You have your Cross Platform Site!

www.gameduell.de

Questions?

Wait for it! There is more!

Further Information

Keep in touch:
inside.gameduell.de
www.techtalk-berlin.de