Hypercard was awesome, and I miss building stuff with it. The concept of stacks, cards, and links between them coupled with the Hypercard editor allowed for a uniqe creative flow. Hypercard even allowed scripting through HyperTalk. The scripting really allowed Hypercard to be used in so many different ways, people custom software solutions that fit their own 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 experiance I had when using Hypercard.
HTML replicates the structure and linking of Hypercard, but is more rigid to work with for the visual components than I would like. Hypercard also had some 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 a XML editor so unsupported elements, such as <animate> can be added. There is also a bare bones editor in Inkscape that allowes 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 Stuntcopter?
Stuntcopter is simple enough to get done in a few hours, but is complex enough with collision detection and lerping the helicopter position to give a good read on how capable SVG could be when coupled with JavaScript.
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 layed out it was time to start to getting things ready to work with JavaScript. The first thing I needed to do was make sure that all the elements I wanted to access via JavaScript had proper id names associated.
Once all of the pieces were created and named, it was time to start thinking about the game loop and logic. Traditonally a game will contain a core game loop, usually a while loop, where it updates the state of the game by checking for collision and other game events, updating the game objects accordingly and then rendering or drawing the updated state of the game. This can still be done using JavaScript. SVG has an element called <animate> which will update properties of another element over time. The <animate> also has some other helpful functions like looping, it can also call JavaScript function when the animation starts and ends.
Seeing as how this entire project was is just out of curiosity and exploration I decided to not code a core update loop in the traditonal sense by capturing the game process in a while loop. Instead, because I was curious if it would work, I created an <animate> element in the project that calls the game loop every second.
All the other interactons such as the button scaling on mouse over, the score counting up over time, and the score shaking are all done with their own <animate> elements.
This entire experiance was exactly what I was looking for. I use Inkscape all the time for illustrations and so using it like the old Hypercard editor felt very natural, though if someone doesn't have much experiance 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 its 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 am 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 is beyond cool that I can even just use this combination to create simple local graphical based tools or other interactive sotware by just opening a single SVG file with a web browser.
I will definetly be adding this process to my tool kit.