Sprite Help
From Spheriki
Contents |
Intro
Just to give you a heads up, this will be my first tutorial so my bad if you find anything out of whack or something. Just to inform you what kind of person I am, so you'll know what you may be getting from this deal, I am a person who loves to be original but meanwhile doesn't like to spend hours redoing and constantly working on one spriteset. In other words, I love to create something new, but I love to create it fast and do it right.
Most of this information is taken from this Spherical topic, which you can use as some kind of FAQ if you do not find this as helpful as I planned it to be. Anyhow, enough with the talking and time to start the walking...
The Process
First Step
Like I said before, I like to be original so I like do my OWN spriteset; maybe with a little influence from other works, but mainly my own spriteset. So what you wanna do, if you plan to be original like me, is you want to start with an outline. Just open up MSpaint, or any image editor you have, and start slapping some pretty close outlines of whatever type of thing you have in your mind. Usually, if you're doing some kind of human, like I usually draw for my games, you want to get some type of chibi or anime look, so keep that in mind. You want to first make a circle (doesn't have to be perfect, best to stray from being perfect at this point) for a head. Then, next you want to make a rectangle representing the chest/stomach/body. After that, you want a somewhat small square for a waist then long vertical rectangles for legs. Then last, make some tiny circles for shoulders and rectangles for arms (the rectangle representing arms should stretch down far enough to around the waist and/or crotch area, not on it though. The following image shows a representation/influence or an idea of this step:
This image shows the outlines I've made (off the top of my head by drawing random lines) and what became of them next (below the outlines). Notice I made four different outlines; you don't have to do this, I just did it for some variety in my game. The one we will be using is the second one, the one entitled "medium" as you can probably not see in my messed up spelling...
Second Step
Next, you select which outline you want to use (if you made separate outlines like i did). In this case, we will be using the second one in the model that I previously posted in the First Step.
What you do now is you make your spriteset, as you see I have just done. If you don't want an entirely complicated spriteset, each spriteset's direction should contain at least 4 frames. What I did here was take the outline and basically colored it in, trying to make close to what I had it already imagined in my head (if you did not plan this out in your head, then this is where concept art comes into play: draw out your character on a sheet of paper, close to the outline that you have on your computer, and whatever you have on your concept art try and make that appear on screen). When coloring in the sprite, only use 3 shades of a color: Dark, Medium, and Bright... the part of the sprite that is supposed to come out is the brightest, whereas whatever you want to keep as an outline you use the darkest shade of that color in replacement (I recommend coloring over all the black outlines, which means leave no black color at all).
For better and more depth explanation on spriting step, check out Radnen's tutorial. There are many good spriting tutorials on the web, but it's up to you to find them if you're not up to this step.
Third Step
Now here is where we start editing the sprite. Here is where you might also wanna look at other sprites (like from FFVI for example) because this is where the influence part comes into play (mainly with the colors).
As you can see, what's being worked on now is the arms. The model to the left is the "before" picture, and the one to the right is the "after" picture. The "after" picture's arms look very pixelly as you can tell; this really shows up in the game and really gives it that defined look that you see in other games. You're basically using the same colors as you did before as a base, but now your using more colors than you did before; instead of 3 different shades, however, this one is using about 6 different shades, with white being the brightest shade and a really dark brown as the darkest shade; other colors are for mere touch up. The same principles as before apply here, as in darkest colors are used for your outlining parts and bright colors are used for what is supposed to be either shiny or coming towards the player, except now you are trying to be a little more in depth with the look of your arms. It really helps to look at pre-made sprites here to get a feel or at least somewhat get an idea of what you are trying to accomplish here. OR, you could look at your own arm by putting it in the same position as your sprite's and see what is brightest and what is the darkest and basically copy that look.
Fourth Step
After you give your arms, or whatever part you are working on, the more in-depth look we were just previously discussing you'll want to animate those parts. Any parts you plan on moving you'll probably want to make more in-depth before animating. For example, if you want to move the legs during the animation, make the legs in-depth before trying to animate them, or else you are going to end up needing to edit trying to get the picture to seem right. Now we are going to try a walking animation with our new "in-depth" sprite.
First of all, when doing this part, you want to remember or at least get it in your head that when running, the legs and arms, vertically, should never be doing the same thing. What I mean by this statement is that if the left arm is moving forward, that left leg best be moving behind your sprite else he is going to look really f***** up. To make the arms seem like they are coming towards you, put them in front of the character, but remember that you can only stretch so far or shorten so little; your character ain't "Rubber-Band Man" so you gotta estimate close to perfection (at least make it seem close). Usually we, as humans or whatever you may be otherwise, bend our arms whenever we are running or walking, so you especially wanna put that in there. For a look as if the arms are going behind the character, you want to shorten up your arm and push it in (there is a selection box in the Sphere editor that lets you move around parts that you have selected that let's you do this, but that's an entirely different story). For example, move the hand up about a little right below the chest maybe and scrub off some or a few pixels on the outer edge (of course you'll have to replace your outline after this). For the legs, all you'll really have to do is scrunch them to give them a look as they are going behind the character, and stretch them to look as if they were lunging forwards. Of course, if you haven't noticed from the previous picture I've posted I made the arms too high so it looks like he is running instead of walking, and also the back leg doesn't give the impression that it is going behind him yet. Next step...
Fifth Step
Okay, if it looks like you still have a few mistakes left, that's okay; that's what this step is for. This is the "cleaning up" stage. In other words...
Okay, here you can see I just corrected my mistakes from the previous step. I've lowered the arm a bit to back off that over hyped look that gave him more of a running impression. I've also went a little above half way through the legs and moved it over some to the right (on second frame) to give it more of that look as if it's going behind the character. What else you probably want to do, that isn't in this picture, is that you want to give his feet more of a diagonal look when he is standing still. His feet should always change when going frame to frame.
