W3C KIG 발표자료

1. THE COMPLETE GUIDE
TO BUILDING HTML5
GAMES
2013.4.17 동국대학교 이창환
• yich@dongguk.edu
• 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