Home Creators Posts Import Register Favorites Logout

Content

We mentioned not too long ago that we would be posting some behind-the-scenes stuff at least once per quarter, and here we are! Let’s take a look at how we go from a static-drawn art piece to a fully animated in-game character.

Let’s dive in and see how a dance is animated!

The Drawing Step

The process starts with Doku’s magic. As she draws out the character, she’s careful to layer and break up components so that they can be animated later. The artwork is drawn as a complete piece at first and then she spends some time splitting it.

The way that a character will move must be considered to avoid having to redo things that end up looking weird when we get to the animation part.

Transferring to the Engine, The Magic of PSBs

When the art step is done, Doku exports a PSB and sends it my way. (Short for Photoshop Big Document.)

The PSB retains all the layering information, which Unity then uses to automatically create a rig out of objects based on the layers. However, it’s not as simple as dragging and dropping. The work is just beginning here. Back in Project Cappuccino 1, this feature wasn’t fully available yet and we had to manually split the sprite sheet by hand.

Despite our best efforts, we sometimes do have small gaps or errors in shading that need to be fixed in the game by using a feathered sprite. We just can’t tell how much a character is going to move around until we start animating and it’s much easier to slap one of these on as opposed to having to go through the entire process of re-exporting the file, re-importing the file, reassigning the sprites, etc.

Boning and Rigging

Once the PSB is in the engine, the next step is to add bones to the character rig.

Bones allow us to animate the character, as well as apply some physics in things like the boobs. In this particular case, we won’t be using physics, but they can be seen in other parts of the game. Boning is a bit tedious and time-consuming since you have to think about how the parts will move, as well as generate meshes that bend how you want them to. There's a lot of fine tuning involved but it gets easier as you become comfortable with the engine tools.

When all is done, we're left with this chaos. But now comes the magic!

Assembling and Animation

Now we can finally move on to putting the artwork in the game and animating. We drag and drop the full object into the hierarchy and add the animator component. At this point, it is vital to make sure that all the bones are in the right place and there aren’t any errors, because once you animate it, fixing that kind of thing becomes a huge mess.

Animation is probably the most difficult part besides actually drawing the art, and is done using key frames. For this dance, I tried to have her hips move in a figure 8 motion.

It basically goes as follows. Hit Record, Move a Bone, Play it back, Hit Record, Move a Bone, etc into infinity until you think it looks good.

The animation will later be synchronized to the music so that her thrusts are on beat, or at least close to on beat. All in all, the animation process probably takes about 8-16 hours or so, depending on the complexity. This one in particular is extremely complex, with nearly 50 pieces of her sprite moving around.

In some cases, we use physics to drive a character’s motions instead of the animation system. You’ll usually find this technique being used on things like hair and boobs that dangle, but that’s something for an entirely different post.

Polish and Effects

The last step is to animate things like the spotlights shining on her. This is also where we begin to animate expressions or motions of the eyes.

Our character’s eyes are layered using a sprite mask and it allows us to make them feel more alive. The irises are made to only show up within the whites of the eyes.

Particle effects are sometimes added at this point depending on what the animation we’re working on is. Yani’s drool for example in one of her dialogue sprites.

The Boring Programming

The final step is to glue it all together with programming. I’d talk more in-depth about that step here but that’s its own hell that would take its own post to properly dive into. Just imagine one of those matrix hacker memes and you’ve got the gist of it.

Hope you guys enjoyed this behind-the-scenes look at some of the work we do day in and day out!

-Vanis & Doku

Files

Comments

Zjoee

I love seeing stuff like this. So with the animation part, it sounds almost like having to do frame by frame stop motion animation which then gets blended together. I've seen other games show their bone mapping, but never go in depth into how the actual animation is made. This is very insightful, thank you!

Dave247

I guess there's an entirely separate section in animation hell for 2D work from 3D, both require countless hours, curse words, blood sweat and tears to be spent in order to achieve their goal. 😅