Technology upside down and backwards

SVG Game Resources

Mozilla is holding an Open Web Games competition. I expect that many of the games will be use the Canvas API, since many programmers are more familiar with the imperative programming mode, and there are some games libraries that have been developed for Canvas or adapted from existing drawing or gaming libraries.

But I’m calling for SVG developers and designers to step up to the plate, as well. SVG has a lot of features that make it easier out of the box to build interfaces, animations, and even games. There is a scene graph, and the DOM event model that gives you free hit detection for pointer events, for example. And I’d love to see someone make an open-web game that’s both accessible and fun…

To help developers along, I thought I’d share a few free, open-source SVG resources that could be useful in building games:Jonathan Watt’s Coordinate Transformer: An indispensable short code snippet that compensates for transforms and viewboxes, giving you the position of the pointer events in an intuitive way.

David Leunen’s FakeSmile: A Javascript shim that lets you use declarative animation even where it isn’t supported natively in browsers.

Kevin Lindsey’s Games and Geometry Library: An amazing toolkit that calculated intersection, does advanced geometry, and all sorts of other great stuff.

Andreas Neumann’s Mapping and Widgets Library: For apps that need zooming, panning, and form controls, this is a very nice set of tools.

Robin Berjon’s SVG Boilerplate: A simple template to include SVG content embedded or inline, in a cross-browser and backwards-compatible way.

Dmitry Baranovskiy’s Raphaël Javascript Library: A vector graphics API that gives you a new drawing API for SVG (and VML where there is no SVG).

David Dailey’s SVG Primer: Background and basics on SVG, for those just getting started.

These are just a few resources, off the top of my head… there are many more out there, sorry if I failed to mention anyone. If anyone has other useful resources for making SVG games, please drop a link in the comments.

Post navigation

3 thoughts on “SVG Game Resources”

It will be interesting to see if other browser developers follow suit, and in the slightly longer term whether W3C can engage the professional game community to create an open web games standard**.
for the present WebGo with added XGS at http://www.peepo.com is entered at Mozilla open web games.
Go is an ancient oriental board game that is easy to learn, but hard to master. You will soon learn to beat any computer, but will always find a better player. the WebGo client plays in the browser and uses the XGS – XML Go Server to relay moves and comments to the other player, save games, chat and more.
WebGo is in development, issues around standards and UA implementation currently somewhat limit accessibility.
for the future, the intention is to optionally add in-game educational graphics. learn as you play, and a Go playing bot or two more immediately.
**read “Browser-native games that use real-world xml data” to be published in the book: Business, Technological and Social Dimensions of Computer Gameshttp://www.igi-global.com/bookstore/TitleDetails.aspx?TitleId=46177

Depends. In some browsers, like IE9, SVG will be hardware-accelerated. And many games don’t need blazing-fast refresh rates. On the plus side for SVG, it has its own hit-testing and event model. Obviously, you should always use the right tool for the job. You can even mix SVG and Canvas effects to hit the sweet spot for your game or app.