Character Sprites for MV

Avery

Sleeping Dinosaur
Restaff
Joined
Oct 13, 2012
Messages
2,283
Reaction score
13,059
First Language
German
Primarily Uses
N/A
Now that RPG Maker MV is out we have a bunch of entirely new graphics to work with. Since I haven’t seen a MV specific Sprite tutorial so far, I decided to write one on my own . Of course many of the things are not just useful for MV, but if you are only interested in this style, it’s easier to learn from examples using it.


Of course now that there is a better generator it seems less important to learn this, but for creating unique chars that express exactly what you have in mind nothing can beat a new made sprite.


To explain the things properly I’ll show you most stuff on an examples I created for this.


First something that seems just to be a tiny detail, but can do a lot about how good the sprite expresses the character it stands for – the face.


Since the faces are still not very large (sure, in relation to the body, but not as standalone) changing a few pixels will make a lot of difference. Here are four examples:





You can see that even though there is no too huge difference between the different faces, but those make a huge impact.


So my very first step is always to check if the standard face is really the best choice to go along with the char I’m going to portray. For this tutorial I decided to go with a fandom char, so it’s easier to show how close you can get to something that you have excatly in mind. I chose Elsa (Frozen), mostly because she is very famous and if you don’t know her you won’t have a hard time to find references to check if the result portrays her well. Additional, she has no “basic” hairstyle, wears Makeup and has this transparent cape, all special stuff that might help you with creating similar details.


Face - on the same layer as the base


To get closer to Elsa’s look I just changes a few pixels around the eyes and eyebrows. I also moved the nose slightly so there’s no too huge gap between the eyes and the nose.



When you adjust the face, less can be more. You don’t need to redraw everything and it isn’t even necessary to change it at all, just in case the basic face fits the character of the displayed person yet. You just maybe don’t want the evil overlord to stare at you with the large standard kawaii-eyes and so on.


To apply make-up you first have to consider what is really needed. In this case, I didn’t add the lipstick because It gave the expression of a resting ***** face to me – nothing I wanted for Elsa.


As for everything else, I recommend to try to get along with default colors first, so I used the magenta of the fairy for the eyeshadow.  Subtile is an important thing here, we are creating a serious royal person and no drag queen.





(left to right: no make-up, color reference, Lipstick version, the final version, example for too much)


As long as there’s no color gradient in the makeup, just follow the tones of the face – darker color where’s shadow, brighter one where’s light. You aren’t putting a mask over the face, just applying a different color to some regions ;3


 Now it’s time to make sure that the sideview face matches your frontview one:





This would also be the point where to adjust other parts of the base that might be different from standard - color, shape, missing limbs....


Then we continue with the next part:


Hair - seperate Layer





As you can see we have roughly two ways of shading a characters hair. The version on the right is the more common type that is used in the default files, but in case of a specific hairstyle you can also separate the strains, as seen left.


For our Elsa we need the more detailed strains, as her hairstyle is too complex to to be displayed properly in the “smooth” look.





To get the result we want, I at first roughly scribble the shape of the final hairstyle. On the right side of her head you see the palette I used for that. Since I found no matching tone in the default sprites, I took the palette of the hair of another char and adjusted the hue, tone and brightness. As result the steps between the colors still fit well enough into the scheme, but have the tone I was looking for.


As second step I added the outlines to the hair and divided it into the strains. As second step I adjusted the colors on these lines in black, lighter and darker lines. Since our light source ist above our char and slightly on the left side, there the lines are the lightest. They get darker on the right and at the lower and and the lower parts even get black outlines, no matter which color the hair originally is! In this step I also shaded the darkest parts.


Now it’s time to add the highlights following the same scheme. The brightest on the upper left, everything else slightly less strong shaded with that color. In the end I add some bright white highlights (You can’t see them that well because of the light color) and add it to the base. In the end I adjust the skin right below the hair with some “shadow” pixels.





Now we adjust the hair to fit the walking animation. In this case we have only two “movable” parts that get adjusted a little to wave with the walking animation.


In ace you are insecure, the default files are the best place to check how certain strains and styled are supposed to behave regarding the animation.





As you can see, the rest of the hair is created similar. To get the backview matching the frontview version I copied the upper part of the hair and edited it mirrored into the backview sprite.


Here you can see that I didn’t draw all her loose strains, which has several reasons. The main point was that in the backview they would be just a few loose waving pixels around her head and look pretty odd – on some points you have to decide which details are worth to be added. As you can see in the example, it doesn’t really matter, you can still recognize Elsa.


Clothing I – separate Layer


The very first step is too hide the layer containing the hair – sure some parts will be covered in the end, but it is easier to properly shade the clothing without seeing the hair layer, and if you just create the full clothing you can easily reuse the clothing later on characters with different hairstyles.





For the clothing we’ll use the colors of the Slime, I also added one of the default chars or comparison. As you can see, the lower part of the dress is a straight line, what is different to how Ace or XP handled the perspective of dresses and skirts.


