- Joined
- Oct 13, 2012
- Messages
- 3,740
- Reaction score
- 25,335
- First Language
- German
- Primarily Uses
- N/A
In a previous tutorial we already tackled human MZ sprites, so I highly recommend to give that one a read before you start with this tutorial.
A classic situation: you made a nice farm map… but there is a specific animal missing you need to round up that map. Or you want on map encounters but there is no matching sprite for the monster battler you have.
Well… why not try to make one yourself?
As usual, I use Graphicsgale to create the sprite.
Monsters and animals come in all sizes and shapes - and more important - in all ways of moving.
Before you start, make sure you have all your references ready. What do I mean with that?
Well, in my example here I’ll make a sprite for the Tigerbunny battler that came with the MZ RTP.
So, what do I need?
I need a design reference, the more pictures, the better. If you don’t have good pictures of what you need, search for specific parts (here I could add additional pictures of tigers and bunnies to my references).
Second, I need a color reference. Getting perfect color ramps that match a certain style can be very difficult and whenever possible I extract the colors out of my references. Here The fox has brown and white, the lady has red and a nice yellow and the guy has an alternate shade of brown I might want to use.
I need a style reference as well. How does the style I want to match handle the structures I need? How does it handle outlines?
My sprite could end up technically perfect but clash with the things that I use along with it!
And last but not least, even though it is covered with the sprites I picked already, I need a size reference. Is my tigerbunny supposed to be big enough to carry a character or a tiny pet? To make sure it does not look off depending on its purpose I use the characters to ensure it has the proportions I want it to have in relation.
Do I need a grid?
That depends!
If I want my character to definitely not be larger than a 48x48 tile, then yes, I need a grid to ensure I stay within these borders.
Personally for monsters I prefer to work without the grid to come up with a more intuitive size.
The downside are possible collision problems, but depending on how and where you use the sprite that might not really be a huge problem.
Step 1: Sketch
For every non-human character that has 4 legs, I prefer to start with the sideview sprite.
Start with size references on the same sheet and have your design reference at hand. Since this is the foundation for everything, you want it to look right!
Now you can add more details according to your reference. I decided that I want to add the brown stripes in the end, as they are just a color variation and don’t add anything structure wise. Since my shapes might slightly change I save up the claws for later as well and I also like to add the “behind” pair of legs later.
Step 2: Outlines
Add an outline to every “hard edge”. Since the belly and the mane have a softer transition, here none is needed at these lines.
The light comes from the top, so use the two shades that are lighter than the darkest color to “shade” your outlines.
Step 3: Shading
Use the “medium” light and dark shade to sketch out your shading. Here you can use your style references to ensure you get them right. Your light still comes from the top.
Use that sketch as base to redefine the shading. Here for example I added the shading for the light parts first and massively used the nine-tailed fox as reference on how to shade fur.
Make sure the darker parts are shaded as well and keep checking with your references that you are on a good way.
Add tiny details as nose and claws and some additional fur tufts as well as the missing legs.
If you had a “plain” yellow tigerbunny you’d be fine now, but it is a tigerbunny, so a recolor is needed.
To make sure the pattern has the “perfect shading” you already achieved at this point, draw the stripes on a seperate layer. Then use a program like Gimp to “swap” the colors of a copy of your sprite:
Now use your color reference (in my case: the brown-haired guy) and replace each of the yellow colors with their “counterpart” in that color ramp.
Now you can use your “stripes” as a cutout and you have perfectly shaded stripes to place on the tigerbunny.
And after all that work we have 1/12 frames done!
Step 4: Animation
To know how to animate our monster we have to think about the walk cycle. A bird moves differently from a rabbit and that again has a different cycle than said tigerbunny. That was a reason I picked it as an example monster, as a lot of monsters have a similar 4-foot-walkcycle.
In this scheme happens a lot.
To get your walk cycle, you remove the hind legs on your basic sprite again (middle) and use it as base for two edits:
-both are moved down by one pixel and the legs are shortened by one pixel
-on one, you move the legs inwards and on the other, the legs outwards
-on one, you move the ears more to the front, the loose fur and the tail to the front/up as well - and on the other, you move the ears to the back, the loose fur and the tail back/down.
Now you can use the legs of the “other” sprite, to complete your sprite. Copy them, and place them with an offset of 2px upwards and 3px to the left behind the opposite sprite. Then add some shadows and make them darker by swapping out colors.
Also: always double check your reference, you might have to realize you forgot to recolor the ear tips right at the end ;3
With this, we already have a fully functional side view sprite and the remaining parts are much easier now!
Repeating all other steps for back and front
For the sketch, it is important to have your finished sprite ready to check wheather your proportions fit the one you have already. You don’t want your tigerbunny to change size or look once it turns around!
Make sure the front and back share the same width, back length, leg length, ear size and placement and so on.
After shading them you could have an result like this one:
You can either have a central light or a light that is slightly on the left - the default characters have both options. Especially for beginners I would recommend the central one, as that makes the animation part much quicker.
Now for the animation part, they work similar on back and front, so we will talk about both at the same time:
We copy the static sprite twice.
After that, move the outer frames by one pixel down, as you can see here.
In the first step we treat left and right the same (which means, we can copy, mirror and paste it after we finish one of them).
One leg moves one pixel up and inward, the other one one inward and many up, it wanders below the body. This one needs to be shaded darker as well.
In this case, the fur around the neck and at the rear end moves with the legs, so I treated it in this step as well. It moves up where the leg moves towards us and downwards, where the leg moves backwards.
The last thing here are the ears, they are usually treated separately in MZ sprites and move inwards in one frame and outwards in the other.
And we are done!
A classic situation: you made a nice farm map… but there is a specific animal missing you need to round up that map. Or you want on map encounters but there is no matching sprite for the monster battler you have.
Well… why not try to make one yourself?
As usual, I use Graphicsgale to create the sprite.
Monsters and animals come in all sizes and shapes - and more important - in all ways of moving.
Before you start, make sure you have all your references ready. What do I mean with that?
Well, in my example here I’ll make a sprite for the Tigerbunny battler that came with the MZ RTP.
So, what do I need?
I need a design reference, the more pictures, the better. If you don’t have good pictures of what you need, search for specific parts (here I could add additional pictures of tigers and bunnies to my references).
Second, I need a color reference. Getting perfect color ramps that match a certain style can be very difficult and whenever possible I extract the colors out of my references. Here The fox has brown and white, the lady has red and a nice yellow and the guy has an alternate shade of brown I might want to use.
I need a style reference as well. How does the style I want to match handle the structures I need? How does it handle outlines?
My sprite could end up technically perfect but clash with the things that I use along with it!
And last but not least, even though it is covered with the sprites I picked already, I need a size reference. Is my tigerbunny supposed to be big enough to carry a character or a tiny pet? To make sure it does not look off depending on its purpose I use the characters to ensure it has the proportions I want it to have in relation.
Do I need a grid?
That depends!
If I want my character to definitely not be larger than a 48x48 tile, then yes, I need a grid to ensure I stay within these borders.
Personally for monsters I prefer to work without the grid to come up with a more intuitive size.
The downside are possible collision problems, but depending on how and where you use the sprite that might not really be a huge problem.
Step 1: Sketch
For every non-human character that has 4 legs, I prefer to start with the sideview sprite.
Start with size references on the same sheet and have your design reference at hand. Since this is the foundation for everything, you want it to look right!
Now you can add more details according to your reference. I decided that I want to add the brown stripes in the end, as they are just a color variation and don’t add anything structure wise. Since my shapes might slightly change I save up the claws for later as well and I also like to add the “behind” pair of legs later.
Step 2: Outlines
Add an outline to every “hard edge”. Since the belly and the mane have a softer transition, here none is needed at these lines.
The light comes from the top, so use the two shades that are lighter than the darkest color to “shade” your outlines.
Step 3: Shading
Use the “medium” light and dark shade to sketch out your shading. Here you can use your style references to ensure you get them right. Your light still comes from the top.
Use that sketch as base to redefine the shading. Here for example I added the shading for the light parts first and massively used the nine-tailed fox as reference on how to shade fur.
Make sure the darker parts are shaded as well and keep checking with your references that you are on a good way.
Add tiny details as nose and claws and some additional fur tufts as well as the missing legs.
If you had a “plain” yellow tigerbunny you’d be fine now, but it is a tigerbunny, so a recolor is needed.
To make sure the pattern has the “perfect shading” you already achieved at this point, draw the stripes on a seperate layer. Then use a program like Gimp to “swap” the colors of a copy of your sprite:
Now use your color reference (in my case: the brown-haired guy) and replace each of the yellow colors with their “counterpart” in that color ramp.
Now you can use your “stripes” as a cutout and you have perfectly shaded stripes to place on the tigerbunny.
And after all that work we have 1/12 frames done!
Step 4: Animation
To know how to animate our monster we have to think about the walk cycle. A bird moves differently from a rabbit and that again has a different cycle than said tigerbunny. That was a reason I picked it as an example monster, as a lot of monsters have a similar 4-foot-walkcycle.
In this scheme happens a lot.
To get your walk cycle, you remove the hind legs on your basic sprite again (middle) and use it as base for two edits:
-both are moved down by one pixel and the legs are shortened by one pixel
-on one, you move the legs inwards and on the other, the legs outwards
-on one, you move the ears more to the front, the loose fur and the tail to the front/up as well - and on the other, you move the ears to the back, the loose fur and the tail back/down.
Now you can use the legs of the “other” sprite, to complete your sprite. Copy them, and place them with an offset of 2px upwards and 3px to the left behind the opposite sprite. Then add some shadows and make them darker by swapping out colors.
Also: always double check your reference, you might have to realize you forgot to recolor the ear tips right at the end ;3
With this, we already have a fully functional side view sprite and the remaining parts are much easier now!
Repeating all other steps for back and front
For the sketch, it is important to have your finished sprite ready to check wheather your proportions fit the one you have already. You don’t want your tigerbunny to change size or look once it turns around!
Make sure the front and back share the same width, back length, leg length, ear size and placement and so on.
After shading them you could have an result like this one:
You can either have a central light or a light that is slightly on the left - the default characters have both options. Especially for beginners I would recommend the central one, as that makes the animation part much quicker.
Now for the animation part, they work similar on back and front, so we will talk about both at the same time:
We copy the static sprite twice.
After that, move the outer frames by one pixel down, as you can see here.
In the first step we treat left and right the same (which means, we can copy, mirror and paste it after we finish one of them).
One leg moves one pixel up and inward, the other one one inward and many up, it wanders below the body. This one needs to be shaded darker as well.
In this case, the fur around the neck and at the rear end moves with the legs, so I treated it in this step as well. It moves up where the leg moves towards us and downwards, where the leg moves backwards.
The last thing here are the ears, they are usually treated separately in MZ sprites and move inwards in one frame and outwards in the other.
And we are done!
