Avery

Sleeping Dinosaur
Restaff
Joined
Oct 13, 2012
Messages
2,573
Reaction score
15,371
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:


jfy7kj7v.png



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.
j85ltpoq.png



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.


ui65rxf4.png



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


2qji4rgh.png



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


todzqx9o.png



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.


j92qlve3.png



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.


5tplbkkw.png



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.


ybj3wqoh.png



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.


2hus5vd2.png



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.


vpus32gy.png



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.


sfi9wnkv.png



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.


79osxkiu.png



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:


n3aljt8y.png



zdjgtucg.gif



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
47
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,682
Reaction score
2,638
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
564
Reaction score
414
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
308
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??
 

Sakurra

I want a brownie.
Veteran
Joined
Sep 1, 2015
Messages
678
Reaction score
590
First Language
English
Primarily Uses
RMMV
Is it just me or none of these images for this tutorial works anymore?
 

Latest Threads

Latest Posts

Latest Profile Posts

just saw that titan quest is free on steam until the 23rd
Zombie status is now complete. I didn't have to do much in the way of changing how healing is applied to undead targets, was just a simple 3 line code. I thought I had to overhaul Game_Action lol. Everything else was doable by events. So.. Zombie: You turn undead. Your element changes to darkness. You're weak to light, you're strong to physical attacks and healing hurts you and revival items will kill you.
My Overworld might be a mix of inspiration from 2D Final Fantasy games, Breath of Fire, Battlechasers: Nightwar, Super Mario World, and Pillars of Eternity. If I can make it more in-depth than just walking from point A to point B, that might do a lot for the gameplay experience. Hmm...

Forum statistics

Threads
115,221
Messages
1,088,178
Members
149,809
Latest member
budsasser
Top