Why Game Developers Should Care About HTML5
34 likes3,295 views
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
![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:](https://image.slidesharecdn.com/why-game-developers-should-care-about-html5-150129072436-conversion-gate02/85/Why-Game-Developers-Should-Care-About-HTML5-61-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Why Game Developers Should Care About HTML5 (20)
![[2015/2016] HTML5 and CSS3 Refresher](https://cdn.slidesharecdn.com/ss_thumbnails/03html5css3-160311182004-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
Why Game Developers Should Care About HTML5
- 1. WHY GAME DEVELOPERS SHOULD CARE ABOUT HTML5 International iWeek January 2015 Lahti, Finland BramusVan Damme
- 2. A little bit about myself
- 6. A little bit about you? your name is?
- 8. PART I From Flash to HTML5
- 10. Reason #1: No flash for you!
- 16. No Flash for you! http://www.apple.com/hotnews/thoughts-on-flash/
- 17. Reason #2 : Device Improvements
- 21. Reason #3 : HTML has become mature
- 22. Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3
- 25. SEMANTICS Structural Elements <header>, <footer>, <section>, <progress>, … New attributes New form input types <input type="date|color|number|…"> …
- 26. CSS3 Rounded Corners Webfonts Transforms &Transitions & Animations Filters & Blend Modes Flexbox / Grid Layout …
- 28. 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; }
- 29. 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"; } }
- 31. 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" ; } }
- 35. OFFLINE & STORAGE Local Storage Application Cache Web SQL IndexedDB …
- 36. 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
- 37. MULTIMEDIA New Media Elements <audio>, <video>, … Web Audio API …
- 42. 3D, GRAPHICS & EFFECTS SVG <canvas> WebGL
- 51. PERFORMANCE & INTEGRATION Web Workers XMLHttpRequest2 Timing API …
- 52. BANANABREAD https://developer.mozilla.org/en/demos/detail/bananabread/
- 53. PART II From HTML5Technologies to HTML5 Game Editors
- 58. HTML5 Game Libraries HTML5 Libraries HTML5Technologies
- 61. 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:
- 63. HTML5 Game Libraries HTML5 Game Editors HTML5Technologies HTML5 Libraries
- 69. HERE’STHE CATCH: HTML5 Game Libraries HTML5 Game Editors HTML5Technologies HTML5 Libraries restricted unrestricted easy / fast difficult / slow
- 71. Thank you!
- 72. WHY GAME DEVELOPERS SHOULD CARE ABOUT HTML5 Boot.ini, November 2013 Rogier van der Linde & BramusVan Damme
- 73. 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