The Space Toast Pages

Matthew Rasmussen's journal of journals on various topics of interest, published here, there or somewhere since 1999.

SGV Artillery Game: Proof of Concept

Issue 173, for the week of 7/2/2006.

Toast Note: What with the site redesign (now complete), three concurrent jobs, and a bad summer cold, the Space Toast Page has been a bit neglected lately. Still, I have a treat for you this week. Thanks for waiting.

(If the above opens as plain text, save it to the desktop and drag the file onto your browser.)

This is a proof of concept for a tile-based artillery game using Scalable Vector Graphics (SVG) and JavaScript. SVG was meant to be an open, plugin-free alternative to Flash, but it was a relative failure. To date, only FireFox and Opera 9 fully support the SVG specifications, with Safari's support still incomplete, and no native support in Internet Explorer. Adobe has released an SVG viewer plugin for most web browsers, but Adobe's implementation is not fully compatible with standard SVG. Still, the Safari development team is making fast progress, and Google is reported to be working on a translator for Internet Explorer, so SVG may yet see a true dawn.

To date, the game has only been tested in FireFox 1.5 for Mac and Safari 2.0.4. It is buggy, but runs in FireFox. Safari will draw the initial game state, but does not loop.

The game runs at a resolution of 700x500 pixels. In a window smaller than that, FireFox creates scrollbars, which trap the arrow keys. I don't know a way around this yet. It should be possible to make the game scale up or down to the size of the window automatically, as SVG is resolution-independent, but that may require redoing the artwork and JavaScript to use percentage measurements, rather than pixel measurements.

The game artwork was created in Inkscape, an open-source project which is making great strides toward creating an alternative to Adobe Illustrator. As of version 0.44, Inkscape is not suitable for directly editing graphics in an interactive SVG file. It has a tendency both to mangle JavaScript and to revert custom group names to generic ones. Additionally, Inkscape's method of saving object attributes like color and stroke width is to bundle them into one long style element (i.e. style="fill:#574736;fill-opacity:1stroke-width:0;stroke-opacity:1") rather than splitting them into individual elements, which are easier to access with JavaScript. The Inkscape team's progress remains impressive.

My biggest concern is speed. The game currently maintains its frame rate by idling for 10 milliseconds between loops, although I think I've come up with a better way to do it -- please refer to the JavaScript's comments. Although I doubt that FireFox's SVG drawing routines are tuned for game speeds, my biggest worry is the speed of JavaScript execution. Some parts of the script store game data in JavaScript variables, others assign it to the game's SVG objects -- as whim desired, really. The latter seems to be considered more "correct," in terms of modern programmers' fetish for object-based programming, but I'm all but convinced it's terminally slower than the former. Accessing elements (manipulating the DOM) is also an absolute pain in the ass in JavaScript. For both reasons, I suggest doing it as little as possible.

As near as I can tell, this is the most advanced SVG game anyone has written to date -- which is sad, but telling. Owing to uneven support, sluggish speed and lack of an integrated development environment, I can't see SVG supplanting Flash any time soon. Still, SVG is not without potential. Enjoy the game.

Further Reading:

With some previous JavaScript experience, it took me about a week of spare time to get this far. The following sources and examples were invaluable.

Review: Pirates of the Caribbean: At World's End

This seems to be the summer of grand refutation for the "more is better" blockbuster. Spiderman 3, Shrek the Third, and the upcoming Live Free or Die Hard and The Bourne Ultimatum all seem designed to provide more of everything, but less of what we want. Pirates of the Caribbean: At World's End is no exception.

Pirates 3 is a huge, clattering, whirring, blurring, shooting, smashing mashup of everything from the first two. Everything is bigger, everything is more. Every character is back. You've seen boarding scenes, but not like these -- never this huge, never this chaotic. You've seen naval combat, but you've never seen a ship literally chewed apart by cannon fire. It's fun while it lasts, and it lasts a long time, so why does it all boil down to a grand feeling of huh, well, all right then?

Pirates 3 is intensely all right, which alone makes it much more worth our moviegoing dollar than most of the summer blockbusters we've sat through. Most attempts at the kind of guiltless, unapologetic fun of Bruckheimer and Verbinski's Pirates series fail. It turns out that popcorn movies aren't easy. Pirates 3 has an extraordinary level of craftsmanship and amazing stats, but it also has a great deal of control -- the most frequently missed ingredient of such blockbusters. What it does miss are two apparently contradictory elements: focus and chaos.

Picture a movie as a two-dimensional graph, on which anything can be placed; the only rule is the x-axis, which is time. Where the movie deviates toward the bottom of the graph, it moves toward focus. The movie knows what it's doing, why it's doing it, and how it's certain to accomplish it. This is focus, in movie terms. Gosford Park is the most focused film you will ever see. It's also one of the most boring experiences you will ever sit through.

At the top of the graph is chaos; here lies invention, awe, the subconscious. The non-narrative films of Matthew Barney lie entirely at the top of the graph. Even the apparent dips toward structure -- the bike race in Cremaster 4, or the opera in Cremaster 5 -- are just feints. Whatever internal logic or focus the filmmaker may have in mind, it's not presented in the film.

At the bottom of the graph, Pirates 3 suffers, generally on the burdens of being the third of a largely unplanned trilogy. There are so many characters, so many plotlines. Betrayals happen so quickly and frequently from all sides that their resonances seems to cancel each other out, like plucking a guitar string from both ends at random. Who are the most important characters, what do they need to accomplish, and how? The movie jerks all too frequently toward the bottom of the graph, but never takes the time to make a solid, meaningful drive.

At the top of the graph, only one thing needs to be said: The characters take a trip to the afterlife. What makes the afterlife unique? Not very much, really -- same sea and sky, same cinematography. The best we ever get is Captain Jack Sparrow's private purgatory as a salt flat and a series of heat hallucinations. The mythical Far East is a series of generic nighttime sets which blow up predictably. Intangible sexual tension, which obeys its own unknown rules in the movies as it does in real life, is almost entirely absent. The movie wrongly believes that it's in too much of a hurry to ever just stop, take a breath, and look around.

Pirates of the Caribbean: At World's End lies almost entirely in the middle of our imaginary graph, delivering with verve and finesse all of the audience's desires, except for the desire to dream.

Return to SpaceToast.net