William Ratke

Tonic Tutor: CreateJS Games

While the games for Tonic Tutor are integrated into the site, the work that's gone into them has been substantial enough that it's worth going into them in a bit more detail. Originally all of the games were done using Flash which made a lot of sense at the time I started working on them in 2009. It was the only way to create games or "Rich Media Content" (as it was dubbed back then), and it wasn't apparent at the time how things would evolve away from Flash. It was still a really big deal back then, I remember going to a convention in Toronto with Algonquin in 2009 that was solely focused on Flash and all of the cool things you could do with it, just to remind you how central it was to the internet at that time. The great thing about Flash was that it worked consistently across all of the browsers at the time (which didn't always play nicely back then... yes that means you Internet Explorer 6). In 2013 it became apparent that Flash was in decline and it wasn't going to be viable long term, but at the time sound wasn't working that well in all of the browsers. HTML5 Canvas (and the frameworks available at the time) didn't seem fully mature, and after my experience with Flash, I didn't want to use a framework that fizzled out leaving me to rewrite all of the games a third time.

In 2018, after completing the redesign of the front-end, HTML Canvas seemed to have matured and stabilized, so I began to work on converting the Flash games on Tonic Tutor using the CreateJS framework. It's the framework supported by Adobe, and while there are differences, it was similar enough that I didn't have to completely restructure the Object Oriented class structure I'd used when creating the Flash versions using Actionscript. Javascript has objects and prototyping, but it didn't have the option to create multiple files that represented objects or classes and load them all together. I did some research and decided to use RequireJS which required some work to setup, but saved me a million headaches by allowing me to keep all of my code for each object in a separate file. It does all the heavy lifting, figuring out what the dependencies are between the different objects and loading them in the correct order.

I started out using Jquery, mostly for the AJAX feature to load and save data from the database, but since I was using RequireJS, I had to load a separate version of Jquery which ended up causing a conflict that caused odd and inconsistent behaviour that would sometimes break the Javascript I was using for the website. I stripped Jquery out of the games, using vanilla Javascript instead, and used Axios to handle the requests to the server.

Updating all 44 games was time consuming, but very much worth it. I redid all of the game assets and the interface, giving all of the games a much more consistent look. While I copied a lot of my code from the Actionscript I'd written nearly ten years ago (I was surprised how well most of it stood up), I also took the time to improve on that code as much as possible when I rewrote it in Javascript. All of the games are now future proof and should last for the foreseeable future. The work on updating them was a valuable lesson in trying to make the best decisions you can when you decide to choose a language or a framework, while realizing they all have limitations and nothing lasts forever when it comes to the internet.

Designed by: William Ratke

Technology: Javascript, CreateJS, RequireJS, HTML5 Canvas, Illustrator, Animate, Photoshop, Git

View Tonic Tutor online

Rock Climber
Finger Puppets
Piano Keys
Jungle Journey
Piano Player
Broken Gramophone
Dancing Jelly
Rhythm Zoo
Stick People
Ice Cream
Mini Monster
Note Bird
Boxing Glove