This week, I’m going to write about my work with sprite sheets and animations. Even though this is more in the line of an artist’s job, I decided to do it because in the end, it turned out to be a numbers game. Plus, we wanted to implement multiple animations on the same sprite, so it required coding.
So why was it a ‘numbers game’. And why the multiple animations. We had three animated objects in the game. The player itself, the hunter enemy (see my post about hunter targeting for details) and a navigation flower. The first trouble we ran into was that Unity does not support animated gifs. Only sprite sheets. So, the gifs made by the artists were unusable. Directly at least. Unity, requires sprite sheets, multiple frames of the gif on the same file. Such as this one.
It is then possible to slice this sheet into multiple individual images in Unity, and turn them into an animation. Here’s when the problems started creeping up. I added a sprite sheet on the hunter and flew there, only to die mysteriously. On close examination, I discovered that I was attacked by a very tiny hunter! The reason? Sprite sheets and idle sprites were of different sizes and the collider was adjusted for the larger idle sprite (and not re-adjusted for the smaller animated one). And Unity has no apparent (if anyone knows, please let me know) ways to re-size the sprites or the sprite sheets. So, easy fix. Change the idle sprite to one of the frames from the animation sprite sheet and adjust the size of both the hunter object and the collider accordingly. Then I added the second animation on the hunter, an aggro animation. In the hunter animator, I added a trigger which changes the animation depending on the value of a boolean variable. The boolean is then changed in the hunter’s code to true or false depending on it’s state. So, I have a hunter with two animations in it. I flew in to test it out, and notice that the hunter shrinks when it starts chasing! Reason? Sprite sheets of the two animations have different pixel counts. This is why it’s a numbers game. So a note to the artists, when making sprites or sprite sheets, BE CONSISTENT. It wasn’t too much work from the animated gifs though. I scaled the image to the same width and a height equal to the height of an individual frame multiplied by the number of frames (so I can fit them all in a single column). Then a small bit of re-arranging in GIMP (GNU Image Manipulation Program, a free software with similar functionality as Photoshop) and I have a sprite sheet! Adding the more precisely sized sheets, I got the hunter to not shrink when it starts chasing (which might be an interesting idea in some cases, but not so in this context).
The player sprite sheet was a lot simpler. There was only one animation. But, due to the weird way it was coded, it has to be facing a particular direction in the sprite for it to fly properly. Also, the center of the sprite has to be properly aligned with the pivot of the moth (did not know how to edit pivots in Unity at that point) for it to rotate correctly. Another two easy fixes. Rotate the frames and add padding on each side to align the pivot and the image’s center.
Finally, the flower. Now this is where things get a bit tricky. I wanted to implement it so that the flower animation only starts playing when the player gets close to it. And, I wanted the animation to not loop. The second one was easy, just a matter of turning the “Loop Time” option off. For the first one, I did a bit of code work. I disabled the animator and added this code segment.
if (Vector3.Distance(target.transform.position, transform.position) < distance)
{
anim.enabled = true;
particles.SetActive(true);
}
So when the player flies close to the flower, both the animation and the particles are enabled. The flower blooms and remains that way (because the loop option is off).
For some polishing, I used the colorize option in GIMP to get multi-colored children and flower sprite sheets. Here’s a sample of the flowers.
Game Design - Programmer Perspective 