Character Sprites for MV

Discussion in 'RPG Maker MV Tutorials' started by Avery, Mar 9, 2016.

  1. Avery

    Avery Sleeping Dinosaur Restaff

    Messages:
    1,944
    Likes Received:
    9,553
    Location:
    Minas Morgul
    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:


    [​IMG]


    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.[​IMG]


    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 cute 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.


    [​IMG]


    (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:


    [​IMG]


    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


    [​IMG]


    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.


    [​IMG]


    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.


    [​IMG]


    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.


    [​IMG]


    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.


    [​IMG]


    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.


    [​IMG]


    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.


    [​IMG]


    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.


    [​IMG]


    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:


    [​IMG]


    [​IMG]


    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: Mar 10, 2016
    #1
    Sharm, Yulia, Zealraid and 27 others like this.
  2. 2DGameStudios

    2DGameStudios Veteran Veteran

    Messages:
    186
    Likes Received:
    40
    First Language:
    English
    Very nice tutorial Avery, do you think you could make one up for weapons?
     
    #2
  3. Candacis

    Candacis Pixel Pusher Restaff

    Messages:
    1,461
    Likes Received:
    1,913
    Location:
    Vienna
    First Language:
    German
    Awsome tutorial, very nicely explained and with a great sprite at the end. Maybe add an explanation for the downed pose as well sometime?
     
    #3
  4. Krad1213

    Krad1213 Laughin-Prince Veteran

    Messages:
    51
    Likes Received:
    22
    Location:
    California
    First Language:
    English
    Primarily Uses:
    RMMV
    Is there an easy way to shade? >-<"
     
    #4
  5. Floofs

    Floofs Warper Member

    Messages:
    2
    Likes Received:
    0
    First Language:
    English
    That depends. Do you want it to look decent? 


    If so, practice makes perfect.


    If not, use gradients or pillow shading.
     
    #5
  6. Krad1213

    Krad1213 Laughin-Prince Veteran

    Messages:
    51
    Likes Received:
    22
    Location:
    California
    First Language:
    English
    Primarily Uses:
    RMMV
    Pillow shading?
     
    #6
  7. Floofs

    Floofs Warper Member

    Messages:
    2
    Likes Received:
    0
    First Language:
    English
    Last edited by a moderator: Jun 7, 2016
    #7
  8. Dungeonmind

    Dungeonmind Lvl 4000 Humanoid Veteran

    Messages:
    399
    Likes Received:
    203
    Location:
    Canada,Ontario
    First Language:
    English
    Primarily Uses:
    RMMV
    Very useful for people trying to learn how to sprite. Thanks for this!
     
    #8
  9. The Magic Circle

    The Magic Circle Listen to my Soundcloud fam? Veteran

    Messages:
    37
    Likes Received:
    13
    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 :)
     
    #9
  10. dbchest

    dbchest Beast Master Veteran

    Messages:
    428
    Likes Received:
    290
    Location:
    Pennsylvania
    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?
     
    #10
  11. indiewolf99

    indiewolf99 Villager Member

    Messages:
    6
    Likes Received:
    1
    First Language:
    englis
    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??
     
    #11
  12. evmaster

    evmaster Think Outside the Box Veteran

    Messages:
    334
    Likes Received:
    610
    First Language:
    English
    Primarily Uses:
    RMMV
    Is it just me or none of these images for this tutorial works anymore?
     
    #12
  13. slimmmeiske2

    slimmmeiske2 Little Red Riding Hood Moderator

    Messages:
    3,998
    Likes Received:
    3,522
    Location:
    Belgium
    First Language:
    Dutch
    Primarily Uses:
    RMXP
    @evmaster They're all showing up for me. Maybe try a different browser?
     
    #13

Share This Page