W3C HTML5 KIG-The complete guide to building html5 games
THE COMPLETE GUIDETO BUILDING HTML5GAMES2013.4.17 동국대학교 이창환• email@example.com• http://html5gamers.wordpress.com
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
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>
5Canvas 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
6Performance 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
7Performance of Canvas and SVG• Performance Comparison • Better for drawing a lot of objects on the screen • To achieve in video games
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. • Dont forget that the main interest of HTML5 is to target all platforms.
10Useful libraries & tools• Graphics• Physics Engine• Handling the multi touch events• Building connected games
11Graphics• 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
16Handling 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.
17Handling 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.
18Building 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 werent 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.
19Some 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.
20Some 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. Its not free but not too much expensive. • EaselJS: Written by an old flash developer. • Part of the CreateJS suite. • Its very complete, well documented and… free.
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.
24Some 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• 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 were building. • Designing great games for Windows
26• BKOM ROBOT GAME • Using EaselJS • Uses 3D sprites
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• 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: Woogas HTML5 Adventure• 40 more or less good HTML5 games • 40 Addictive Web Games Powered by HTML5 with some other available also here: HTML5games.com