HyperCard was awesome, and I miss building things with it. The concept of stacks, cards, and links between them, coupled with the HyperCard editor, allowed for a unique creative flow. HyperCard even allowed scripting through HyperTalk. This scripting capability really enabled HyperCard to be used in so many different ways — people created custom software solutions tailored to their specific needs, which is awesome. But people also used it to make games, most famously Myst. I wanted to see if I could replicate the experience I had when using HyperCard.
Learn more about HyperCard at https://en.wikipedia.org/wiki/HyperCard
HTML replicates the structure and linking of HyperCard, but it’s more rigid to work with visually than I’d like. HyperCard also had simple drawing tools that made putting together cards really easy.
SVG, like HTML, is made of elements, and those elements have properties that can be accessed via JavaScript, just like HTML. SVG can also contain or link to JavaScript, so if the SVG is opened in a web browser, the code will run. Inkscape can be used as the editor, as it not only offers all the drawing tools for the SVG format but also contains an XML editor, so unsupported elements—like <animate>—can be added. There’s also a bare-bones editor within Inkscape that allows JavaScript to be added to the SVG, making JavaScript a good stand-in for the HyperTalk scripting.
Learn more about SVG at https://www.w3.org/Graphics/SVG
Using SVG and Inkscape, a Myst-like first-person adventure game can be made fairly easily. But can SVG be used to make something like a small Flash game? Or, better yet, a vector art version of the old Mac game Stunt Copter?
Stunt Copter is simple enough to get done in a few hours, but complex enough—with collision detection and smoothly interpolating the helicopter position—to give a good indication of how capable SVG could be for games with faster gameplay.
Learn more about Stunt Copter at https://en.wikipedia.org/wiki/Stunt_Copter
Inkscape worked great as an editor. It was really easy to lay out all the game pieces with simple shapes and position them, including the GUI. Once all of the pieces were blocked out and the general game space was laid out, it was time to start getting things ready to work with JavaScript. The first thing I needed to do was ensure that all the elements I wanted to access via JavaScript had proper ID names associated with them.
Get Inkscape at https://inkscape.org/
Once all the pieces were created and named, it was time to start thinking about the game loop and logic. Traditionally, a game will contain a core game loop—usually a while loop—where it updates the state of the game by checking for collisions and other game events, updating the game objects accordingly, and then rendering or drawing the updated state of the game. SVG has an element called <animate>, which will update properties of another element over time. <animate> also has some helpful functions, like looping, and it can call JavaScript functions when the animation starts and ends.
Seeing as how this entire project was just out of curiosity and exploration, I decided not to code a core update loop in the traditional sense by capturing the game process in a while loop. Instead, because I was curious how well it would work, I created a <animate> element that will loop forever in the SVG that calls the game loop using its built in onrepeate animation event. This event calls the update function in JavaScript everytime the animation loops. Then setting the from and to properties of the <animate> to control the timing.
One of the advantages of this is that it handles the built in delta time calculation that would otherwise be required to make sure the game speed is consistent on all devices. This is a nice little win.
All the other interactions—such as the button scaling on mouseover, the score counting up over time, and the score shaking—are all done with their own <animate> elements.
Learn more about <animate> at https://svgwg.org/specs/animations/#AnimateElement
This entire experience was exactly what I was looking for. I use Inkscape all the time for illustrations, so using it like the old HyperCard editor felt very natural. Though, if someone doesn't have much experience with Inkscape, it might be more of a challenge. There are other SVG editors out there that could probably be used in a similar fashion. Honestly, though, the SVG format is even more simple than HTML, so it's not hard to just write a simple SVG image via a text editor.
After this first little exploration with injecting some JavaScript into an SVG file, I have to say I'm super interested in exploring this combination more. The part of this that excites me the most is the fact that both these technologies have been available for years, and they go together perfectly. It’s beyond cool that I can even use this combination to create simple local graphical-based tools or other interactive software by just opening a single SVG file with a web browser.
I will definitely be adding this process to my toolkit.