Professional HTML5 Mobile Game Development

Adding SVG Support to Quintus

SVG elements are going to be added to the engine in much the same way that DOM elements were: by adding in a custom Q.setupSVG method to set up an <svg> element and then creating a custom Q.SVGSprite class that knows to create a corresponding SVG element.

The major complication to creating a game with SVG elements is that the collision detection becomes tricky if you allow elements made up of arbitrary polygons that can be rotated at random angles. Luckily, this isn’t a problem that the engine must solve because the 2-D physics engine, Box2dweb that is going to be added in the next section is responsible for the details of handling collisions.

Creating an SVG Module

Armed with the knowledge of how to interact with SVG via JavaScript, it’s time to create the Quintus SVG module. Open up a new file called quintus_svg.js, and enter the code from Listing 14-4.

Listing 14-4: The base Quintus.SVG module

Quintus.SVG = function(Q) { var SVG_NS ="http://www.w3.org/2000/svg"; Q.setupSVG = function(id,options) { options = options || {}; id= id || "quintus"; Q.svg = $(_.isString(id) ? "#" + id : id)[0]; if(!Q.svg) { Q.svg = document.createElementNS(SVG_NS,'svg'); Q.svg.setAttribute('width',320); Q.svg.setAttribute('height',420); document.body.appendChild(Q.svg); } if(options.maximize) { var w = $(window).width()-1; var h = $(window).height()-10; Q.svg.setAttribute('width',w); Q.svg.setAttribute('height',h); } Q.width = Q.svg.getAttribute('width'); Q.height = ...