![]() ![]() ![]() Don’t forget that the main interest of HTML5 is to target all platforms. However, you must pay some real attentions to final performance results because the browsers & devices are far from being equals in this domain. You will then use what we call the browser compositing engine. Indeed, we could perfectly imagine using a first layer based on SVG to display the game menus with a second layer in background using a canvas for the game itself. To have a better overview of the performance comparison, here is an interesting diagram to look at:īut nothing prevents you from mixing both technologies. But this is generally also what we’d like to achieve in our video games. In general, the Canvas performance is better for drawing a lot of objects on the screen in this special case. Test both experiments in your favorite browser. For instance, here is an 2 interesting experiments that will display 1000 small balls on your screen using SVG: 1000 balls in SVG and using Canvas: 1000 balls in Canvas. In this case, analyzing the performance of each technology could help you to decide which one to use for your game. For instance, here is the same simple game first using SVG then Canvas: SVG Racketball & Canvas Racquetball They are both issued from this MSDN documentation: Programming Simple Games Using Canvas or SVG Sometimes, it is even possible to achieve the exact same game using both technologies. Your games assets will then scale from 3 to 80’’ screens in a very easy way! You just need to use the magic ViewBox property of SVG which will handle that for you. Still SVG, and its vectors-based technology, is naturally better armed to scale across devices without loosing quality. Canvas offers a well-known development model for games developers (low level drawing APIs) and is now very well hardware-accelerated by most of the recent browsers. Once you will have reviewed all this content, you will probably better understand why almost all HTML5 games are using Canvas rather than SVG. – Modernizing Your Website: SVG Meets HTML5 You may have a look also to these 2 great sessions from MIX11: ![]() You can watch it via this video I’ve made (using HTML5 of course!):Īt last, you can download the source code I’m demonstrating in this video here: Mix11SVGCanvas.zip On my side, I’ve re-used parts of Patrick’s materials to build a 45min internal session for my Microsoft’s colleagues last year. There are 2 ways to do that and to better understand their differences, you should start by reading this article from Patrick Dengler (member of the SVG W3C Working Group): Thoughts on when to use Canvas and SVG The first thing you need to understand before building your first HTML5 game is how to draw nice objects on the screen. Note: we will only talk about the tag of HTML5 and about SVG in this article.Ĭanvas & SVG: 2 ways to draw on the screen What’s more, the modern JavaScript engines performance coupled with the GPU hardware-accelerated graphics layers enable us to build great games in HTML5 with confidence. Well, simply because today, we can really use HTML5 to target multi-platformsusing the same code: for desktop machines of course (with IE9/IE10, Firefox, Chrome, Opera & Safari), for iOS & Android tablets & phones and Windows 8, and its future associated millions of tablets & PC, is also warmly welcoming HTML5 Games! I then frequently see some HTML5 gaming projects ported to each of these platforms with almost no effort. īut why are so many people currently interested in HTML5 Gaming? But it will try to update this blog post along with my own new discovers and of course based on the feedbacks you will kindly provide in the comments or via Twitter. I will probably omit some crucial things some of you may know. This article is then based on my own experience. I then recently thought: rather than keeping all these details for small audiences, wouldn’t it be smarter to share it with you? I’m currently spending most of my time explaining to students, hobbyists, professional developers and teachers how to build games using HTML5. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |