Creating an RPG Base

In the previous section, I spent a lot of time going over the importance of form and light sources. I tried to convey the importance of creating forms from shining light onto silhouettes—an approach to spriting that emphasizes depth in three-dimensional space. Today, we’re going to make use of that technique and create a sprite base.

Because most people reading this are probably developing an RPG, this sprite is going to be made for a game with that kind of traditional top-down perspective (though not quite top-down exactly—flawless perspective can be sacrificed in exchange for heightened readability, as long as the proper perspective is correctly suggested). If you want to make a sprite for a different kind of game—like a platformer for example, you could use the same technique but from a straighter perspective or maybe with a different light angle.

Starting is easy: I always start by suggesting forms with silhouettes.

In this example, we’re keeping the elements of the sprite separated. In practice I don’t usually do this, but in my mind’s eye the process is there. When you’re first starting out, it might be easier to visualize your forms by splicing them like this, and then bringing them together after you’ve begun to give them some three-dimensionality. Otherwise it might be difficult to mentally keep your pieces separate when they’re meshed together into a silhouette blob.

Trainer Tips!

Where are his arms? Personally, I add the arms after I’m happy with the torso and legs—it helps me create better-looking proportions. There’s no reason you can’t be working on the arms at this step, though—just paint the cylindrical forms like you would with the legs.

The sprite begins to look like a person in the next step when we apply some lighting.

A second color joins the first, but it isn’t particularly detailed. It does succeed in giving some depth to the image—the head looks like a head and the torso looks like a torso. The legs aren’t quite perfect, but it’s clear that they have a segmented cylindrical form. Now that it’s starting to flesh out a bit, we can safely pull the pieces together for the next step.

Now it’s beginning to look like a real sprite.

Another color is added: number 3 is our darkest shade and while it will function as our outline color, we’re using it now to further emphasize the darkest shadows and curves. Don’t go overboard with it—think about your light source.

A fourth color is added too, but I haven’t applied it to the body yet—I’ve only used it here to give the head some more definition.

At this point we’re satisfied with the basic forms and the initial construction. With the next step, our goal is to refine, and it brings the sprite to a much more human, nearly complete, level:

Not only have we finally created the arms, but we begin stretching our colors to refine the sprite and start filling in some important details. Color 4 spreads out across the body, becoming a useful highlight, which allows for 1 and 2 (the original colors that we started with) to become useful as our primary midtones. At the same time, the addition of color 5—a buffer between colors 3 and 1—becomes important for shadows, which further emphasize form by expanding on the depth of the sprite. With these additional colors, we refine the cylindrical forms of the torso and the limbs. We’ve also given more definition to the head—including ears, which make it look more human and help create personality.

Trainer Tips!

You’ll notice that the highlight on the top of his head has changed—why? It’s a hairline now. You don’t have to take this approach if you don’t like it; you might find it more helpful to keep to a pure-skin base and make the top of the head brighter from the direct spotlight. I find it useful to create a hairline like this because most of the completed sprites will end up having hair, after all. But it’s a personal preference. Do whatever you feel comfortable with.

Our sprite is shaping up nicely and looks nearly complete. All it takes is some more refining:

 

The final color is added: color 6 isn’t used very much, but it provides some highlights that make for a finishing touch. The head’s form is further refined with the use of the new highlight color, and now that the arms are attached the hands and shoulders are given proper definition.

Trainer Tips!

This particular sprite has an even width—the horizontal width of the sprite uses an even number of pixels. In other words, it doesn’t have a single line of pixels that go down the middle—it’s missing a distinct line of symmetry. It might be easier for you to create a sprite with an odd number of pixels. Having a single line that goes down the center of your sprite will generally make things much easier, especially when it comes time to start putting clothes on him. Again, do whatever you think is right for you.

The sprite base is more or less complete at this point. You can keep plugging away at it until you’re satisfied, but be careful: it’s entirely possible to obsess over details for hours. As I look at it now, I can see little things here and there that can still be fixed, and I might go back to make little changes. But realistically, I’m okay with calling it finished.

There are two important things left to do with it: animate him, and start making some characters (with clothes!) based on him. We’ll save those for another time.

Good luck, and let me see what you’ve come up with. Leave a comment or shoot me an email.

Next: The RPG Base’s Four Directions

