Last week, Masayuki of Live2D visited us to talk about the future of Wispfire using their software to create our animated portraits. After a nice dinner we took this picture before we said goodbye.

We’re glad to have spoken, and we learned that the future will be very exciting!

WispfireGames

WispfireGames

The making of Tabatha Veazie – Animated 2D portrait – part 3

After all the preparation work I did the last two days, it’s now time for the fun part. Did I say fun? I meant the hardest and most tedious part, but also the most rewarding in the end!

Other parts: Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Yesterday I set up all the texture parts with their deformers, making sure they are in the right hierarchy and also in the right draw order [like stacked objects in Illustrator]. If you did not properly name your drawing layers before, using this program will force you to become very organized, otherwise it’s simply impossible to keep track of what and where everything is. You’re going to have to switch between all the different layers, a lot.

With everything set up, I can start working on the movements I want Tabatha to be able to make. With live2D you have many possibilities, but I chose to limit the movements of Herald’s portraits somewhat because of the detailed painting style my portraits are in. I did this mainly to reduce the uncanny valley feeling these kind of animations can sometimes give you if they move too much.

By far, setting up the head movement takes the longest and is the hardest to get right, so naturally I chose to start with that. Things are going to look very weird and well…deformed for a while.

image

Starting with the head turn on the X axis, I set up how many keyframes I want, and then on each keyframe placing, deforming and tweaking every facial feature until it looks right. It’s at this phase that I learned that being a meticulous perfectionist can actually be a good thing. Also, lots of patience! It really comes down to tiny details, if only a small thing is off your animation will look weird. So you have to be hyper aware of every detail and how it’s moving and deforming along the grid.

image

After the X axis head turn started to look somewhat decent, I quickly did the eye rotation, which is easy to do in comparison. I start with the X axis again, then after that is set up, adding the keyframes to the Y axis and linking it to the X. Thus you get this fun 9 point keyframe square.

image

It’s alive!

image

This phase takes the longest time, so there will be no update tomorrow. I will return coming Friday with some more fun and freaky looking gifs, as I continue to add movement to her!

localmaxima:

The making of Tabatha Veazie – Animated 2D portrait – part 1

heraldgame:

Hello, I am Aïda, the 2D artist and art director of Herald! This week I’ll be blogging about the making of an animated portrait in our game.

image

At the inception of Herald, we already knew that we wanted to use 2D portraits in the style of visual novels popularized in Japan. Our first method was…

Any reason to prefer Live 2D to software like Spriter, or was it just the one you found at the time?

The sprite looks gorgeous, I’m a fan of this painterly style and I am going to eagerly await the rest of the series, thanks so much for sharing!

Did you have to keep particular things in mind while painting, before cutting, or can you just paint the sprite like you want to and then just divide it in layers?

Thanks in advance!

Thank you! Glad you like the look of our portraits and you’re very welcome.

We chose Live2D because it’s main strength and focus as a program lies with animating character portraits. It is able to give the illusion of 3D depth in a 2D image, specifically with things like the head turning or tilting. People that saw it the first time in our demo even asked us if the portraits were 3D sometimes!

It also streamlines the process with built in features like auto blink and breath and it has good Unity support. The biggest hurdle with learning the program is understanding the sometimes odd English translations in their manual.

When cutting up the 2D art, the most important thing is to make sure that the colors of the parts blend smoothly with each other. Like the arms for example are cut along the dark shadow lines, so when putting it back together those areas will always blend. Facial features are trickier to get right, but you can do a lot with texture transparency and fading edges.

Hope you enjoy the rest of the series!

The making of Tabatha Veazie – Animated 2D portrait – part 2

First of all, thanks for all the positive reactions so far! I hope you enjoy the rest of the series. I must warn you though, things are going to get a bit weird.

Other parts: Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Today I prepared Tabatha’s texture map, which looks like an assembly box for a freaky paper doll of some kind, which is pretty much exactly what it is!

image

With the previous portrait I did, I was able to copy a large amount of animations I had already created, so I tried to do that again this time, unfortunately that didn’t really turn out as planned.

image

Just take my word for it, it was the stuff of nightmares, especially with all the animations of the previous portrait still intact.

It would take more time to fix this up then to just start from scratch, so I started with a clean slate!

image

After loading the texture in Live2D, the next step is to draw these elaborate webs over every single piece of your image. The way the web is placed is very important as it determines how well you will be able to manipulate the pieces later on. The more elaborate the web, the more control you have over it.

image

After that is all done, it’s time to put Tabatha back together. Using a guide image as reference, I again placed every part of the portrait back on the canvas, basically re-creating what I had in my original painting program.

image

Almost to the fun stuff, but not quite there yet. In order to manipulate the webs I drew over the parts in more detail, you add deformers to the mix. These are grids that work much like the Transform > Distort function in Photoshop. Again, going over every part you want to animate, adding deformers, linking the texture parts to them and placing them in the right hierarchy.

image

Just pull at a point in the deformer and.. tadaa! Angry Tabatha! Sort of. Now, after all this preparation, the real fun can finally start! 

Stay tuned for more!

The making of Tabatha Veazie – Animated 2D portrait – part 1

Hello, I am Aïda, the 2D artist and art director of Herald! This week I’ll be blogging about the making of an animated portrait in our game.

Other parts: Part 1 | Part 2 | Part 3 | Part 4 | Part 5

image

At the inception of Herald, we already knew that we wanted to use 2D portraits in the style of visual novels popularized in Japan. Our first method was to just have hand-drawn static expressions and switch between them, like most VN’s do. It gets the emotion of the character across and it’s not as much work.

image

During the dialogue sequences the 2D art is the biggest focus, and in a narrative based game that’s pretty much the entire experience! Considering that the art would be of so much importance I wanted to do something more with the portraits.

Luckily I discovered the amazing software package Live2D which had recently been translated from Japanese to English. It allows you to import any kind of drawing and model it for animation. I was very excited, but a bit hesitant at first, considering all the examples of work done with the software were in a fairly simple anime style. The process of modelling a character that has a lot more detailed painting in the face is significantly more difficult and labor intensive.

image
image

However, the end result is fantastic and got a lot of positive feedback from people that play tested the game so far! So I’ll be showing the process this week for those interested.

Today I finished rendering the portrait of Tabatha I still had from the previous static tests and prepared it for use as a texture in the animation software. In order for it to be usable I had to cut it up in separate parts today so you get a fun monstrosity such as this;

image

More tomorrow as I start preparing it for animation!