Wednesday, April 18, 2018

Gooberz Art Process, Part 2

Howdy all,

Sam from the Time Gooberz here.  After the art related blog post from 2 weeks ago I wanted to give a follow up and talk about the next step of our artist process.  Once we have a sprite sheet with all of the its animations in it its time to actually animate it.  The first step of this is getting the sprite sheet out of Piskel (our sprite editor of choise) and importing it into Unity.  Fortunately this step is trivial, as both Piskel and Unity use standard file formats to export/import images.

Once we have the image in Unity we need to slice the sheet up into individual sprites.  Unity also makes this process easy using its built-in sprite editor.
Slime Sprite Sheet open in the Unity Sprite Editor being sliced
Unity's sprite editor gives us a slice tool that lets us convert a sheet into a series of individual sprites.  Above you can see a picture of the slice tool begin applied to the sheet, with the results displayed below.
Slime Sprite Sheet after being sliced into individual sprites
Once we have the sheet turned into a series of individual sprites we need to turn those individual sprites into animations.  Fortunately Unity makes this simple for us as well, letting us easily drag multiple sprites together to make an animation. After we have all of the animation objects made its time to put them into the actual controller.  As I talked about in the last Art Process post we have one animation controller state machine that we use for all of the enemies.  This lets us reuse as much as possible, and enforces a consistent pattern for all of our assets.

The Attack Animation State Machine
The image above is a submachine within our state machine that handles the attack animation for an enemy.  The attack animation is broken into two segments, the front swing and the back swing.  The front swing is every part of the animation that occurs before the actual projectiles are fired, and the back swing everything that happens after the projectiles are fired.  Breaking it up like this lets us easily control, to a frame perfect level, exactly when in an animation projectiles are fired, which we do using the intermediate state you can see above, the AttackScript state.

The AttackScript state is an example of how we use animation controller to control entity behavior.  This state has a script attached to it that causes the entity to spawn projectiles, or damage the player, or whatever that specific enemy type does when it attacks.  After that has finished it passes control back to the animator controller by moving from the AttackScript state to the AttackBackSwing state.

This back and forth gives us complete control over when in an animation different effects trigger, and when the animation resumes after those effects have resolved.  We can also use it to override the normal transitions in the state machine by having the script take us to an entirely different state instead of just passing control back to the state machine.  As an example this is useful in the case of an enemy that tries to run at the player and then explode, where after the explosion we want the enemy to die instead of resuming its normal animation loop.

No comments:

Post a Comment