Why Game Developers Should Care About HTML5

Uploaded on


More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. WHY GAME DEVELOPERS SHOULD CARE ABOUT HTML5 SEGANTallinn Summer School, July 2013 Rogier van der Linde & BramusVan Damme Why Game Developers Should Care About HTML5
  • 2. A little bit about ourselves Hi, and welcome to our talk this afternoon!
  • 3. HELLO! Rogier van der Linde Bram(us)Van Damme We are Rogier van der Linde and Bramus Van Damme and ...
  • 4. HELLO! Lecturers WebBelgium We’re from Belgium, that’s a tiny country right there. In Belgium we work as Lecturers ICT at the Technical University KaHo Sint-Lieven and are responsible for all web-related courses. Roughly translated: we’re geeks. We love a good chunk of code.
  • 5. Today, we’re here to talk about HTML5 and why you should consider it an option when it comes to developing games.
  • 6. Who here knows this application? Yes, it’s Adobe Flash. Flash used to be the go-to-platform if you were about to create a game back in the day.
  • 7. The evolution from Flash to HTML5 Nowadays that’s different though: HTML5 is taking (and already has taken?) over that role. There are a few reasons for this, we’ll highlight 3.
  • 8. Reason #1:The insecurity of Flash
  • 9. Who here recognizes the picture? It’s a picture taken at the inauguration of the previous pope (Pope Benedictus XVI), which happened in 2005.
  • 10. Now, here’s is a picture of the inauguration of the current pope (Pope Franciscus I), taken in 2013. The contrast with the previous picture couldn’t be bigger: In the 2005 photo you can only see 2 cellphones; in the 2013 photo practically everyone is holding a smartphone/tablet/camera.
  • 11. As you might be aware, (most of) those devices don’t run Flash! On the iPhone you’ll be presented with this lego brick when visiting a site that embeds a Flash object.
  • 12. No Flash for you! Now, the Flash people blame Steve Jobs for holding Flash off the iPad, but there’s more to it: 1) Flash is not CPU friendly: the load of the CPU just shoots up. And a high CPU requires lots of energy from the battery, so basically flash eats away from your battery. 2) Flash is/was very insecure: every few weeks an exploit would be found. Keeping Flash on the iPhone up-to-date would be a tedious job 3) Performance is choppy, even on a device such as a Galaxy S4 or iPhone5. So that’s reason #1 why Flash has lost its pole position
  • 13. So all those people here can’t run your Flash games.
  • 14. Reason #2 : Device Improvements
  • 15. Reason #2 is that the processing power of smartphones has become huge. “Your mobile phone has more computing power than all of NASA in 1969. NASA launched a man to the moon. We launch a bird into pigs.” If you do want to know: the Apollo11 computer had a 2Mhz processor, 4kilobytes of RAM and weighed about 32 kilograms.
  • 16. Reason #3 : HTML has become mature
  • 17. Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3 Reason #3 is that there have been loads of improvements when it comes down to the web. Over the past 5 years a plentitude of new features and technical possibilities have become available. The new stuff is divided into 8 categories: 1) Semantics: this is something for us webgeeks, it’s about structure. We can ignore a bit for this presentation. 2) Offline & Storage: if we were to make a game with HTML5, we can make it available offline 3) Device Access: from within a webpage we can now access stuff on devices itself. On your cellphone, think of access to the camera, the vibration unit, the orientation, the location, etc. 4) Connectivity: with HTML5 is possible to allow devices to communicate with eachother: your cellphone could act as as a remote for something you are watching the browser. 5) Multimedia: HTML5 has given us a way to embed videos and audio without the need for a plugin such as Flash. 6) 3D, Graphics & Effects: HTML5 has given us vectors in the browser, canvas to draw on (2D things) and WebGL to do 3D stuff. 7) Performance & Integration: with HTML5 we can now do parallel processing (web workers) and do more stuff with Ajax. 8) CSS3: with CSS3 we can now animate and move elements via CSS. This is very powerful as it’s GPU accelerated Now this is all *new* stuff, most of it didn’t exist 5 years ago. 5 years ago is 2008, the iPhone already existed for a year (which didn’t run Flash).
  • 18. HTML5 Demos So lets take a closer look at what is possible with those 8 groups of new HTML5 technologies
  • 19. CSS FILTERLAB http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/ CSS3 filters. Just like in Photoshop, straight in the browser!
  • 20. CSS BLEND MODES http://codepen.io/adobe/full/FeiCp CSS3 Blend Modes. Combined with CSS3 filters and Filesystem access we could create an online Photoshop with this!
  • 21. CUTTHE ROPE http://www.cuttherope.ie/ Canvas (2D graphics) + CSS3 animations for menus + Audio API
  • 22. WEBCAMTOY http://webcamtoy.com/ Webcam access Again: this is straight in the browser. No plugins required. It’s pure HTML, CSS3 and JavaScript.
  • 23. BODY BROWSER http://www.zygotebody.com/ WebGL (non-game)
  • 24. ROLL IT http://g.co/rollit WebGL + Websockets + Device Orientation
  • 25. BROWSER SUPPORT? http://caniuse.com/ If you’re wondering about browser support, there’s this awesome website named caniuse.com. just type in the name of one the technologies and see in which browsers it is support. Nowadays it’s looking really good: most of the current versions, or upcoming versions of browsers do support most of the technologies.
  • 26. Basically, all those people here can run most parts of the demos shown, or will be able to run in the near future.
  • 27. HTML5 Game Libraries
  • 28. HTML5Technologies HTML5 Game Libraries Now, to create a game with HTML5 technologies could do it all manually, or you could make use of an HTML5 Game Library: Essentially the library is a layer on top of the technologies. Instead of working directly with the technologies (which requires lots of code), you work with the library that works that uses the technologies.
  • 29. Turbulenz iio Engine ImpactJS Enchant.js Quintus Crafty Today there are lots of HTML5 Game Libraries to choose from. It used to be different though, one year ago we didn’t have this many options. Which one should you choose? Well ...
  • 30. ... it’s like choosing candy from a candy store. Choose whichever one looks best to you and affords your needs.
  • 31. enchant(); var game = new Core(320, 320); game.preload('chara1.png'); game.onload = function() { var Player = enchant.Class.create(enchant.Sprite, { initialize: function() { enchant.Sprite.call(this, 32, 32); this.image = game.assets['chara1.png']; game.rootScene.addChild(this); } }); var player = new Player(); game.rootScene.on('touchstart', function(evt) { player.y = evt.localY; }); }; game.start(); // start your game! HERE’STHE CATCH: There’s one catch though: you’ll need to have programming skills to use a game library. Here’s an example of EnchantJS
  • 32. POLYCRAFT https://turbulenz.com/games/polycraft/play
  • 33. HTML5 Game Editors
  • 34. HTML5Technologies HTML5 Game Libraries HTML5 Game Editors Now that the wave of game libraries has reached us over the time of a year, a new wave of stuff is arriving, namely the wave of HTML5 game developing editors These are native applications which allow us to create HTML5 based games. It still requires coding skills, but on a lower level. You could state that it gets easier to create something when stepping up to a higher block of the schematic. The possibilities however become more narrow: you’re limited to the scope of the editor. The rise is just starting, as there are only a few tools available. We’re quite convinced that by next year there’ll be more, but it will - just as it did with the libraries - take time.
  • 35. SCIRRA CONSTRUCT https://www.scirra.com/construct2 Scirra Construct is an example of an HTML5 game editor. It only runs on Windows though. It’s funny to see that it looks a bit like Flash.
  • 36. TULULOO GAME MAKER http://www.tululoo.com/ Another example is Tululoo Game Maker, which runs on Windows, OS X and Linux. The outputted code is quite compact. It does require a little bit of coding skills, but no more than the coding skills of an average flash designer.
  • 37. DEMOTIME! So now we’ll give you a demo on how to quickly create a game with Tululoo. My colleague Rogier will create a game that consists of two screens: a start screen and game screen. The goal of the game is to move the helicopter and let it drop a bomb on the man running on the ground from left to right. In total you have 3 bombs to drop.
  • 38. DEMOTIME! This might look like magic to some of you, but the code we’ll be applying here is rather simple; it mostly evolves around logic: if-this-then-that. We’re sure you’ll get the gist of it.
  • 39. Thank you!
  • 40. WHY GAME DEVELOPERS SHOULD CARE ABOUT HTML5 SEGANTallinn Summer School, July 2013 Rogier van der Linde & BramusVan Damme