Skip to main content

Animation process

By July 23, 2013February 6th, 2022No Comments

Hello backers! As previously mentioned, today’s update will be a closer look into the animation process. We’ll save the usual Q&A section for the our next content update and jump right to the good stuff!

ANIMATION

As most of you know, we went an uncommon route with the character animations for The Banner Saga, deciding not just to do 2D animation, but to use traditional animation techniques to really achieve the old Disney “Sleeping Beauty” effect we were going for with the game’s art style. This decision was based on pure madness in retrospect, but more specifically a deep-seated love of classic animation. We wanted the game to always feel like you’re playing an animated movie.

I would wager the opinion that anyone who has done traditional animation knows that it’s extraordinarily complex and time consuming.

Here’s a very brief background on the difference between traditional and modern animating. I have no doubt that many of you know this, but let’s do a quick refresher:

3D animation
The artist creates a 3D model, an animator attaches a rig to it, also called a skeleton. This skeleton can be positioned the same way you would move around an articulate mannequin, by positioning and rotating joints. Making this movement look natural is the hard part, and requires buckets of skill. The nice thing is that you make a model once, and now it’s quick to rough out and make changes, you can move the camera wherever you want, change the lighting, etc. I’m not sure how many people know this, but 3D animation is now on the verge of being quicker and easier to produce than traditional animation. Proof: Disney channel cartoons are now made in 3D.

Modern 2D animation
This is a fairly modern use of computer tech to make traditional animation easier to produce and look smoother and more fluid. It has its own advantages and disadvantages. Many people won’t necessarily know there’s a difference. Here’s the first example I thought of. Oh God, sorry about that. I honestly have no opinion on ponies. If you watch carefully you can see that usually there’s just a single image that’s being stretched or squashed or flipped. The number of unique images you need to make is minimized. The animation software allows you to create smooth transitions between these different poses so that the result looks nice and fluid. Usually this kind of animation relies on things moving from straight-on angles without any perspective.

Frankly, the animation in this show is rather well done. In my opinion, though, this style of animation loses some of the point of 2D animating. It’s functional, but not awe-inspiring. Just my two cents.

Traditional animation
The principle behind it is simple: just like film, animation is made up of a series of still images that play back so fast they appear to be moving. Somebody got the crazy idea that instead of just recording real people, they’d hand-draw 24 pictures for every second of footage they needed. This is doing it the Hard Way (tm). Though the number of frames per second can vary depending on the action, this is what we decided to do. Traditional animation can come in two flavors: completely hand-drawn and rotoscoping. Hand-drawn means there was no video reference involved. It’s just an animator and a pen.

Rotoscoping
Rotoscoping is the process of doing traditional animation, using film footage as a guide. Many people thinks you’re just tracing frames. This is absolutely incorrect. Tracing frames of animation straight-up will look like you traced frames of animation. (For the record, this is one of my favorite bits of animation ever).

You can’t just copy the raw footage, and that’s where the skill comes in. A good animator can take a piece of video footage and make it somehow more believable and dynamic than real life. If the animators are good you’ll often see both hand-drawn and rotoscoping in the same movie and not know it. It’s a guide, the same way a character artist may use an anatomical model as reference.

Did you know that most of Disney’s human characters were rotoscoped, including Briar Rose from Sleeping Beauty, for example? Compare this video. You can see that each frame of the animation has been drawn from scratch, by hand. There’s some imperfection between them, and some of the linework fluctuates. It also isn’t as smooth as modern animation, which have the luxury of computational blending between key frames and a higher frame rate. But to me there’s something pretty amazing about this traditional style.

So, that’s the challenge we gave Powerhouse Studios, who happen to based right here with us in Austin. Traditional animation!

Brad from Powerhouse has been kind enough to write up an overview of what they’ve been doing. Here’s Brad:

THE ANIMATION PROCESS

Powerhouse Animation Studios, Inc. is very excited to be a team member on the Banner Saga. When we first saw the initial designs for the game we knew that this was something we wanted to be involved with. Not to mention we love working with other Austin independent companies. Powerhouse is probably most known for our game cinema work. We created the cinemas for Epic Mickey 1 and 2, Starhawk, DC Universe Online, Risk Factions, Darksiders 2, as well as others.

When we first met with Stoic we talked about doing both cinemas and in-game character based assets and have been very excited about helping bring Alex, John, and Arnie’s vision to life. The Banner Saga was a perfect fit for the studio. We share a lot with Stoic, both in terms of what we expect from our crew and our artistic interests. We loved that the game was inspired by the great 2D animator Eyvind Earle, and we even initially shared Norse mythology books back and forth.

Everything is being animated very traditionally, taking great care to live up to the expectations set by Arnie’s character and concept design.

CINEMAS

For the cinemas we’ve created, we are following the traditional animation pipeline which has not changed much since the 30’s. The main difference being that we now draw on Cintiqs directly into Flash (for this job we were solid Adobe: Flash, Photoshop, and After Effects).

Before we started on the animation we did a short test animation to prove to the guys at Stoic that we could achieve their style in the animated world. In animation production, the more complicated the designs are (we call it pencil mileage) the more time it takes to animate, and therefore the more it costs in man hours to make. On this project we had to find a balance between style and budget to make sure we could achieve what we were all seeing in our heads. Arnie’s designs were beautiful and we wanted to treat them well in their transitions to the animated world.

