top of page
  • Writer's pictureBen

Devlog #10 - Our characters finally got a spine

Hello again you wonderful people, today's devlog is ALL about animation. When we set out with our 2D/3D hybrid art style, animation was a concern for us. We initially settled on doing all animations by hand, relying on the amazing talent of Katie and Lauren, but this quickly began to show its flaws. Being a small team, having two team members working on hand animation whilst still requiring them to be producing concept art, UI and promotional work just wasn't sustainable. With our new favourite purchase, we solved this, and oh boy, what a difference it makes.



The old ways

Before I go into detail on how we do things now (if you know a thing or two about 2D animation, you'll have a pretty good idea of where this all is heading), let's talk about how we used to produce all our animations.


In the days of old, we'd spend a lot of time discussing animations before even getting a chance to see how they might look. Hand drawing each frame resulted in either limiting animation or taking forever to put an animation together (it took us months to get together a simple player animation base).


The best method we had was to put together a sketch and a skeleton of the animation, outlining how the character may move and how the overall animation may look, before then drawing over with a full sprite, drawing out each frame and then finally shading the animation.


Five drawings for just one walk cycle...


With a lot of sketches, flat passes and shaded passes, each animation would require being drawn upwards of 3 or 4 times just to get to a baseline that we could then feedback on and change as needed... It doesn't take much to realise that in a team as small as ours this is a lot of work. On top of this, whenever there were any changes needed (and there were a lot of changes often) we'd have to literally go back to the drawing board, redrawing troublesome frames over and over and sometimes redesigning entire animation sequences until we were happy with them.



Not so spineless

After a lot (and I mean a lot) of deliberation, we decided to invest in a new tool for our animators: Spine. Spine is a 2D animation software that utilises skeletal image deformation. This enables us to create entire animation sequences using only one or two hand-drawn sprites, allowing for quick iteration on animations as well as the ability to tweak small portions of an animation without requiring entire sections to be re-drawn from scratch.


It immediately saved us time.


Where before, a single animation could take up to 3 weeks to complete, our team are now able to output fully complete characters (with four or more animations) in the same time frame or less -- a massive time difference. Another added bonus was how much smoother we could have our animations look, as Spine interpolates the bones between frames.


The one downside of using Spine was that it made shading our characters a lot harder, as the angle of a character lit by the sun doesn't tend to change while it moves. This means that we'll have to look into lighting our sprites in engine, and perhaps adding a little more texture to them in future to bring back that element of depth.


Looking at the frog side by side you can clearly see a difference in detail and quality, and the new animations took around half the time!

Full animation cycle for cartoon frog spitting into the air

Full animation cycle for cartoon frog spitting into the air



Going forward, this will mean that we can make progress much faster, keeping you guys in the loop with bigger updates, more content, and above all get the game in your hands much sooner! Lastly, I just wanted to mention that our Steam page has had a little overhaul (with a re-edited trailer and everything) - so be sure to check it out and wishlist if you haven't already!


Can't wait to tell you all about the new world we've been putting together, see you all very soon! -B


Full animation cycle for magic cat








20 views0 comments

Recent Posts

See All

Comments


bottom of page