Joel Shuart

  • Sole engineer and maintainer
  • Internal Tool

  • Tech:
  • C++
  • Swift
  • Javascript

  • Key Features:
  • Reads asset file directories
  • Exports asset locations as keys for development
  • Provides acessible details about complex assets (spine)
  • Windows and iOs Support

A tool that generates a manifest of a projects assets, along with pertinent details like directory, animations, and skins. This tool helped by allowing developers to reference assets in engine without needing to care about the assets actual location. For instance if assets were moved around to a different folder for a different loading block engine code references to the asset would not change but the manifest would reflect this.

This tool was originally developed by a predecessor of mine at WorkinMan, but I worked on fixing existing issues, and updating for new target engine (From Flambe to Phaser). This work was done for both windows and ios versions of the application. The work effort involved fixing issues preventing extra details for Spine animations from being correctly recorded in the manifest, as well as entirely rewriting and updating the export for the target engines language.

I did not know swift at the time of working on this, so I learned on the go to ensure we had parrallel support for our devs working in both windows and ios. The original developer had long left WorkinMan, and the current maintainer had enough on his plate, so I took over completely on a whim. I was developing out internal phaser wrapper, and wanted to make sure it had parrity with our old engine. This included the manifest tools.

Asset Manifest Builder

  • Sole engineer and maintainer
  • Prject Specific Tool

  • Tech:
  • C#
  • Unity

  • Key Features:
  • Quickly colour color-by-number pages
  • Help identify 'bleed'
  • Reduce QA time
  • Increase QA accuracy

This was a tool to help with qa workflow for a Colouring Book application. Like the name suggests this tool automatically coloured pages, taking the current palette and applying it in order to colour-by-number pages. This helped speed up the qa process for verifying colour-by-numbers pages were correctly set up. It showed when colours were incorrect, found missing sections in colour by number pages, and helped find 'bleed' when using flood fill between colouring sections on a page. This heavily cut down QA time as instead of 30+ minutes manually colouring and checking, it took seconds and removed human error.

Auto Coloring Tool

  • Sole engineer and maintainer
  • Internal Tool

  • Tech:
  • Javascript
  • Phaser 3
  • HTML & CSS

  • Key Features:
  • Inspect objects
  • View & Edit transforms
  • View & Edit object properties
  • Object specific functionalities
  • Game seperate windows

This was an extremely powerful tool. Phaser 3 is a very solid web based game engine, but it lacks any sort of visual editor. It allows for live editing of common Game Object properties like Position, Rotation, Scale, Origin, Alpha, and Depth. Other possible properties were avialable depnding on the type of object being inspected, like a game scene would relay what objects are members of it. Additionally the inspector tool was built with the ability to monitor or modify any property of the gameobject they want. With this developers could add game objects to a scene and visually make adjustments as needed, or inspect objects in a fully setup scene to help debug errors.

I wanted this tool to be able to exist in a way that interfaced with the phaser engine but was not bound by it. This meant I wanted the inspector to be able to reflect information of the target object, and manipulate it, but the window itslef not be bound to the confines of the game window. So the inspector windows are run-time generated html and css. It creates new dom objects that were designed to be movable overtop the game itself. If a a user wanted to inspect mutiple objects so be it, they can organize their inspector windows as they need. Furthermore It let the inspectors be flexible to the variety of games and devices they could be used on- never in the way of game content.

This tool has probably been the most helpful one I have ever developed. It has resolved numerous bugs by revealing key bits of information about what was happening that would not have been easily recognizable without visual confrimation. On top of debugging it also has proven itsle fincredibly useful for setting up game scenes. It really cuts down on development time positioning objects when you can adjusted them by hand instead of having to guess, edit code, and rebuild repeatedly.

Phaser 3 Inspector

  • Prototype Engineer
  • Maintainer after completion
  • Internal Tool

  • Tech:
  • Javascript
  • Phaser 3
  • Webpack
  • Node.js
  • HTML 5 Canvas
  • Esoteric Spine

  • Key Features:
  • Uploading exported spine files
  • Animation viewer
  • Skin selector
  • Attachment selector
  • Spine scaling, positioning, and rotation

Internal tool that helped test Esoteric Spine animation exports for the Phaser 3 engine, as well as being an easy to use platform for generating animation gifs & videos for clients.

In terms of workflow support the tool allowed for easy testing of new animation exports in multiple render modes (Canvas or WebGL), viewing all animations with the ability to switch skins and attachments to bones manually. This provided an isolated environment free from any engine clutter that may otherwise be causing issues with specific animations. It was designed for easy use sot hat Animators could quickly confirm their export before handoff.

In terms of helping create visuals for clients the tool let team members upload a game ready export and play any animation with various skins set. The tool allows for multiple animation skeletons at once, all positioned, scaled, and animation sequence set as desired to make an animated comp without needing to fully build it out in-game. From there users could generate gifs or record thew window to create deliverable media for clients to review animations.

The most interesting hurdle was figuring out how to load in spines from the browser. Normally assets are available within the files of the phaser project. This one however, I needed to add them to the project, load, and make use of the spine files on the fly. This meant adding outside files to the project, converting them to useable formats by thr browser and linking these to in engine asset caches.

Spine Animation Viewer