Way back in 2011, when we first released Game Over Gopher, our Math Snacks game about the Cartesian coordinate system, we used Adobe Flash as the platform. At the time, that was the de facto standard for producing interactive content for the web.
Since then, Flash has effectively died as a web delivery platform. Its persistent security
vulnerabilities, leveraged by both hackers and oppressive regimes, revealed the inherent flaws of the browser plugin approach to adding functionality to web pages. It was just too dangerous to continue. This essentially forced browser vendors to drop support for the NPAPI protocol, sounding the death knell not just for the problematic Flash plugin, but ALL browser plugins of the same sort.
This of course caused major problems for many developers and publishers, including us here at the NMSU Learning Games Lab. When Flash died, so, too, did all of our Flash-powered content.
And we had a lot of Flash-powered content.
Luckily, the demise of Flash also triggered a sort of renaissance of browser-based interactivity using native HTML5, CSS, and JavaScript, along with the attendant API's like WebGL. A flurry of activity occurred as people scrambled to adapt to a post-Flash reality.
For our part, we got to work converting our Flash-based games to HTML5. This was a challenge, since our games tended to leverage the particular strengths of Flash – the vector-based graphics, the nested timelines, etc. – which didn't always have readily-available analogues in HTML5. A straight port wasn't usually viable.
This made porting these games difficult, but it also gave us an opportunity to revisit design decisions from a decade ago, and allowed us to take new approaches to design and development. I had the opportunity to rebuild Game Over Gopher, and had a lot of fun adding new tweaks and touches to the game, such as new character interactions and making the game fully navigable from the keyboard for accessibility.
But what really surprised me was how robust a web-based JavaScript engine, using solely the default "canvas" element, could be. In my testing during development, I was able to run this rather ambitious tower defense game at hundreds of times faster than normal speed, and it still held up, despite having many, many elements on the screen, each applying deterministic logic and custom rendering on every frame.
When we started, I was very skeptical that we could achieve that kind of performance out of a web browser. We had struggled with the frame rate in the original Flash-based version, having to "flatten" the vector-based gophers into a rasterized format for speed, and even then performance was lackluster, especially on low-end machines. Flash just couldn't reliably push what we were trying to do.
But in-browser JavaScript proved to be more than up to the task, which was a pleasant surprise. And this was without having to leverage the more intensive WebGL programming – it was just simple drawImage() calls into a canvas context. Browsing the various web-based games on sites like itch.io, it's clear that the barrier to making HTML5 games is simply no longer an issue. There's a wealth of new browser games out there, and none of them are using Flash.
So it seems like the death of Flash is something we can move on from after all. It is taking a lot of time to migrate our old Flash content, but it's been worthwhile to get these skills under our belt, because it's looking like this new way of delivering content is going to have some longevity to it. It's standards-based and doesn't rely on any particular vendor. It's secure out of the gate (or at least as secure as the browser itself). And it's performant enough to handle just about any type of game we would throw at it.
We still have a lot of Flash content to port. We'll be porting content for years, probably. As new games come back online, we'll post them here on the blog. And of course, we're still creating new educational products, too, which I'm excited to show off later when they launch.
In the meantime, check out Game Over Gopher here. If you've never played it, it's a great little tower defense game that's fun to play even if you don't need to learn about the Cartesian coordinate plane. And if you do remember playing the old version, you'll find a few new surprises. Good luck against the hordes of gophers!
Glossary
NPAPI: Netscape Plugin Application Programming Interface is an API (application programming interface) that was commonly used by browsers from 1995–2015. All major browsers have stopped supporting it by 2022.
Vector-based graphics: A form of computer graphics made of geometrical shapes. In Adobe Flash, images and animations of this type could be easily manipulated, rescaled, and adjusted.
Tower defense game: Also known as TD games, tower defense games are a genre of strategy games with a goal to defend a player’s location or possessions by building a variety of obstructions such as towers or weapons.
Rasterized: To convert an image into pixels to be printed or displayed.
Cartesian coordinate plane: A 2D coordinate system made up of two axes that allows representation of unique points.
Written by John “CC” Chamberlin, head programmer, Learning Games Lab.