Monday, March 23, 2015

Platypus 'Piler Plugins

Totally excited. Totally.
While working on games over the past few months, we've slowly been augmenting and bettering Platypus, the open-source HTML5 game engine that we co-created with PBS KIDS a few years ago. I'm really excited about a new compiler plugin system we created and I want to share it with you. My wife says I rarely get excited, but she also doesn't watch me code. WOOO!

Each game we develop brings its own set of challenges and requirements. When we've developed games for PBS KIDS, for example, audio is a big deal since there tends to be a lot of voice-over to guide children and buttress the educational experience. However, with a game like Entanglement, supporting multiple languages is a priority since the game is a popular past-time across the globe.

With this in mind, we created a plugin system for the Platypus compiler, so that unique games can include just the pieces they need, and, more importantly, developers can extend the compiler easily to handle new and creative use-cases we have yet to comprehend.

Since Platypus is an HTML5 engine, its compiler is written in JavaScript. Makes sense, no? We've taken the original Platypus compiler and broken it into a series of super-cool plugins. These are all enabled by default, but don't do much if their respective flags aren't set in the game config.json file. The list of plugins can be changed in the global game settings as shown:

"global": {
    "initialScene": "load",
    "plugins": ["js/pngquant-plugin.js", "js/manifest-plugin.js", "js/scripts-plugin.js", "js/language-plugin.js", "js/assets-plugin.js", "js/compression-plugin.js", "js/write-plugin.js"]
},

So what do the plugins do? Glad you're curious! Here's a quick overview:

  1. pngquant - This plugin uses the pngquant compression utility to compress PNGs. You can set how many colors each image should have, and this plugin rolls through the list of assets, smashing PNGs into significantly smaller files.
  2. manifest - This plugin tallies all the assets and creates an application cache for your game. It even handles editing an Apache .htaccess file with mod_rewrite rules so that it can cache the correct audio assets for different browsers!
  3. scripts - This plugin grabs all the JavaScript and JSON files and puts them into a single file for a faster download. It also does the same with disparate CSS files.
  4. language - This plugin uses a language table to create unique language builds for localization. It's a template system that replaces {{language-keys}} in the code with appropriate localized text. It also handles mod_rewrite's to pull the correct index.html if you choose to have multiple languages in a single build. (Alternatively, you can specify to produce multiple single-language builds.)
  5. assets - This plugin copies assets from the source files into the build locations.
  6. compression - This plugin uses the YUI compressor to compress the JavaScript and CSS files.
  7. write - This final plugin handles writing the various scripts, style sheets, and manifest files to the build locations.

The new plugin-based compiler is not yet available on the PBS KIDS Platypus source, but you can get a sneak-peek on the Gopherwood fork