Why Canvas is not an obvious choice for web games(paulbakaus.com) |
Why Canvas is not an obvious choice for web games(paulbakaus.com) |
Use it right and it's a great tool. Try to use it as a panacea Flash replacement and you're in for a bunch of headache.
I think for simple tile-based games (pac man, mario bros, bejeweled) and casual 2d games (side scrolling shooters, puzzle games, angry birds) canvas is a really easy way to go.
Canvas' main advantage is that it can render vector graphics. Beyond that it's useful for doing image rotation in a cross-platform way and for manipulating bitmaps. If your game doesn't require those things, I can't think of a reason you'd want to use it in favor of something the browser is so natively good at as laying out image-based scenes.
These days, I'm much more inclined to use 3d-accererated CSS Transforms and Transitions first, then fall back on CSS positioning, then finally Canvas/SVG as a last resort for the few things that can't be accomplished by CSS/HTML.
I can't come up with a way to read my comment as inflamatory or "me too". The only thing I can guess is that it's a downvote for disagreement, but without any commentary I can't imagine why the downvoter would do so. It seems like the kind of thing one could easily refute with evidence, if one had evidence that it was incorrect.
I would say canvas is best suited for rendering/processing sprite or pixel-based graphics that does not need mouse interaction, if I had to pigeonhole it. Sure, I've used it via Flot to draw charts, and for purposes that were decidedly vector-ish, but I would never expect to be able to manipulate that stuff without complicated collision data and redraw logic. The API for drawing with the canvas pen is moderately featured but drawing imperatively and trying to act on <canvas>-mouse interaction just isn't scalable or maintainable.
Yes. It's incredibly frustrating that we can't rely on embedding SVG in HTML. (Last I looked--about 2.5 years ago, admittedly--only Firefox could do it, and only with XHTML.)
Here's a video of the Aves engine in action:
http://www.youtube.com/watch?v=Ol3qQ4CEUTo
As someone building an HTML/javascript-based animated game myself[1], I'm somewhat aware of the challenges involved and am frankly amazed that the OP has this level of performance coming from HTML/js on so many different game objects.
[1] http://littlecosm.com - a massively multiplayer twitter client!
Also, I wouldn't overlook Flash + PaperVision and its other 3D libraries. Alternative just showcased some glorious eye-candy at Adobe's Max 2010 convention:
http://blog.alternativaplatform.com/en/2010/10/26/adobe-demo...
Hard to believe that runs in a browser :-)
For my game I have encapsulated redering to use webkitTransform and translate3d if hardware acceleration is present. Otherwise use canvas, or in the worst case (IE6-8), use DOM with left and top css attributes.
If your game, like mine, can use a form of dirty-rectangle, invalidation strategy to rendering, its possible to do 60fps rendering with low CPU usage on iOS and desktop browsers.