Tuesday, December 27, 2016

How many sprites can make an animal happy?


    Of course the real question is "After how many sprites that you've drawn for all the various animal states will you start feeling depressed?"

    A large animal, like a cow or a sheep, can move in any of the four cardinal directions (up, down, left, right). It can move its tail or head. It can sit down for some time, then stand up again. This is not an enormous amount of frames to draw. But then, an animal may be pregnant. Or sick. Or both! Or a sheep can have its fur cut. Since there have to be some visual cues for those states, this means you have to modify or recolor your existing animation frames, then export them, then import them to your game assets...

    There has to be a shorter way to deal with this. It makes me wonder: In some older Harvest Moon games, a cow could be pregnant or sick, but not both. Was it some gameplay design decision, or was it in order to avoid drawing another set of graphics where cows were both pregnant and sick? Anyway, let's summon our trusted friend, Sheepio, and see if we can "derive" some extra graphics from our basic ones.

Hey man. How you doin'.

    So we have Sheepio's basic animations: Standing, walking, moving, sitting, moving its head etc. in all four directions. In these animations Sheepio has its fur all grown. What we are going to do is grit our teeth and make another set of animations, modifying our original set, where Sheepio is pregnant. Since this will be our only other anination set, apart from the bigger belly, we can make its snout redder, as a more visible cue that this particular animal is pregnant.

    The question now is, can we manipulate those two sets to introduce sheepio being sick or having its fur cut, either when pregnant or not? Once again, shaders come to our aid.

    In our graphics editing program, we make the following alterations to Sheepio (in both its "normal" and pregnant sets").


    What we did was basically recolor its upper outline as green and add a blue pixel layer underneath. Why? Well, if you cut a sheep's fur, its body should look "smaller", and in a pixellated world this means that its back could be shifted down by one pixel to achieve this. Also, when an animal is sick, its eyes could be closed all the time[*]in a cartoony, pixellated sprite, not in the real world.. Information about whether the sheep is sick and/or has its fur can be passed to the shader as a uniform. Also the colors of the sheep's torso where the fur will be absent if we cut it have been edited so that they have a hue value that no other sheep pixels do. Since the sheep fur's colors are high brightness, low saturation, deviations in hue are not that apparent (or annoying). In our example I went for a value of 30 (according to photoshop. Game maker insists it's 21, so I'll go with it).


So now our shader needs to do the following:

Is our sheep with fur?

YES:
  • If our pixel is green, give it the color of the sheep's outline.
  • If our pixel is blue, give it a bright color, same as the sheep fur's lighest shades.


NO:
  • If our pixel is green, make it completely transparent (so that the overall volume of the animal is decreased without fur).
  • If our pixel is blue, give it the sheep's outline color.
  • If our pixel has the special hue mentioned above, multiply it with a bright pink color to make it look like it's skin.



Is our sheep sick?

YES:
  • If our pixel is red, give it the color of the sheep's eye-basically the outline color.
  • If our pixel is the color of the top pixel of our sheep's eye, give it the skin color, effectively removing it as a detail.
  • Finally if our pixel is not the color of the outline, apply a shift towards greener.


NO:
  • If our pixel is red, give it the skin color, thus removing it as a detail.


    
    So does it work? Let's see...

From left to right: Sheepio is sick, Freepio is pregnant, Threepio is sick and pregnant, Creepio has no fur.

    Once more a few tricks saved us a lot of time. Generally, when it's possible to do so, I avoid drawing extra sprites as much as possible. Suppose you've drawn all 60 frames for an entity and its various states instead of going the way described above and saving, say, 25 frames. And then you realize that your sprite is too small. Or too big. Or completely wrong. Why redraw all 60 frames when you could've drawn only 35? Draw the base material. Let the pixel shader sort out the details.

    It is also interesting to think that, in the older days, where DOS was still a thing and 256 color palette displays was the standard in game graphics, you could probably achieve all those effects with some clever palette animation (changing values in some palette entries would instantly alter a sprite's colors and lead to marvels such as this). But this is 2016, so let's reinvent the wheel. Heh, I can imagine a 2162 article/tutorial describing a way to draw images based on small squares that old people used to call "pixels"...

No comments:

Post a Comment