[SIZE=11pt]To get the clothing we need, I just draw a plain shape of the clothing over the base and add the shading. There is not that much to tell about the shading of clothes, since there is technically not very much space. Just try to shade with the shape of the body, highlights on higher parts, shadow on the sides and lower parts - and try to add a little structure if possible. The structure of course depends on the material. For metal parts for example try to work with sharp highlights, for fabric try to imply wrinkles  [/SIZE]if possible.





It continues as with the hair – we make a matching animation for the dress and use the same technique to create the side and backview version. For the back one I just copied the front view one in first place and edited it to match the other angle, that way they share a similar shading and share the same shape.


Outfit 2 – separate layer


For the semi-transparent cape we need another new layer.





For the transparent cape we need just 3 colors, since it’s going to be see through anyways.  After that I just set the layer on a opacity of 70% - and we have exactly the effect we were aiming for. Using only three colors avoids to have tons of various colors as result, since we overlay them with the sprite and create many new one like this.


After that we make the hidden hair layer visible again and adjust everything that messes up. In this case, I fixed the outlines around the hair a little. A black outlines belong to every lower border where an object overlaps another.





We now have the choice either to let the parts of the cape that overlap the opaque sprite transparent or add a white background just to the transparent parts.


Here is the slight ingame difference:








And that it is. If you have questions, don't hestiate to ask them //rmwforums.s3.amazonaws.com/emoticons/default_smile.gif
 
Last edited by a moderator:

2DGameStudios

Veteran
Veteran
Joined
Oct 11, 2015
Messages
184
Reaction score
43
First Language
English
Very nice tutorial Avery, do you think you could make one up for weapons?
 

Candacis

Pixel Pusher
Restaff
Joined
May 2, 2012
Messages
1,446
Reaction score
1,945
First Language
German
Primarily Uses
Awsome tutorial, very nicely explained and with a great sprite at the end. Maybe add an explanation for the downed pose as well sometime?
 

Krad1213

Laughin-Prince
Veteran
Joined
Apr 6, 2015
Messages
51
Reaction score
23
First Language
English
Primarily Uses
RMMV
Is there an easy way to shade? >-<"
 

Floofs

Warper
Member
Joined
Jun 5, 2016
Messages
2
Reaction score
0
First Language
English
Primarily Uses
Is there an easy way to shade? >-<"
That depends. Do you want it to look decent? 


If so, practice makes perfect.


If not, use gradients or pillow shading.
 

Krad1213

Laughin-Prince
Veteran
Joined
Apr 6, 2015
Messages
51
Reaction score
23
First Language
English
Primarily Uses
RMMV
That depends. Do you want it to look decent? 


If so, practice makes perfect.


If not, use gradients or pillow shading.
Pillow shading?
 

Floofs

Warper
Member
Joined
Jun 5, 2016
Messages
2
Reaction score
0
First Language
English
Primarily Uses
Last edited by a moderator:

Dungeonmind

Lvl 4000 Humanoid
Veteran
Joined
Sep 2, 2013
Messages
449
Reaction score
272
First Language
English
Primarily Uses
RMMV
Very useful for people trying to learn how to sprite. Thanks for this!
 

The Magic Circle

Listen to my Soundcloud fam?
Veteran
Joined
Jul 12, 2017
Messages
37
Reaction score
14
First Language
English
Primarily Uses
RMMV
This is an extremely impressive tutorial. Pixel art is a huge pain to do properly and you've somehow made it look relatively simple, which is always a good thing :)
 

dbchest

Beast Master
Veteran
Joined
Oct 1, 2013
Messages
434
Reaction score
300
First Language
English
Primarily Uses
RMMV
This is wonderful. I'm pretty new here; do you have a project in development, or perhaps you have a completed project I could play?
 

indiewolf99

Villager
Member
Joined
Feb 17, 2016
Messages
6
Reaction score
1
First Language
englis
Primarily Uses
hey one question, i have the pop horror city packs, and i am trying to make custom sprites, i use the bases but when i import them they turn out about half or three quarters the size of the actual sprite, help??
 

evmaster

Cats are the best.
Veteran
Joined
Sep 1, 2015
Messages
479
Reaction score
728
First Language
English
Primarily Uses
RMMV
Is it just me or none of these images for this tutorial works anymore?
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Potato The game! Few concepts for characters to my game.
Well, well, well, well....Lemme get a look at this fanart.
The Google Play rating for one of my games finally rose above 4.0 after getting review-bombed from a $0 sale. Now the game's sales are doing much better when discounted, so that's nice.
I'm getting close to releasing a demo. Working on formatting my Games in Development post.
I always see a few people asking for C# in next engine and I always thought: Do I not know enough about that language to tell it will affect extensibility and customizability to the negative? Watching a video from SumRndmDde today I feel confirmed.

Forum statistics

Threads
98,225
Messages
950,529
Members
129,528
Latest member
FTWStorm
Top