Building Web Games – Glades and Shadows

View Github Repository Open presentation in a new window

jlprat

See all presentation from jlprat

Building Web Games – Glades and Shadows

0 0

building-web-games

This talk will focus on what we could achieve with HTML5 that was not doable some years ago, and at the same time what is still missing and can't be done with HTML5. All of this, in the area of Game Development for both Mobile and Desktop.

On Github jlprat / building-web-games

Building Web Games

Glades and Shadows

Apps World | 2016/04/21 | Josep Prat | GameDuell GmbH | @jlprat

"The journey of a thousand miles begins with a single step."
Lao Tzu

1. Origins

90's - 2000's

Sir Tim Berners-Lee created the first WebPage: http://info.cern.ch/hypertext/WWW/TheProject.html

... and it was responsive!

WWW became popular

  • Javascript was used to validate forms
  • Layouts were made with tables
  • Websites were static (except for blink!)
  • Animations were done with gifs

Mobile Gaming

Native development was the preferred way to deliver games to mobile.

Mobile Browsing

Browsing websites with a mobile was an odyssey: text too small, or it didn't fit to the screen.

Flash reign

When dynamism was needed, Flash was used:

  • Video Players
  • Games
  • Image Galleries
  • Single Page Apps!

HTML5 begins its journey

HTML5 makes its first steps in late 2000s. However, it was not yet seen as a possible successor for Flash.

But then...

2. Present Time

The raise of HTML5

"Not all those who wander are lost."
J.R.R. Tolkien

Thoughts on Flash - Steve Jobs

"... we do not allow Flash on iPhones, iPods and iPads." Full text

Internet Everywhere

Each household owns several devices that are able to browse the Internet.

Flash players kicked out of mobile devices

Android stops having an official flash player.

Major Browsers Support HTML5

But why is this so important?

HTML5 - CSS3

A new version of CSS is out, adding new interesting features:

  • Animations: Keyframes or Transform/Transition
  • Round Borders
  • Gradients
  • Shadows

HTML5 - Canvas and webGL

With the canvas element it was finally possible to replace Flash.

HTML5 - New API's

A new set of API's were added:

  • Local Storage
  • Geolocation
  • DOM Queries
  • WebSockets

Time for a change

It was the time for HTML5 to get the web back!

RWD - It's about sizes

Fixing web browsing on Mobile, a road full of challenges:

  • Same page, or different one?
  • Responsive, or adaptive?
  • PO - GFX - UX - Developer
  • Subtle differences among browsers

Games on HTML5

At that time it was possible to deliver a superior experience to any device running a browser.

Migration Time

At GameDuell, one of the world's largest game communities, we started a journey that some years ago was unimaginable: port our games in HTML5.

That brought up some questions:

  • DOM, Canvas or WebGL?
  • Responsive Web Design applied to Games?
  • Will it perform?

3. There are shadows…

"With great power comes great responsibility."
Uncle Ben - Spiderman

JavaScript

Even if its usage is very widespread, it has some drawbacks:

  • No polymorphism
  • No compiler to help out
  • Single Threaded

Javascript Ecosystem

Because JavaScript would be nothing without it's frameworks and libraries:

  • Unneeded libraries imported
  • Too many libraries / frameworks that do the same
  • Language to solve everything
  • Increase of languages that compile / transpile to JS

Security on Games

Ensuring a fair experience to users is crucial in Games:

  • Easy for users to modify code
  • No easy way to ensure requests are not modified by users
  • Easy to sniff the network
  • Obfuscation and minification is not security

Lose against Native

For the present time, we lose the comparison against native apps. The game is not over, though.

Native apps are still the preferred way for companies to communicate with users on mobile.

It's in our hands

We are responsible to provide better tools to deliver the best web experience overall.

Q & A

Further Information:

Link to Slides

Apps World | 2016/04/21 | Josep Prat | GameDuell GmbH | @jlprat

1
Building Web Games Glades and Shadows Apps World | 2016/04/21 | Josep Prat | GameDuell GmbH | @jlprat