O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Why Game Developers Should Care About HTML5

2.962 visualizações

Publicada em

Want the slides with presenter notes? Get them here: https://www.bram.us/talks/2015/01/why-game-developers-should-care-about-html5-withnotes.pdf

Publicada em: Engenharia, Software, Tecnologia
  • There is a useful site for you that will help you to write a perfect and valuable essay and so on. Check out, please ⇒ www.HelpWriting.net ⇐
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Hello! I do no use writing service very often, only when I really have problems. But this one, I like best of all. The team of writers operates very quickly. It's called ⇒ www.WritePaper.info ⇐ Hope this helps!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Get the best essay, research papers or dissertations. from ⇒ www.HelpWriting.net ⇐ A team of professional authors with huge experience will give u a result that will overcome your expectations.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • There is a REAL system that is helping thousands of people, just like you, earn REAL money right from the comfort of their own homes. The entire system is made up with PROVEN ways for regular people just like you to get started making money online... the RIGHT way... the REAL way. ▲▲▲ http://ishbv.com/ezpayjobs/pdf
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Get paid to send out tweets – $25 per hour ★★★ https://tinyurl.com/rbrfd6j
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Why Game Developers Should Care About HTML5

  1. 1. WHY GAME DEVELOPERS SHOULD CARE ABOUT HTML5 International iWeek January 2015 Lahti, Finland BramusVan Damme
  2. 2. A little bit about myself
  3. 3. HELLO! Bram(us)Van Damme
  4. 4. HELLO! Odisee, Belgium Lecturer Web
  5. 5. @bramus HELLO! https://www.bram.us
  6. 6. A little bit about you? your name is?
  7. 7. PART I From Flash to HTML5
  8. 8. Reason #1: No flash for you!
  9. 9. No Flash for you! http://www.apple.com/hotnews/thoughts-on-flash/
  10. 10. Reason #2 : Device Improvements
  11. 11. Reason #3 : HTML has become mature
  12. 12. Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3
  13. 13. BROWSER SUPPORT? http://caniuse.com/
  14. 14. SEMANTICS Structural Elements
 <header>, <footer>, <section>, <progress>, … New attributes New form input types
 <input  type="date|color|number|…"> …
  15. 15. CSS3 Rounded Corners Webfonts Transforms &Transitions & Animations Filters & Blend Modes Flexbox / Grid Layout …
  16. 16. ANIMATIONS http://leuven.use-it.travel/
  17. 17. GRID LAYOUT http://codepen.io/rachelandrew/pen/joxHG .mainnav  {  grid-­‐area:  nav;  }   .subhead  {  grid-­‐area:  subhead;  }   .quote  {  grid-­‐area:  quote;  }   .content  {  grid-­‐area:  content;  }   .feature-­‐image  {  grid-­‐area:  feature;  }
  18. 18. GRID LAYOUT http://codepen.io/rachelandrew/pen/joxHG @media  only  screen  and  (min-­‐width:  980px)  {      .wrapper  {          display:  grid;      grid-­‐template-­‐columns:  200px  40px  auto  40px  200px;      grid-­‐template-­‐rows:  auto  auto  auto;      grid-­‐template-­‐areas:                  ".  .  subhead  .  ."                "nav  .  feature  .  quote"                "nav  .  content  .  quote";      }     }
  19. 19. GRID LAYOUT http://codepen.io/rachelandrew/pen/joxHG
  20. 20. GRID LAYOUT http://codepen.io/rachelandrew/pen/joxHG @media  (min-­‐width:  700px)  and  (max-­‐width:  980px)  {          .wrapper  {                  display:grid;                  width:  90%;                  grid-­‐template-­‐columns:  20%  5%  auto  ;                  grid-­‐template-­‐rows:  auto  ;                  grid-­‐template-­‐areas:  ".  .  subhead"                  "nav  .  quote"                  "nav  .  feature"                  "nav  .  content"  ;          }   }
  21. 21. GRID LAYOUT http://codepen.io/rachelandrew/pen/joxHG
  22. 22. CSS FILTERLAB http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/
  23. 23. CSS BLEND MODES http://codepen.io/adobe/full/FeiCp
  24. 24. OFFLINE & STORAGE Local Storage Application Cache Web SQL IndexedDB …
  25. 25. APP CACHE <html  manifest="demo.appcache">...</html> CACHE  MANIFEST   #  2015-­‐01-­‐28  v1.0.0   /theme.css   /logo.gif   /main.js   NETWORK:   login.asp   FALLBACK:   /html/  /offline.html
  26. 26. MULTIMEDIA New Media Elements
 <audio>, <video>, … Web Audio API …
  27. 27. WEB AUDIO API http://chimera.labs.oreilly.com/books/1234000001552/ch01.html
  28. 28. DEVICE ACCESS Camera Geolocation Vibration Unit Contacts Light Sensor …
  29. 29. GEOLOCATION http://html5demos.com/geo
  30. 30. WEBCAMTOY http://webcamtoy.com/
  31. 31. 3D, GRAPHICS & EFFECTS SVG <canvas>   WebGL
  32. 32. CUTTHE ROPE http://www.cuttherope.ie/
  33. 33. BODY BROWSER http://www.zygotebody.com/
  34. 34. HEXGL http://hexgl.bkcore.com/
  35. 35. SCULPTGL http://stephaneginier.com/sculptgl/
  36. 36. FINDYOUR WAYTO OZ http://www.findyourwaytooz.com/
  37. 37. CONNECTIVITY WebSockets WebRTC …
  38. 38. SHAREDROP https://www.sharedrop.io/
  39. 39. ROLL IT http://g.co/rollit
  40. 40. PERFORMANCE & INTEGRATION Web Workers XMLHttpRequest2 Timing API …
  41. 41. BANANABREAD https://developer.mozilla.org/en/demos/detail/bananabread/
  42. 42. PART II From HTML5Technologies to HTML5 Game Editors
  43. 43. HTML5Technologies
  44. 44. HTML5Technologies HTML5 Libraries
  45. 45. THREE.JS http://davidscottlyons.com/threejs/presentations/frontporch14/#slide-11
  46. 46. HOWLER.JS http://citymixer.aifoon.org/
  47. 47. HTML5 Game Libraries HTML5 Libraries HTML5Technologies
  48. 48. Turbulenz iio Engine ImpactJS Enchant.js Quintus Crafty Phaser Panda.js
  49. 49. 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:
  50. 50. POLYCRAFT https://turbulenz.com/games/polycraft/play
  51. 51. HTML5 Game Libraries HTML5 Game Editors HTML5Technologies HTML5 Libraries
  52. 52. SCIRRA CONSTRUCT https://www.scirra.com/construct2
  53. 53. TULULOO GAME MAKER http://www.tululoo.com/
  54. 54. MIGHTY EDITOR http://mightyfingers.com/
  55. 55. EJECTA http://impactjs.com/ejecta
  56. 56. UNITY 3D http://unity3d.com/
  57. 57. HERE’STHE CATCH: HTML5 Game Libraries HTML5 Game Editors HTML5Technologies HTML5 Libraries restricted unrestricted easy / fast difficult / slow
  58. 58. Thank you!
  59. 59. WHY GAME DEVELOPERS SHOULD CARE ABOUT HTML5 Boot.ini, November 2013 Rogier van der Linde & BramusVan Damme
  60. 60. If you’re looking for the more honest, truthful answer to pretty much any question on web design and usability, here it is: It depends. — Jeremy Keith, https://adactio.com/journal/4437

×