We've had our hands full with all sorts of art for the Banner Saga in recent weeks. We've been busy designing cities, UI, icons, environments and what we'd like to cover today for you which is characters. There's a process by which we design the look for the them and implement them into the game and it goes something like this:
We start every character (Re: class) with a sketch phase where we try out different looks and styles. What's this classes job in combat? Are they heavily armored or are they a damage dealer?Since we've set the Banner Saga in a low fantasy setting it's important to us to make a viking look like a viking, not some random fantasy barbarian with huge shoulder pads and spikes and...whatever. Keeping every class looking like they could exist in a real world is the major motivating factor behind each design. Here's the final sketch of the Axeman, which eventually became the Backbiter, one of the upgraded, or promoted versions of the base Axeman.
The next step is to take the sketch we've got and design it to be used in-game on the combat board. Even though the combat design is, in this case, different than the sketch you can see the similarities and the reason for doing a sketch phase previous to this. You may wonder why we didn't do a larger, more detailed phase before this, but the way a class appears in combat is of the utmost importance to us. I've kept the details in his design simple, not just to help time estimates during the hand animated process, but also because I believe this is in keeping with what I see in the older animated movies. I favor burly beards and macho mustaches on my vikings so I went that route for this guy. Since we're using an animated style it's important for us to use colors that aren't garish, but rather a bit desaturated to go with our real world approach. We throw the concept onto our game board and see what he looks like in context with all the other classes. It's very cool and rewarding for us to see all the classes in our game on some big combat board all sized correctly and posed next to each other to see how they interact with each other visually.
Okay we've got the combat design complete after some back and forth with the other guys up here and we're happy with it. We then take the combat design we've got and convert it into a rough that will later be used in close-ups for dialogue and UI screens. It's a time to finalize the details of the combat design. You'll notice his axe is just a viking axe as you'd see them use in a real world setting, it's not some huge, highly ornate epic fantasy weapon. The shield is what vikings actually used, it's a worn wooden shield which keeps the weight down, important during long combat, overlaid with metal to add rigidity and support. His jerkin is what you may see an average northman wearing, and so on and so forth. As average and normal as this man looks you should also get the idea that he's pretty serious and could kill you if need be. He's not called an Axeman for nuthin'!
This is the final stage for a class where we take the rough and convert it into a style that looks like an old animated movie. I start with line-work, tracing over my rough, then use flood-fill colors that are color-picked from the combat design to fill in the character. I then take some of the black holding lines and hue shift them to change their colors, the axe handle was changed to brown, the blue shirt/belt went to a blue holding line and the skin and hair went to a deep red/brown, as did the wood on the shield.
The style you see in the Banner Saga, whether it's regarding the characters or environment or anything for that matter is not done by accident. It's done deliberately and with forethought to provide an experience that harkens back to hand drawn, frame by frame hand animated movies that we were so impressed by years and years ago. We sincerely hope you enjoy it.
Once we've nailed down the design, we film all the animations we need, break them out frame-by-frame and send them to Powerhouse Animations to do the final animations. Powerhouse takes our raw video footage and creates a rough pass based on that. We do a revision pass or two before getting the whole thing cleaned up and finalized. You can see the whole process from video to rough to final pass here.
As you can tell, this isn't just flash puppeteering where limbs just rotate at the joints; we're really having each frame drawn the way you would in a classically animated film. Between all the actions a character can take in combat we have sixteen animations like this created per class. This is the axeman's attack and death animations and we've now gotten every animation for the axeman cleaned up and ready to put in game.