21 comments

  1. eclectocrat says:

    Awesome! Followed you here from TIGForums, very nice introduction, even a non-pixel artist like myself can follow along and learn. Really cool stuff homie.

  2. Vee says:

    Great tutorials you have here! I followed a blog post on RPG Maker Web over here. I don’t have any examples yet since I’ve only just read your tutorials, but I’ll be sure to post something up when I do.

    I appreciate you taking the time to help out the community with your tutorials. It means a lot and people who do this sort of stuff to help out probably don’t hear it enough.

    Anyway, thanks again!

    -Vee

  3. Espon says:

    http://i.imgur.com/vVXWJ.png

    Not bad for a first attempt I guess. Looks like he’s ready to bench-press some children or something though. He kinda gives me the creeps.

    • Despain says:

      First attempt? That’s really impressive! I really love the torso area.

      I’d say the biggest flaw is the head—the shading on the top is really strange (and banded). Focus more on using larger clusters of pixels to show planes. Also the facial proprtions seems strange—especially if it’s for an RPG perspective (which i would say that the legs and torso do a good job conveying). This is how I would fix the head; it’s not perfect but I think it shows off some ways to improve.

      edit

      Keep at it, man—this is a good start. :) good luck

      • Espon says:

        I guess I was kinda basing the face on how it’s positioned on a person and not considering perspective. Think it was mostly the eyes and weird shading on top that was giving me the creepy old guy impression.

        I realized he was also a much larger compared to other sprites, poor fellow wouldn’t even be able to fit into a standard RTP door.

        Decided to give it another go, this time trying to keep it about the size of an XP or MACK sprite. Much happier with the results, although the guy turned out a little butch so toned him down a bit. Think I spent far more time trying to get the shading right on the male as opposed to female.

        (hope that works)

        Have to say though that the idea of working with silhouettes definitely helped a lot. My previous attempts at making sprites was to do an outline then try to fill it in. What I ended up with were sprites so ugly that the only place they could ever fit would be the Recycling Bin.

        Now I just need to figure out how make sprites facing different directions and how to animate them.

      • Espon says:

        Image didn’t work…where an edit button when you need it…

        http://i.imgur.com/B2OLU.png
        [img]http://i.imgur.com/B2OLU.png[/img]

  4. Despain says:

    Those are really sweet—the heads are awesome; I really like the eyes (you should make some varations with different expressions and it would add so much variety and character to your sprites; those ones seem really angry by default).

    My only problem might be with the positioning of the arms, but personally I find myself re-positioning the arms with each sprite I do anyway, so it isn’t too big of a problem.

    As for the size thing—if you find that your sprites don’t match the RTP, fuck it. Make your own tiles. hahaha :)

    Good luck man and I’m looking forward to seeing what you build on these. :)

  5. Alex says:

    What program do you use to make your “pixel art” or “spriting”?

    • admin says:

      Mostly photoshop, but I’ve also been known to take advantage of the simplicity of MS Paint. :)

  6. Tothu says:

    Wow this really is amazing! I could do ok with shading, but the outline is where I crack. Thanks a bunch man :3
    One thing I really seem to suck at are hands, any tips on that?
    Great tutorials Im glad I found these ;)

  7. Wasa says:

    6 colors for a skin pallet seems really extreme for a sprite, especially one of this size. And not to be mean, but the base is looking kinda flat and not well defined form wise. The disjointing of the legs is probably due to the construction method, since the figure from the previous example looked much better. (though still flat)

    • Anthony says:

      Post an image of a better one to enhance the page. By just criticizing you don’t make much headway. As of right now you’re sounding like a student that doesn’t know how to fix it, just have to say something to feel superior over the tutorial maker. You’ve made a negative non constructive post in several pages.

      If you can handle some advice, when you are showing someone a problem always have a solution to it and show that you can do what you are saying, otherwise it is just another negative comment and mostly disregarded. This is called tact and will get you very far in the world.

      regards.

  8. Shoehead says:

    http://i.imgur.com/Vf5nOW5.png He ended up with gigantic thighs!

  9. Boysano says:

    Thanks man, I’m a programmer and know I need to learn to make my own (at least placeholder) art and I just love your tutorials!
    Please keep them coming, or if you have an book / ebook please email it to me or where I can buy it, because I will.

    Really keen also on pixel art style for most of my games, even if it takes more dedication than painted or color-fill art.

  10. Shaddow says:

    Well I am a bit late to the game, but I haven’t really tried to sprite anything in about six months, so I thought running through a tutorial would help me get my game back. I really like the way you do templates, so I attempted to re-work my own template using the methods you suggested, and this was my current result: http://i1081.photobucket.com/albums/j355/Shaddowval/SouthFacingTemplate_zps3407a969.png

    I attempted to make him stand in a more casual style, with his arms just hanging at his sides, but I find that I didn’t really know a good way to do the arms like this, as pretty much every example I’ve looked at has the arms raised. Any suggestions on that?

  11. Charlie says:

    A great tutorial!
    I made this..
    https://www.dropbox.com/s/4kt3o7dm2o36ys5/sprite.png
    I don’t think I like it but I’m not sure why.. :/

    • Steffen Simmons says:

      The arms don’t look like he’s naturally letting them fall to his sides. He looks like he’s holding his arms up for no reason. Other than that, I think looks pretty good.

  12. Steffen Simmons says:

    Ok, now I understand what you are saying about forms and silhouettes. If I am doing a platformer, I am going to have issues because of how squished the sprites are going to be….do you have any tips/tricks?

  13. Shixax says:

    I’m having problems with this. I can’t seem to get the legs down, though somehow I’ve managed to make him chubbier! http://imgur.com/7QC1w1N

    I have just started trying to learn pixel art in the last few days, and I gotta say, your tutorials are helping drawing-impaired me a bunch. This is awesome stuff, dude.

  14. TaintedMythos says:

    I was wondering if 5 colors is enough for a base like this. I’m having A LOT of trouble with the sixth color, so I was wondering if 5 colors is enough to get an acceptable amount of shading.

    • Despain says:

      Use however many colors you need man. You can totally get away with fewer colors for smaller sprites. Just focus on readability.

Leave a Reply

Your email address will not be published. Required fields are marked *