On Sunday the 24th, Wispfire’s Twitch channel will broadcast a live-stream of our Art Director, Aïda, making some awesome artwork for the game! This is to celebrate the final hours of Herald’s campaign, and to rake in those last pledges! The stream is scheduled to start around 20:00 (8:00PM) CEST.
** Herald’s campaign officially ends somewhere in the early morning for our US audience, so we have scheduled the live-stream to take place a little earlier than the actual ending. **
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.
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.
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.
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!
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.
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.
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!
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.
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!
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.
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.
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.
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!
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.
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.
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;
More tomorrow as I start preparing it for animation!