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:
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.
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™. 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 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? 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 II, 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.
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). 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.
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.
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.
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.
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.
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.
(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.