Last time, I talked about the audio side of things. This time, we’re painting pictures. Writing the audio library myself was probably not the best choice if this was going to be a released project, but doing so ended up teaching me a number of key fundamentals for manipulating binary data in JavaScript, which would prove invaluable for the graphical side of things. I had actually come up with a couple of approaches to how I’d do this, with the first being to extract all the image data right from the game files and converting them to PNGs, then using those with HTML/CSS to build the page.

I loved the Age of Wonders games as a kid. Amazing graphics, beautiful music, and so much attention to detail. I still have my disk, which became a very fortunate thing for this project. Shockingly, it still installs and runs just fine in 64-bit Windows 10 (albeit with some minor prodding to settings). The title screen doesn’t particularly like my 1920×1080 screen resolution (the sliding background painting doesn’t loop properly) and the smaller maps are pretty much completely visible on such a large screen but other than that it holds up very well.

But enough gushing about my favorite game. That’s not why we’re here. We’re here to learn, and learn I very much did. This project ended up teaching me a number of things about JavaScript that I legitimately did not know about before. The main two things I learned about were the Data View API which allows JavaScript to peek into binary data, and the Web Audio API which allows the browser to play arbitrary sound. Additionally, I dabbled in C++ a bit for this project for extracting graphics from the Age of Wonders ILB format, thanks to documentation found on the Jongware website as well as a little bit from the AoWRead documentation. This proved invaluable to help me get things set up, and eventually I was able to export even complicated composite images as PNG files (via the STB image writing library which I chose because it’s silly easy to use and I already had it due to work on the STB image reading library). Once I’m finished writing the articles, I’ll put the project in my Demos and Examples page.

I am going to start up a new series called “The Playground.” The idea of these articles is for me to pick a project, and walk through everything I needed to learn to actually get it done. This could be for any number of platforms or languages, but mostly I’ll be focusing on web development projects at first. My hope is that these articles will inspire others to try new ideas, and help them learn these APIs and features to create amazing projects.

I’m already getting started on my first set of articles, an HTML5 reimplementation of Triumph Studios’ “Age of Wonders” title screen. Perhaps someday I’ll even implement other parts of the game as well (I have some ideas about different aspects of the game that could be improved by a modern internet infrastructure).