W3C HTML5 KIG-The complete guide to building html5 games
0 likes1,323 views
The document discusses building HTML5 games and provides resources on graphics libraries, physics engines, handling touch input, and gaming frameworks. It recommends libraries like EaselJS and frameworks like MelonJS and ImpactJS for HTML5 game development. Tutorials are presented on porting games to HTML5 using these tools as well as considerations for building games targeting multiple platforms like Windows 8.
W3C HTML5 KIG-The complete guide to building html5 games
- 1. THE COMPLETE GUIDE TO BUILDING HTML5 GAMES 2013.4.17 동국대학교 이창환 • [email protected] • http://html5gamers.wordpress.com
- 2. 2 • The Complete Guide to Building HTML5 games • David Rousset • A Developer Evangelist at Microsoft, specializing in HTML5 and web development. • Blog on MSDN • Twitter: @davrous • Links • http://www.codeproject.com/Articles/485747/The-Complete-Guide-to-Building- HTML5-games-with-Ca, 2012-10-29 • http://html5center.sourceforge.net/The-Complete-Guide-to-Building-HTML5-games- with-Canvas-SVG • This slide • https://www.slideshare.net/yich/w3c-kigthe-complete-guide-to-building- html5-games
- 3. 3 • Why are so many people currently interested in HTML5 Gaming? • HTML5 to target multi-platforms using the same code • for desktop machines of course (with IE9/IE10, Firefox, Chrome, Opera & Safari) • for iOS & Android tablets & phones and Windows 8 • its future associated millions of tablets & PC • The modern JavaScript engines performance + the GPU hardware-accelerated graphics layers
- 4. 4 • Building HTML5 game • How to draw nice objects on the screen. • Patrick Dengler (member of the SVG W3C Working Group): Thoughts on when to use Canvas and SVG • David Rousset’s materials • Overview of HTML5 Graphics with Canvas & SVG • Video: mp4, WebM • Source Codes • Other sessions from MIX11 • Modernizing Your Website: SVG Meets HTML5 • Deep Dive Into HTML5 <canvas>
- 5. 5 Canvas vs. SVG • Canvas vs. SVG • Canvas • a well-known development model for games developers (low level drawing APIs) • hardware-accelerated by most of the recent browsers. • SVG, and its vectors-based technology • Better armed to scale across devices without loosing quality. • ViewBox property of SVG • Games assets-Scale from 3 to 80'' screens • Example game using both technologies. • SVG Racketball & Canvas Racquetball • Programming Simple Games Using Canvas or SVG
- 6. 6 Performance of Canvas and SVG • 1000 small balls on screen • Using SVG: 1000 balls in SVG • Using Canvas: 1000 balls in Canvas • Environment • Intel i7-3770 with 8GB • Windows 7 (32bit) • Chrome 26
- 7. 7 Performance of Canvas and SVG • Performance Comparison • Better for drawing a lot of objects on the screen • To achieve in video games
- 8. 8 • Mixing both technologies • A first layer based on SVG to display the game menus • A second layer in background using a canvas for the game itself. • Some attentions to final performance results • Because the browsers & devices are far from being equals in this domain. • Don't forget that the main interest of HTML5 is to target all platforms.
- 9. 9 • David Catuhe’s little brick breaker game • Using this composition principle • How to write a small game using HTML5 and JavaScript-BrikBrok • The first layer using SVG for the bricks to break • The background with a tunnel effect using the canvas tag. • Mimic this concept • The main game in background (hosting a plateformer or shoot'em up game, etc.) instead of the tunnel • first layer: the menus & configuration options in SVG.
- 10. 10 Useful libraries & tools • Graphics • Physics Engine • Handling the multi touch events • Building connected games
- 11. 11 Graphics • Writing the XML nodes of SVG manually or even playing with the low level APIs of Canvas • Be fun for a moment but not very productive. • Useful set of tools & libraries for building parts of HTML5 game. • Some SVG tools • InkScape: a free & open source desktop software • SVG Editor: an online software running directly inside your browser • Adobe Illustrator: Supports SVG as an export target, expensive. • Game assets (for menus or controls) • The Noun Project : free icons library • Open Clip Art Library: free SVG content
- 12. 12 Graphics • Libraries (SVG) • RaphaelJS: SVG JavaScript library • Generating dynamic SVG with few lines of code. • Demo using for instance nonlinear animation functions on SVG elements, animated charts, etc. • HighCharts: charting • To display some players' stats • Those 2 libraries • Implement VML fallbacks for IE8 or older versions. • Target at least IE9 and above.
- 13. 13 Graphics • Libraries (Canvas) • JavaScript InfoVis Toolkit: Charts using Canvas
- 14. 14 Graphics • Libraries (3D) • ThreeJS: the usage of 3D in JavaScript • Be used to render some hardware-accelerated 3D via WebGL. • For a rendering inside the 2D canvas element of HTML5. • "CanvasRenderer examples" section • Used for instance to build our Galactic demo on the IE Test Drive. • Build 3D scenes working in all HTML5 browsers. • Note • Combine all of these graphics effects with the usage of: • CSS3 2D & 3D Transforms • Transitions • Animations • To stay focused on Canvas & SVG in this article.
- 15. 15 Physics Engine • To do in a game • Displaying graphics • The AI (Artificial Intelligence): To bring life to your characters. • Code that alone and be creative • The physics & collisions: Box2D JS • Libraries • Box2D JS • with the various samples and you'll be amazed: • Tutorials series of Seth Ladd • Box2D orientation for the JavaScript developer • Used the Web Workers to compute the physics on the several available cores of your CPU. • An introduction on Web Workers APIs • Introduction to the HTML5 Web Workers: the JavaScript multithreading approach
- 16. 16 Handling the multi touch events • Support touch for building a cross-devices game • 2 existing specifications around Touch Events • Pointer Events vs. Touch Events • Getting Touchy About Patents • Need to write code working fine inside IE10 & Windows 8 as well as with the implementation coming from the Apple devices. • Finger Painting: Sample demonstrating a possible pattern to support both kind of touch events • Handling Multi-touch and Mouse Input in All Browsers • Browser Surface: Demo for handling multi-touch inside IE10. • Need a recent IE10 version and a multitouch hardware running it.
- 17. 17 Handling the multi touch events • Pointer.js • Boris Smus • The idea • To consolidate all types of touch (IE10, iOS like, mouse and pen) to simplify your developer life. • Generalized input on the cross-device web. • Current • A draft • No support yet the MSPointer* of IE10.
- 18. 18 Building connected games • WebSockets • Build multiplayers games or a connected game to a server • W3C specification (and the underlying protocol handled by the IETF) • To support the widest possible number of users • Consider a fallback for browsers or devices which weren't supporting WebSockets yet or were supporting an older deprecated version. • 2 solutions • Socket.IO library for Node.js • SignalR working on top of IIS and ASP.NET • handle all the browsers & devices with their variety of support levels.
- 19. 19 Some gaming frameworks • To build a 2D HTML5 game • 1 - Handling your sprites: splitting them into a sequence, animating them, effects, etc. • 2 - Handling your sounds & music (and this is not something easy in HTML5!) • 3 - Loading asynchronously your assets from the web server via a dedicated loader/assets manager • 4 - Building a collision engine, a high level logic for your game objects, etc. • 2 Way to build a 2d HTML5 game • Do that starting from scratch • Test & review what other brilliant developers have already done on the web.
- 20. 20 Some gaming frameworks • The most well-known frameworks for building HTML5 2D games working inside all browsers: • MelonJS: A free framework that exposes a lot of useful services. • Works fine with the Tiled Map Editor tool. • CraftyJS • ImpactJS: a high quality well-known framework. It's not free but not too much expensive. • EaselJS: Written by an old flash developer. • Part of the CreateJS suite. • It's very complete, well documented and… free.
- 21. 21 Some beginners' tutorials • Tutorials • porting an XNA C# game into HTML5/JavaScript thanks to EaselJS. • HTML5 Gaming: animating sprites in Canvas with EaselJS • HTML5 Gaming: building the core objects & handling collisions with EaselJS • HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS • 3 others articles enhancing/extending the same game: • Tutorial: how to create HTML5 applications on Windows Phone thanks to PhoneGap • how to port the same game on Windows Phone thanks to PhoneGap/Cordova. • the same instructions for your Android or iOS device. • Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3 • use CSS3 3D Transform, Transitions & Grid Layout to enhance the gaming experience • Modernizing your HTML5 Canvas games Part 2: Offline API, Drag'n'drop & File API • enable playing to the game in offline mode. • create your own levels and drag'n'drop them directly into the game.
- 22. 22
- 23. 23 • Tutorials on the EaselJS • a lot of simple demo to understand and great tutorials on the EaselJS website:http://www.createjs.com/#!/EaselJS • More generic tutorials on : • HTML5 Game Dev Tutorials • 10 cool HTML5 games and how to create your own • 2 more "advanced" articles • David Catuhe from Microsoft: • Unleash the power of HTML 5 Canvas for gaming. • Some optimization: Writing in the "demo scene". • The tips: Some ideas for HTML5 games. • Boris Smus from Google • Improving HTML5 Canvas Performance and it contains ton of good advices.
- 24. 24 Some interesting online working games & experience feedbacks • Other cool examples on the web to share. • Be interesting to analyze how the developers made them. • Thanks to the magic of the web: right-click & "view source". • Be probably minified, • Can still learn a couple of interesting things by looking at the global architecture of the game. • Pirates Love Daisies written by Grant Skinner: • using the EaselJS framework.
- 25. 25 • Windows 8 note • Windows 8 in the Windows Store • Pirates Love Daisies for Windows 8. • A HTML5 game working fine inside IE9 or IE10, building the Windows 8 version is almost only doing a simple copy… and paste • The game will then directly works inside the Metro experience. • To make a real good Windows 8 game • pay attention to the unique Windows 8 experience we're building. • Designing great games for Windows
- 26. 26 • BKOM ROBOT GAME • Using EaselJS • Uses 3D sprites
- 27. 27 • The 2 most currently famous HTML5 games • Angry Bird • Uses the Box2D library • Cut The Rope • a Windows 8 version of it in the Windows Store here: Cut The Rope for Windows 8
- 28. 28 • To port into Windows 8. • 1 - Copy/Paste the Web version into a HTML5 Metro Style App project for Windows 8 • 2 - Add support for touch • 3 - Add support for the snapped view and pause the game • 4 - Build some High Resolution assets (1366x768 & 1920x1080) to propose the best experience for all the incoming Windows 8 tablets & PC. • The story around "Cut The Rope“ • a successful game written in Objective-C for the Apple iOS devices. • Ported into HTML5/Canvas and the developers who made this detail their feedback in this article: Cut The Rope - Behind the scenes • Experience feedback: Wooga's HTML5 Adventure • 40 more or less good HTML5 games • 40 Addictive Web Games Powered by HTML5 with some other available also here: HTML5games.com