A quick update on the project… that will likely serve more as a brain dump for where I’m going with it!

Where I’m at

So here’s what I’ve got so far: it’s essentially an animation player. Click the Play buttons.

Note: I used Surge to host this, it’s pretty amazing!

How it works

So far I’ve only created one animation, and that is the one you see above. It’s made up of three things:

• the body configuration: a representation of the hierarchy of body parts: hips, torso, right leg, left leg, etc. It also defines how to represent each part: either as a full image, or as an area part of a spritesheet.
• the animation configuration: a list of keyframes per body part. Those so far cover rotation and position, but I may expand on that later.
• the spritesheet or individual images.

This means that changing just a single spritesheet will affect the aspect of all frames. In a similar manner, changing the keyframes will result in a different animation. Changing the body configuration may or may not work depending on the changes: removing body parts will result into incompatible body/animation configurations.

Where to go from here

I really started this project to see what it would be like to port this older project of mine, I never set out to build something with a grand goal in mind. That said, I can see a couple different things to explore:

1. making this a small tool to create animations in order to build spritesheets for video games. For example you could create a character hierarchy, draw the corresponding body parts once, build several animations (walk, run, jump, etc.) and export those to PNG files.
2. using this to build little movies. Much the same way as #1, you’d need to be able to create bodies and animations, but you could also link those through a storyboard-like interface. For exanple, you could have a character run from frame 0 to 120, switch to jumping from 121 to 150, and then run again. The tool would either generate a series of PNG frames or export directly to some video format.

In both cases, the tool needs the following features:

• hierarchy creation and export.
• individual body part image loading and bundling.
• animation editing and export.

For #2, I’d need some kind of timeline showing keyframes, much like Flash back in the day.

How to do it

I think this is a pretty good opportunity for me to pick up React since the UIs I need will be fairly simple and will deal with a lot of data entry and redrawing.

I alreay dread the learning curve of doing ES6 + React + testing + webpack + gulp all at the same time. Oh well.