I realize there are many tutorials and sites and everything answering "Which is better for game applications?" They all say that SVG is not suited towards game applications, that canvas is. But this confuses me.
So let's say I'm making a platformer. I want the main character to walk across the stage with a beautifully painted background. In Canvas, I either have to recreate her entire hitbox (repainting the spot of every moving entity), or make a separate canvas element and use maybe ctxChar, ctxBG, ctxItems
etc. With SVG, on the other hand, it's built in. And I can even just put an <animate>
tag inside her <use>
tag that changes her x position (or manually change it via js), and another <animate>
tag to change her sprite. And then the background never has to be touched.
As for animating a bunch of elements simultaneously, I don't see how that's any faster in Canvas than in SVG. What's wrong with putting svg elements in groups? Can it be any slower than redrawing the hitboxes's backgrounds and redrawing the entities themselves for all entities?
Edit: I think my real question is not if SVG could work, but why people think it couldn't.
So what is SVG good for? Graphic resources. SVG is a good way to package images for your game, Once you have them on the client you can render them to bitmaps and then use them to render your game. The beauty is you get the resolution independent scalability of SVG and small images size.
SVG gives better performance with smaller number of objects or larger surface. Canvas gives better performance with smaller surface or larger number of objects. SVG can be modified through script and CSS. Canvas can be modified through script only.
Because of its speed of manipulation, canvas is best when fast rendering and redrawing is needed, e.g. animations and games, such as in this example. SVG is better suited for large-scale rendering and interactivity, e.g. maps and user interfaces, such as in this slideshow demo.
Differences Between SVG and Canvas Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM.
SVG V Canvas
As a professional games creator my advice is to stay away from SVG if you wish to create browser based games. The main reason is that it is simply too slow. Second reason is that it will make your job as a programmer more difficult because finding solutions to SVG's lack of performance is hard. Third reason, because it is VERY SLOW and games are all about performance.
This page will go over SVG game design An Original Approach to Web Game Development Using SVG but before you dive in and read all of it have a look at the prototype of the game it`s all about Runes and Relics Prototype. A little oh hum in my book.
I am sure there are other attempts this was just first up in my search. But I have never played a good SVG game.
So what is SVG good for? Graphic resources. SVG is a good way to package images for your game, Once you have them on the client you can render them to bitmaps and then use them to render your game. The beauty is you get the resolution independent scalability of SVG and small images size. But by rendering them to bitmap at load time you get the full use of the GPU to move pixels about. SVG is just too slow to use within the game.
Why use Canvas? I would like to say because it's fast, but it is not when you compare it to a native C++ app which will run 10* quicker than the equivalent Javascript / canvas game. Ten times quicker is very significant but then you do not get the cross platform advantage you get with Javascript.
Currently canvas is the best option for truly cross platform game applications. Using either 2D or 3D webGL you can build full screen full frame rate games. HTML5 has a good set of APIs for all gaming needs and is easy to learn.
I am not a fan of game engines, they are a cover all solution, the middle man between you and the already well designed API's that force you to do it their (not that great) way. But they will give you a good overview of what is possible.
Phaser is a javascript canvas game engine that has lots of resources and examples. It is a good place to start and see what can be done. Don't be sucked in by the fact that game engines sell themselves as such. HTML5 & JavaScript is out of the box the best game engine in town, runs native code, has a huge user and support base. The time you spend learning how to use a Game engine's API will not be time spent learning how to use the HTML5 API's (and quite frankly the HTML5 APIs are perfect, the result of the 20 year browser wars) which is actually easier than the Game engines to use and learn.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With