Emotes!

Hello friends. It's me, Flapjack, and I am back. This time I'm going to be going over our Emote creation. Emotes are a quick way to express feelings in game. Our goal is to make a wide variety with some customization and even some hidden features...

Warning: There will be some technical talk, but I'll include some pictures so it's not a snoozefest.

Idea phase

This step is pretty self-explanatory. First we think of emotions or things you'd want to normally communicate in game. “Hi there!”, “Good Game Pal”, “I sure could go for some pineapple pizza right now”. Then we'll find reference of these feelings and try to distill it into one picture. We have big list already, but if you have any ideas you think we can't live without feel free to join our Discord! We're always open to feedback and suggestions.

Concept/asset creation phase

We're working with the talented Ririmon to develop the look of our Emotes. Once we've decided what emotion we'd like to convey we'll attach it to a character we'd like to portray that emotion. Riri will take the idea and come up with a few sketches.

 
Happy little sketch
 

After we have the expression and layout we like, we'll decide how we'd like the emote to move. This is important for the next step- defining the lines and separating the moving parts into layers.

 
Happy little layers
 

We need each moving part in it's own layer so we can bring it into Maya and have it animate the way we'd like. Lastly, for the asset creation phase, color is added and details are finalized!

 
Happy little colors
 

Rigging

We'll then bring the Photoshop layers into Maya and assign them to planes. If you're familiar with a 3D character pipeline, this is very similar, we just use it on a flat plane.

 
 

Like a person, our character will need bones to move, we call them “joints”. We'll add joints to each part we'd like to bend/animate. The more joints you have in a character the more flexible they will be, but that also means more things for the animator to move.

 
Happy little rig
 

Now that our character has joints, we need to add skin so the joints have something to move. This is where we paint weights called “skinning”.

Every object is built by vertexes. When two vertexes connect it creates an edge. Multiple edges create a polygon. Multiple polygons make a mesh or “skin”.

When we paint weights we're assigning a value to each vertex. This value tells Maya which vertex will follow which joint.

The warmer the color, the more influence the joint will have over the vertex. Exciting! Next we'll add fancy shapes, “control curves”, to each joint. Because joints are usually under the skin, these control curves are on the outside of the skin which makes it easier for the animator to select and move the joints they want.

 
Happy little control curves
 

You can make the curves any shape you want and define different colors for the curves. This makes it easier for the animator to read and select the curve they want. In this case we're keeping the rig simple because it's an asset that will only get used once. Next comes the best part.

Animating!

The animator will move the control curves around, which in turn, makes the character move.

 
 

We'll want to keep the motion expressive, but somewhat confined. We wouldn't want the emote to move out past your character or hide gameplay. If you find yourself uttering the phrase “1 v 1 me, Slugger only, no items” often, we also have the option to turn emotes off.

Implementation

Lastly, we get it in the game!

There are a few other secret steps that we'll show closer to our Kickstarter launch on May 1st. I hope you've enjoyed this look at emote creation! Questions, comments, and feedback are always welcome.

- Tyler “Flapjack” Anthony

(discord) (meta games twitter) (my twitter)

Resources if you're interested in certain aspects of game dev

Rig it Right! by Tina O'Hailey - Rigging can be seen as quite technical, but this book is great about breaking the process down and making the ideas accessible. There are also a ton of free tutorials on YouTube if you want to get your feet wet.

Animator's Resource Kit - A fantastic collection of all things animation.

Animating with 3D Smears and Multiples

Hello friends. Tyler “Flapjack” Anthony here to show off a little bit of the animation style and technique going into Dragon Slayers. A lot of fighting games are 3D these days. There are positives and negatives for developing a 3D game over a 2D game. One point I would like to talk about that 2D games do better than 3D games is smear frames.

What are smear frames?

Fighting games are fast. They need to be fast so they feel responsive. The problem with being fast is that the human eye can only detect so much information per second. That's where smear frames come into play. A smear frame will help the eye follow the action and infer movement over a large distance in a short time. Let's take a look at some examples and techniques used.

Makoto - Street Fighter 3: Third Strike

Makoto - Street Fighter 3: Third Strike

Makoto - Street Fighter 3: Third Strike

Notice in some frames Makoto's appendages are stretched and in other frames she's moving so fast she's appears as only a blur!

 
 

Here's an example of another smear frame technique, multiples. Instead of a blurred image to create a sense of speed, the object is multiplied.

Smear frames are more flexible in 2D games because each frame is hand drawn. That's something we aim to capture with our animation.

How does this fit into Dragon Slayers?

Our goal was to implement some of these techniques and allow the animator to have more control of the motion, rather than relying heavily on VFX. Here are some examples using the Slugger.

Smear Frames

Make sure to view these gfy’s in HD! (bottom right button on each clip)

 
 

First is his Weak Forward attack. The animation altogether is 35 frames long. At 60 frames per second that is only half a second long. The hit frame is at frame 7, that gives us only 6 frames (1/10th of a second) to show the character anticipating and executing the action! A very short amount of time to display crucial information.

 
 

Here, you can see more clearly the smear from the bat. We start the animation already in an anticipation pose and hold it to allow the action to read clearly. The swing of the bat is very fast which is why we add the smear frame and have most of our motion as follow through. These things add up to help the player read the action while still feeling responsive.

 A few more examples:

 
 

Multiples

This form of smear frame gives a heavier feeling. Of course it is still very fast!

I hope you've enjoyed this brief look into some of our animations. We're very excited to share more soon! If you have any questions about animation, or our game in general, feel free to visit our Discord or Tweet at us. Until next time!

Tyler “Flapjack” Anthony

(discord) (meta games twitter) (my twitter)

Other great resources

For more in depth breakdowns and examples of fighting game animation, check out the links below.

Mariel Cartwright: Making Fluid and Powerful Animations for Skullgirls

Daniel Floyd: New Frame Plus- How to Animate a Smash Bros Character (series)