"The ability of Harmony’s Cutter tool to delete protruding
lines was a very handy feature for our reduced design." — Ferdinand Engländer, Lead Animator

Creating Award-winning Games Using Toon Boom Harmony

If you’re keen on high-quality games visually and content wise, be sure to check out the stellar creations Studio Fizbin has in store for you.

Traditional animation for Games using Toon Boom Harmony

Created using Toon Boom Harmony, The Inner World is a classic-style hand-drawn adventure game for PC and Mac. The iOS app was launched in November 2013. Gamers can solve plenty of challenging puzzles with Robert and Laura in the twisted world of Asposia. They can experience an atmospheric and humorous story full of bizarre characters.

In early production, the characters were thought up as they were needed in the story and designed by Mareike along the way from roughs to detailed model sheets. Later on characters were also made up "on the spot" to fit right into the game design as needed by Sebastian and Florian with feedback from Anika. These characters usually didn't get a detailed model sheet, only a few reference drawings.

Together with the game designers, the animator made a list of actions each character would definitely need to fit the requirements of the game riddle, which gestures would be nice to have during a dialogue, and decided what will be made as a cut-scene or an in-game animation.

The Inner World Characters

Hand-drawn animations rewarded tremendously

Studio Fizbin has been rewarded tremendously for having a unique, bizarre 2D-look with hand-drawn graphics and animations. “It’s just true that without using Harmony, we couldn’t have done the high quality animations you find throughout the game, either as in-game animations or as sequences.

The press and gamers love the animated, crazy characters and each animation cycle, such as the idle-animations, which are recognized as high-quality work. For us, the feedback is great, it keeps us going another step beyond.” shared Ferdinand.

“One last word to finish: yes, we had great tools, great support and an awesome core team. But without our great team of animators, coloring experts, interface and motion designers, sound designer, musicians, testers, and all other helping hands, The Inner World wouldn’t have been possible. See you on the next project,” he concluded.

Reuse of drawings with Harmony

“Since the memory in the mobile devices is very limited, in-game animations had to be produced with a lot of consideration. With the body usually being the biggest layer, it saved a lot of memory having only two to three body poses (with a couple of frames transitioning from one pose to another) and then using those same drawings with different gestures and facial expressions - layers that take up less space in the sprite sheet. With Harmony we can keep identical drawings linked, reuse was easy,” explained Ferdinand.

With the demands for layer separation and effective reuses in mind, the animator created the character's movements. While scripted animations (camera motions) in the game engine run more fluently, the frame-by-frame animation could only be on 12 frames per second due to the sprite sheet sizes.

Games
Discover the gaming pipeline

Benefit from using a tool that is great
for animators and programmers.

Directly drawn frame-by-frame on a Cintiq

When the animator started working, there was the list of actions, a more or less rough model sheet, the background (layout or finished, since it helped the programmers if the character already stood in the right spot) and a short briefing from the content director. With nothing like an animatic or storyboard, the animators were relatively free to come up with their own acting choices, which usually led to delightfully creative contributions nobody would have been able to imagine during the less visual writing process. “Most animation was drawn frame-by-frame on a Cintiq directly in Harmony. Feedback was given after a first rough pass. The same animator often did clean-ups and in-betweens. This way one person generally kept a secondary-character all the way through. Later animations benefited immensely from the animator knowing the character extremely well,” continued Ferdinand.

Handy features that save time

“The ability of Harmony’s Cutter tool to delete protruding lines was a very handy feature for our reduced design. Colouring was done by an assistant. Many characters in The Inner World have striped arms, so being able to just swipe the paint tool over several unpainted areas at once was a real time saver,” shared Ferdinand.

Character Design

Feed the animation images with Excel lists

The assistant also had to prepare detailed documentation for the export. Since the animation just shows the character doing one action after another, the programmers needed the following information:

  1. Which action is located in which frame range.
  2. What layers come in which order - with special instructions where needed. In some cases the player can take something from a character which then has to disappear.
  3. From which position the characters can go to other positions, and which transitions fit between them.
  4. Which part of an animation needed to be played through before the player can interrupt it (to avoid jumping and twitching when the player triggered a new event).
  5. Instructions for facial expressions and mouth movements for all the possible emotions. A talk cycle consists of a cycle of open mouth shapes that get played in-game while there is sound of a certain volume in a character's speech file. During pauses a closed mouth is shown.
  6. Special instructions for actions or layers that are looped while holding a position.

Then every action and transition got exported one after another, layer-by-layer as image sequences and named in a way that the programmers could identify. A file named "C00_A07_tp01-tp02_armR_025.png" for example indicates that this is frame 25 of a transition between poses P01 and P02 of a special action (so none of the standard talk or walk cycles) from character 00 which is our protagonist Robert.

In Harmony

“Eventually we made a tool that can read those Excel lists and feed the animation images to the engine automatically. For future projects, we would like to develop a system that can read annotations from Harmony's Xsheet and is able to automatically document, export, and roughly implement the animations,” explained Ferdinand.

The program generating the sprite sheets from the exported image sequence could cut unnecessary transparent space around the characters, while keeping their position on the screen as XML data, identify and eliminate drawings that were on hold or reused so they would only occupy the memory once and arrange them efficiently space-wise on a large sprite sheet.

The Inner World Team

The Inner World Team

Animation changes Integrated into the game production phase

“Usually there were one to two and, rarely, three or more animators at the same time, so that animation was not a separate production phase, but progressed alongside the general development of the game as soon as a scene was set in stone. Of course we sometimes had to go back and slip in some more cut scenes to stress hints and story elements that would pay off in the later scenes but weren't needed in earlier versions of the game. Apart from additions needed for the storytelling, the feedback from constant testing changed the game design, which sometimes required animations to be changed on short notice,” added Ferdinand.

The cut scenes that were usually close ups of a special action were not only an interesting stylistic device because it made the experience more cinematic, it also was necessary to depict complex motions that would have taken too much space in the sprite sheet. Cutting close to the characters and blurring the background avoided showing continuity errors that resulted (e.g. showing objects that the player already took in-game). Those cut scenes were produced more traditionally, whereas using pre-existing assets could often leave the limits of the in-game animation.

The main characters’ walk cycles and general give-and-take actions (looking at and reaching to different height levels) were animated early on, so objects could be placed where the character can actually reach them.

About Studio Fizbin

Located in Ludwigsburg, Germany, Studio Fizbin is an independent game studio founded by Sebastian Mittag, Alexander Pieper, and Mareike Ottrand in 2011, while they were still studying. Operating from a living room office without much funds but tons of creative ideas, Studio Fizbin started producing some really successful mobile apps. They strongly focus on story-based games and apps with exciting, original and humourous characters, worlds, and tales. For example, in cooperation with Studio Film Bilder in Stuttgart, they released apps based on the kids cartoon Tom and the Slice of Bread with Strawberry Jam Bread and Honey. The two interactive movie apps lasted for weeks among the top three of Apple iTunes Entertainment charts. In 2011, the development of their first, big game project titled The Inner World also started.

Despite its young age, Studio Fizbin has become quite successful very quickly. The Inner World was nominated for the German Videogames Award in 2012. Also in 2012, the animated short movie ABC won the German Economics Movie Award. In 2013, Studio Fizbin won the Intermedia-Globe Silver Award for the animated short movie trilogy Commissioner Potatoe Investigates. The German version of their gaming debut The Inner World was released in stores on July 18th 2013 for PC and Mac. The press was excited and rated The Inner World 80% and higher. Gamers, as well as the gaming industry, praised the intense atmosphere, the intelligent puzzle design and the funny, ambiguous humour.

fizbin.de