Posted by: Ocean's Dream | April 22, 2009

Remaking existing sprites


The biggest block for a blog poster: Coming up with a title for every post. I’d love to be able to just write “GENERIC POST # 320129” but then people wouldn’t click on it because they wouldn’t know what to expect or something.

Tutorial suggestion by Joseph S.

So, this isn’t a tileset tutorial but it doesn’t matter, it’s a tutorial of some sorts and kinds. Basically, we’ll use an old school NES sprite, make it bigger to match the 32×32 tiles of RMXP/RMVX/Most engines and programs instead of the 16×16 tiles of the ancient cultures.

I’m starting with an NES sprite for this one. You could also make your own NES sprite… but then you could also just skip the process and make yourself a bigger sprite instead. Here’s FF1 fighter. I did the resizing already. Make sure you’re doing a nearest neighbor conversion or a direct pixel scaling.

fightersprite1

There it is. Each frame here is 48×64, and the sprites are about 26×34 each. There are really 4 frames you have to worry about working on, everything else can be flipped/copied to make.

Here is the process I’m going to use:

  • Making the outline 1 pixel
  • Defining the new colors I’ll use
  • Improve the new outlines and define the new shapes
  • Shading
  • Copy/Flip to complete the spritesheet

So let’s go with # 1 on our to do list. Chopping off the outline to give us much more space to work with. I’ll sidetrack for a bit. When working on Paradise Blue, the enemies had to be of a certain size (32×32, 48×48, 32×64 or 64×32). I got concept art for the monsters, so I had to make it so that it fit in the space with as much detail as possible. I made the outlines, usually found that the sprite didn’t fit, then cleaned up the outlines and then realized that it was possible to fit the sprite in there then. In small sizes, sometimes these things make a big difference.

fightersprite2

This is a rough thinning of the outline. Now instead of all that black, we have more space for colors! Tsugumo has a nice tutorial on color division in sprites which I may also do in this sprite later, you could check it up here. It’s a good read.

So, now what do I want to do with this sprite? We used an FF1 fighter so we might as well make a fighting class. If you have an existing character, you can make the sprite with the attributes of your character. Well, I’ll try this for the design. FF1 Fighter will be a purple haired girl, dark red armor, brown shoes, a belt, and a flower in her hair. At this point I’m not going to stick with NES colors so if your palette only has those, feel free to start adding more colors. If you feel like you’re not good at picking colors, try getting them from a commercial sprite for now.

fightersprite3

This is what I have. I made some small changes to the lineart in the bottom row standing still one, but I’ll get to actually remaking the outlines and stuff soon. But yes, these are the colors I’m going to use now, I’ll modify them as I sprite. I use Character Maker so there’s a slider in the palette, so you click on a color and you can adjust the color and every time it’s used in the sprite it’ll be changed. Saves time.

fightersprite5

There. You might have more outlines than you need or more than I have right now, but that’s ok, we could handle that at the shading stage. I don’t have as much of a color variance to demonstrate this, but say if her sleeves were a different color, instead of outlining the sleeve where it meets the rest of the clothes, you could just have no outline there. If the color is different enough, you’ll still be able to tell that it’s a sleeve, and save yourself a pixel line for some other detail.

Now for shading. A lot of tutorials show lighting on the top left side or something, and a lot of people copy that when making their RPG sprites. This is not necessary, and it actually looks odd in game if you have a light source different than what is shown on the sprite (like if there’s only torches on the right side), and you’d have to make sure that everything in game is lit on the top left side. This doesn’t mean going back to pillow shading though.

For shading a sprite in RPG perspective, think of it this way. First, whatever sticks out most will be brightest, and whatever goes in or behind will be darker. Then, you have a top down perspective, so the top will be brighter than the bottom. Also, it’s not cheating to have a commercial sprite nearby for a reference, it’s good to learn from, especially if you realize why they do what they do. Zoom in or enlarge it too.

Don’t be afraid to make mistakes. Have backups and copy the current sprite on to a new file so you can work on it without worrying about “ruining” it. Don’t worry about it, just experiment. You’re not going to get it done if you constantly worry about messing up.

fightersprite6

The back of the hair tends to be hard to sprite. I usually go for lighter on top and dark on the bottom. I can add any additional highlights and details in now. For this sprite, I used a base color and a shadow color for the skin (make sure it’s visible when you zoom out of the sprite too!), a base hair color and a highlight color, a highlight red (use pink if the red you have isn’t that dark), and an extra color for the shoe. Then I worked on the outline colors, so it’s no longer black. Dark purple is used for most of it (Dark grey works fine too and was done in FF5/6), but dark red was used to outline the armor.

fightersprite8

Added some highlights around, and a blue armband. At this point I’ll go and copy the poses to the other frames before I continue. Something assymetrical shouldn’t be copied to both sides. So for the front frame, I copy it, then I flip her body horizontally. I position it back if it’s not aligned, and do any fixes.

fightersprite10

There we go. Now to add a flower…

fightersprite9

Again, keep backups around so you can copy/paste stuff and not lose the originals if you need them again.

I’m thinking of video recording one of these tutorials in the future. I thought I had one but I don’t remember what happened to it.

Advertisements

Responses

  1. Oh my! You have no idea how i love this tutorial! Thank you, you´ve done such a good one.

  2. Pretty hard to get right =S
    But yer tut helped a lot.. thanks ^^
    Everything i did before was so squary…

  3. That was a pretty cool tutorial. I really suck at editing sprite hair (though I am getting better…slowly), so this will definitely come in handy. I’d like to see you give a video tutorial a shot. I think it would be helpful to see you actually making the changes in order to get a better feel for the entire process.

  4. Joseph:
    Not bad. Yuuuuuna. I would work on the hair in the back view. How you did it was fine for the other views, but it’s all straight rather than showing the strands like it is for the others.

    Ceric:
    Yep, I want to do some, even if it’s just one more. I found the video I was referring to in my post, so after it’s saved, I’ll post it on youtube and I’ll post the link to it here. Unfortunately the original is 2 hours long, so I had to reduce it to about 7 minutes to fit it into youtube.

  5. […] Ocean’s Dream’s Tileset Tutorial has been updated with a guide to updating old-school RPG characters (in this case from Final Fantasy 1) to a more modern, RPG Maker VX style of sprite. My favorite part […]

  6. Umm.. What exactly the last comment here was about?

  7. That is a link back. If someone links to this post and specifies it, then it’ll show up here.

    I forget if it’s called a pingback or trackback or something, but the option is there.

  8. Cool tutorial man, tis awesom

  9. Thanks! Glad you like it.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: