Had been meaning to start a devlog *before* release
but better late than never. Wanted to post a few technical writeups about the making of our latest mobile title, Pinny McBallface pinball.
In short: it's an endless scrolling pinball game with randomly generated levels and a ton of unlockable characters. You can check it out on
Google Play.
The Art PipelinePinny McBallface currently clocks in at 64 unlockable characters, with more planned and in development now. Therefore, it was crucial that we create a smooth, painless pipeline to create these characters so that we could pump them out quickly.
Some early examples:
For simplicity, all characters are roughly the same size, round, and share a common set of animations.
The process for creating these is as follows:
Step 1: draw the character in InkscapeInkscape, while it has a bit of a learning curve, is a powerful open source (read: FREE) vector graphic editor, and forms the first step of our pipeline. We have a single SVG image ("ball.svg") which contains each individual character split into one layer per independent part:
Of course, with potentially multiple layers per character x 64 characters, this thing is getting pretty massive. Generally all layers are hidden except the ones for the specific character being worked on. The "single massive SVG" approach is helpful for speed, as many characters were created by cutting up and remixing existing layers.
The graphics themselves were nothing fancy, using little more than circles, freehand drawing, and gradients.
Step 2: split the layersUsing a simple Python script (
available on Github) and the Inkscape command line tool, this giant SVG is rasterized, generating a single PNG per layer. The result starts to look like an explosion at a mannequin factory:
Step 3: animate in SpineNow that each independently moving part is its own image, we can attach them to bones in Spine:
Conveniently, since all balls are the same shape and size, they share a skeleton, mesh and animations, so none of these have to be duplicated for each character. Different characters are implemented as skins which implement the base image and any limbs the character has.
More to come...