Now that my wrist is largely healed and we’ve returned from a few weeks of traveling, it’s time for another post. Let’s talk about animation!
Brooke, our sole artist and animator, is a big fan of classical hand-drawn animation. (In fact, she’s reading Hayao Miyazaki’s second book, “
Turning Point,” and recommends it so strongly that I’ll forgive you if you buy a copy before continuing to read this.)
Doggins was full of frame-by-frame animation (some of it even originating
on paper), but we had large characters and a lot of frames, and our sprite sheets were sometimes 4096x4096 (for @2x versions). With limited texture memory on mobile devices, sprites ended up being something we fought with a fair bit. When we were considering our next game, the natural solution to me was something like
Spine: not only does it save overhead, it allows greater reusability and faster iteration of animations. But while Spine seems like a great tool, there is something about true frame-by-frame animation that we just couldn’t let go of. How could we retain the charm of classic animation but still reduce overhead? Fortunately, this is an area where our vector-graphics pipeline came in handy.
Here’s an older version of Brave Beard’s walk cycle (with a different hat and muted coloring):
Rather than export each frame of the animation and assemble them on a sheet, each animation receives its own SVG file, which contains all of the animation frames. In Sketch, it looks like this:
Brave Beard looks a little discombobulated, but that’s just because you’re seeing all 16 frames of his walk cycle stacked on top of each other. Brooke hand-crafts each frame in Sketch and plays them back as an animation in Photoshop. When she’s satisfied with it, she sends me the SVG file. After importing it into Unity, it looks like this:
Each frame becomes a Game Object, and I then create an animation in RageSprite (from the RageSuite toolset) that cycles through those frames. It essentially creates a standard Unity Animation that turns each frame/Game Object on and off, depending on the timing I specify. It’s simple, but effective. I should note however, that while this saves texture memory, and SVG files themselves are quite small, once in a Unity scene the artwork becomes a mesh, and therefore takes up a good bit of space. This is a tradeoff I hadn't anticipated, and it may lead to the download size of the game being quite large. An alternative would be to generate the meshes at runtime, but this would lead to a big loss of control and increased loading time, and isn't really practical.
I'm generating some small bits of animation in-engine, such as simple waves on the water’s surface,
steam rising from an espresso cup, and UI animations. But we're glad that the majority of the
animation in the game is hand-crafted. It’s one of the things that drives us, and I’m sure we’ll carry it to every project we do.
- David