THE COMPLETE GUIDETO BUILDING HTML5GAMES2013.4.17 동국대학교 이창환• yich@dongguk.edu• http://html5gamers.wordpress.com
2• The Complete Guide to Building HTML5 games   • David Rousset     • A Developer Evangelist at Microsoft, specializing in...
3• Why are so many people currently interested in HTML5 Gaming? • HTML5 to target multi-platforms using the same code   • ...
4• Building HTML5 game  • How to draw nice objects on the screen.    • Patrick Dengler (member of the SVG W3C Working Grou...
5Canvas vs. SVG• Canvas vs. SVG  • Canvas    • a well-known development model for games developers (low level      drawing...
6Performance of Canvas and SVG• 1000 small balls on screen   • Using SVG: 1000 balls in SVG   • Using Canvas: 1000 balls i...
7Performance of Canvas and SVG• Performance Comparison  • Better for drawing a lot of objects on the screen  • To achieve ...
8• Mixing both technologies  • A first layer based on SVG to display the game menus  • A second layer in background using ...
9• David Catuhe’s little brick breaker game  • Using this composition principle  • How to write a small game using HTML5  ...
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...
12Graphics• Libraries (SVG)  • RaphaelJS: SVG JavaScript library     • Generating dynamic SVG with few lines of code.     ...
13Graphics• Libraries (Canvas)   • JavaScript InfoVis Toolkit: Charts using Canvas
14Graphics• Libraries (3D)   • ThreeJS: the usage of 3D in JavaScript    • Be used to render some hardware-accelerated 3D ...
15Physics Engine• To do in a game   • Displaying graphics   • The AI (Artificial Intelligence): To bring life to your char...
16Handling the multi touch events• Support touch for building a cross-devices game  • 2 existing specifications around Tou...
17Handling the multi touch events• Pointer.js  • Boris Smus  • The idea    • To consolidate all types of touch (IE10, iOS ...
18Building connected games• WebSockets  • Build multiplayers games or a connected game to a server  • W3C specification (a...
19Some gaming frameworks• To build a 2D HTML5 game   • 1 - Handling your sprites: splitting them into a sequence,     anim...
20Some gaming frameworks• The most well-known frameworks for building HTML5 2D games working inside all browsers: • MelonJ...
21Some beginners tutorials• Tutorials   • porting an XNA C# game into HTML5/JavaScript thanks to EaselJS.  • HTML5 Gaming:...
22
23• Tutorials on the EaselJS   • a lot of simple demo to understand and great tutorials on the EaselJS     website:http://...
24Some interesting online working games & experience feedbacks• Other cool examples on the web to share.  • Be interesting...
25• Windows 8 note  • Windows 8 in the Windows Store    • Pirates Love Daisies for Windows 8.  • A HTML5 game working fine...
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 versio...
28• To port into Windows 8.   • 1 - Copy/Paste the Web version into a HTML5 Metro Style App project for     Windows 8   • ...
Upcoming SlideShare
Loading in …5
×

W3C HTML5 KIG-The complete guide to building html5 games

1,009 views
933 views

Published on

W3C KIG 발표자료

Published in: Technology, Art & Photos
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,009
On SlideShare
0
From Embeds
0
Number of Embeds
335
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

W3C HTML5 KIG-The complete guide to building html5 games

  1. 1. THE COMPLETE GUIDETO BUILDING HTML5GAMES2013.4.17 동국대학교 이창환• yich@dongguk.edu• http://html5gamers.wordpress.com
  2. 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. 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. 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. 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
  6. 6. 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
  7. 7. 7Performance of Canvas and SVG• Performance Comparison • Better for drawing a lot of objects on the screen • To achieve in video games
  8. 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. • Dont forget that the main interest of HTML5 is to target all platforms.
  9. 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 shootem up game, etc.) instead of the tunnel • first layer: the menus & configuration options in SVG.
  10. 10. 10Useful libraries & tools• Graphics• Physics Engine• Handling the multi touch events• Building connected games
  11. 11. 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
  12. 12. 12Graphics• 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. 13Graphics• Libraries (Canvas) • JavaScript InfoVis Toolkit: Charts using Canvas
  14. 14. 14Graphics• 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. 15Physics 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 youll 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. 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. 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.
  21. 21. 21Some 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, Dragndrop & File API • enable playing to the game in offline mode. • create your own levels and dragndrop them directly into the game.
  22. 22. 22
  23. 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. 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. 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 were building. • Designing great games for Windows
  26. 26. 26• BKOM ROBOT GAME • Using EaselJS • Uses 3D sprites
  27. 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. 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

×