Step 1: Storyboards and Animatics: Arnie supplied us with some rough boards and we turned that into an animatic.

An animatic is storyboards timed to audio. For the animatic we needed audio, and we didn’t have the voice acting or music completed yet. So the first audio of the piece is our creative director, Sam Deats, reading the lines with a bit of an accent. Maybe that version should be a bonus feature on the game, (just kidding, Sam). (Alex’s note: he sounded like Dracula, it was fantastic). In traditional animation you don’t want to work on anything that isn’t going to be in the final piece, down to the second. After all, for each second we have to do 12-24+ drawings depending on the amount of characters and backgrounds. Therefore, we worked really hard with Stoic to nail down the cuts and timing in the animatic.

Step 2: Rough Animation: After the animatic was locked we moved forward with rough animation, which is exactly what it sounds like. Animators like Patrick Stannard would work on roughing out the scenes.

Patrick Stannard working on a scene.

The final rough version of Patrick’s scene.

Step 3: Backgrounds: While animation is being done, artists work on backgrounds from the animatic layouts. The backgrounds in this piece were meticulously digitally painted in Photoshop, and we tried to live up to the standards set by the Stoic Team.

Louis Norris working on a digital painting.
Some examples of the final backgrounds.

Step 4: Inbetweens and Clean-up: The rough scenes are passed to clean-up artists to be colored and “inked.” It takes a steady and patient hand to make sure that designs like these stay on model and stay true to the designs. Sometimes our animators do their own in-betweens and sometimes more are added by our skilled clean-up artists.

(Alex: to elaborate a little on “in-betweens” – different animators have different specialized tasks. Some create the key frames, which you could consider the anchors that make up the full animation, the specific frames that are key to creating the motion. In-betweeners will fill the gaps between these key frames, and have learned how to be really proficient and maximize the fluidity of the animation. Clean-up are animators who take the rough as seen above and make sure the line-weights are correct and finalized. Each role requires tons of skill and each role is equally important to the final product).

Stephanie McCrea cleaning up a scene.

Step 5: Composition/Post: Everything is assembled in After Effects. SWFS of Flash scenes, and Photoshop-based painting are combined, and effects (snow, lighting, color correction) are added to get everything to its final place. This is the result–go back and watch the rough scene and you can see how much is added in this process.

 

GAME ASSETS

I have heard that some folks have asked how Stoic got its “toon render” look for the game’s assets. These assets are all 2d animated pieces, folks. They are hand drawn in Adobe Flash. (Alex: Flash gets a bad rap sometimes, because of the low-quality stuff that gets pumped out on the internet. But Flash is an excellent tool for animation, especially in the hands of experts. We take Powerhouse’s flash output and sprite-sheet it into our engine).

The process for making the game assets is actually pretty similar. We do rough animation and get approval from Stoic before moving to clean-up, but there are a few differences.

Ronnie Williford animating a game asset.

{Alex: A bit of info on character animation – because many of our base characters are used to create advanced classes, Powerhouse takes special care to make sure that certain assets are modifiable on separate layers, such as weapons and heads. This allows us to make variations at a much quicker pace than a brand new class).

 Cindy Crowell doing clean-up on a character asset.

Rotoscoping: Since Sleeping Beauty (which used a lot of rotoscoping) was inspirational for this piece, and also to add some more Kickstarter incentives, the guys at Stoic filmed a lot of the game play action that they wanted their characters to perform. They would provide us footage of some of the actions for reference. Unfortunately, the rotoscoping process is never a straight lift. Factors such as camera shakes, and the odd fact that if you just trace live action you lose a lot of the weight and fluidity that you get from traditional animation, really leave a lot of the action in the court of the animator.

 (Alex: Every character in the game is one of us, looking like buffoons in the front yard. To capture characters from the correct 3/4th down angle (for isometric gameplay) we had to film from a fixed position on a ladder.)
(Alex: From this footage we provide a template for creating the final animation. You can see big changes to the final animation below, which in addition to making the character look cool instead of silly, takes into account weapons and fixes the timing for the animation so that it plays at a more enjoyable gameplay speed.)

(The hunter class shown here uses both melee and ranged weapons, which may be interesting to those of you who have played Factions.)

Smaller scale: Since these characters were varying sizes, and the humans especially could get quite small on the actual pixel dimensions of the game screen, and we were working in vectors (Flash is a vector-based program). A lot of thought and care went into making the designs work at this scale.

Amount of work: Since these characters are controllable and need to maneuver on the field, we needed to do all of their action animations from different sides—it was a considerable amount of work.

 

(Alex: each character has essentially 8 animations each, filmed from two directions, northeast and southeast. With each animation coming in between 30-60 frames, that means each character class can have up to 1000 unique frames of animation)

THANKS
Thanks to the team at Stoic for letting us share this, and for letting us be a part of such an inspirational project. Thanks to the crew at Powerhouse for all of their hard work on this project. If you want to know more about Powerhouse Animation, check us out online at www.powerhouseanimation.com

—

Thanks to Brad and the amazing artists at Powerhouse! Next time, we’ll be releasing video footage of the first playable content for The Banner Saga. We’ve got a huge portion of the game now in the bag and we’re looking forward to sharing it! Plus, another free gift for backers in the very near future. Stay tuned!

Thanks!
Alex, Stoic and Powerhouse

Close Menu