From Art to Spine Animation in 1 Click

I’ve been working on a vector character generator/editor for a few years on and off, and often keep fiddling with it as I need it for other projects. Last week I decided to create unique characters for each letter using the color and shape for each one, as well as word cards where colors and shaped are used to help the child remember those letters. The idea of trying to create all of this in Illustrator seems like a real nightmare, and even with a good exporter, recreating all of that in my animation software (Spine) is another nightmare, as the Illustrator script is pretty bare bones and forces you to add bones yourself, and associate the images with slots too. All of this is time consuming – I estimate at least an hour for each piece of ready artwork – probably closer to 90 minutes if I’m being honest.

So I decided to try and build these features into Kwippe, my character editor. This took some serious additions: adding the ability to import external SVGs after my browser wiped out my entire Indexed DB where I stored all 26 letter character definitions…a bunch of new text functions drawing on the letter colors and shapes arrays, a new prop import function so I can add external SVGs from places like and, and finally – a complete Spine export solution that would size, trim, and export each individual part of an image, and save the positions, groups, and names all to a JSON file.

Whew! Normally I’d look at a list like that and figure 2 weeks minimum. But luckily, the SVG import stuff ended up being mostly pre-wired – as I already import the raw SVG from the Indexed DB (could be from anywhere, really) – so adding a text import for the entire project file which saves as a single SVG turned out to be super easy. The prop import was also simple, although it’s not as good. Some SVGs are gnarly with all sorts of weird transforms, gradients, and textures that don’t play well with new programs. But for basic stuff like just about anything from the Noun Project – the artwork imports and can be colored, filtered, and repositioned easily.

I’m especially excited about the text functions – as creating nice text has never been easy in Illustrator or Photoshop – I used to use a program called eDrawMax which was much more user friendly, and had lots of cool presets for nice block text.  For creating images and banners using text, or comic style storycards like I’m doing – Kwippe is downright awesome. And to have all of it export to Spine in 1 click is almost mind boggling.  Here are a few screenshots.

Each piece including individual shapes & words is animatable and ready to go in Spine – complete with bones.

Wow! I am so excited about this, and it has given me a new enthusiasm to keep building Kwippe while I continue with Learn to Read Visually. More thoughts later!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s