Home | Gaming | Programming | Play Online | Contact | Keyword Query
Games++ Games & Game Programming

Games++ Home
Games++ Gaming
Games++ Programming
Beta Testing Games
Free Online Games
Hints & Cheats

E-mail This Page
Add to Favorites


Web Games++

Cheat Codes
Trickster Wiki
Game Ratings
Gameboy Cheats
PlayStation Cheats
BlackBerry Games
Photoshop Tutorials
Illustrator Tutorials
ImageReady Tutorials



Converting Art to Sprites

Lesson 1: GBA Sprite Making Tutorial

By Adam C. Tierney


I get asked quite a bit how we at HDP create the art, stories, etc. for our games. And a lot of kids seem to think we're part of some Uber-Huge GBA Underground that has super-secret programs and tools ONLY for GBA Game Production. Well, that's just plain stupid. And if you have Word, Photoshop (or a similar art program), talent and a GBA compiler (ask Brian about that last one) then you can make GBA games right on your desktop for absolutely nothing.

On that note, I'm going to show you today how I made the sprites you just saw, and how you can make your own sprites in only an hour or two.

The following books could also prove helpful:

Step 1: The Sketch

preliminary sketch

You obviously need an idea for a game. If you don't have one, then go away and come back when you do.

The first step is to sketch your character out, each frame in the animation. You can do this on the computer, but if you have a scanner it's often easier to do it by hand, because you can wedge in a little more creativity than with a mouse. Take a few sheets of standard white paper, draw a frame, then put another sheet over the first and draw the second frame slightly different than the first. Animation: It's tough, but very rewarding.

Remember also that you don't have to draw every single possible frame. You can use tricks like repeating pictures and flipping pictures to save yourself a lot of time. For example, for my sprite, I drew only three frames, but flipped and repeated them to get a full ten frames.

Scan in all your drawings when you're happy with them, and you can move onto the next step.

Step 2: Cleanup

Here's where if you don't have the right program, you'll have to wing it. I use Photoshop 6.0, so this guide is really for those who use Photoshop, ver 5.0 - 6.0. If you're using anything else, just adapt the information to how you can work in your own program.

Open the picture you scanned into Photoshop. Resize it to a decent size on your screen, like 3x3 inches or so (no larger). Then copy that image into a new document. Save this document as a Photoshop file named Sprite.psd. This will be your sprite file for almost the entire process.

Create a second layer over your scanned image in your new sprite photoshop file. Make SURE that this new layer is on top of the original image, not underneath it. This new layer will end up replacing your old image as the line art for your sprite. Use the brush tool with a black color, and a VERY thick brush. You can see how thick the brush was that I used. It makes your picture look clunky and not as cool, but unless you use a very thick brush, you won't be able to see the outline on your finished sprite.

Using the brush, trace your character very neatly on the layer above the original image. Feel free to zoom in, and be ready to hit the Undo button about a million times, because this is the slowest step of the process. When you've traced the whole image, delete the layer with the original scan, and you should have a new, pristine image similar to the one you see above.

Step 3: Coloring

Be sure to save your work constantly. At this step, you're ready to color your little guy. Create a new layer BELOW the black line art you just made. And you might even want to create an all-white layer below both of these (makes things a little easier to see). On the new layer, simply grab a brush, set your colors, and paint away. The nice thing is that as long as your new layer is under the line art you just created, you can color right up to the lines, even over them, and the colored areas will never messed up the black lines.

It's a great little cheat once you get the hang of it. The image above is what you're actually creating on that layer, but what you'll see is this:

Pretty nifty, huh? Perfect coloring, and done a helluva lot faster than normal coloring methods, too. Feel free to experiment with different brushes and colors, try out shading (all of which you can see here), and always remember to save, save, save! When you're happy with the way your image is colored, you might want to pick a background color for your image. White is easiest to draw on, but trust me, when you shrink your guy down, you're going to want him on a color that contrasts from the rest of the image. Just fill the bottom bottom layer with the color of your choice, and make sure that NOTHING else is on that layer. DON'T do your background on the same layer as your line art or your colors, keep EVERYTHING SEPERATE. If your color layer is the bottom layer, then make a new layer BELOW THAT for the background.

Here, I used green, since there is no green in my sprite. And be sure to save again:

Step 4: Resizing

The last few steps deal with sizing your sprite down to the proper size, for use in your game. Here, is where you have to know some specifics about your game. Most GBA sprites are either 32x32 pixels, 32x16 or 16x16. You can find plenty of exceptions (like big-assed, screen-hogging Rayman), but it's best to use one of these three combinations, depending on the shape of your character. My guy is pretty square, so I decided to choose 32x32.

EDIT > COPY MERGED for your whole image and paste it in a new document. Then save your original Photoshop .psd file and put it away. You won't be using it anymore, but it's very handy to keep someplace safe because you can go back to that file and very easily alter, say, a character's hair color, like I did in my screenshot.

When you have the new image, FLATTEN it and resize it to the dimensions you chose (ie, 323x32, 16x32, etc). What you'll get is a very tiny little version of your character which, if you drew it thick enough, will have a very nice black line around him. Yay! You have a sprite, right? Unfortunately, no. While he might look nice and tidy from far away, zoom in and you're more likely to see a blurry mess like below:

So what's wrong with the image above? It looks fine.

Well, sure it does. But as you can see in the blown-up image, there are lots of smeared black and green squares around your guy. He'll look fine on a green background, but plop him on anything else, and he'll look like he's carrying a radioactive mist. What you want is a sprite who will look good on ANY background, which is where the final step comes in: re-detailing. Save your new resized image as Sprite.gif (but don't close it) and move onto the next step.

Step 5: Re-Detailing

Zoom in on your character, and get your pencil tool ready (on the smallest brush size). Set the color at the same as the background. Now, tinker around your image with the pencil, one pixel at a time, getting rid of the greyish haze around your character. Leave anything that looks like it's part of his body, but anything that's outside that area, pencil over. This can be the hardest step, because every single pixel can mean the difference between, say, a perfect ear and a lop-sided chunk of...something.

When you're done, you still might not be able to tell the difference when zoomed out, but trust me, your little guy will work much much better. To make him stand out even more, select the entire character, but none of the background (might get a little tricky), and select EDIT > STROKE. Do a 1-pixel stroke around your character, with the setting 'Inside' and black for the color. What this will do is give you a VERY nice little black outline around your guy, making him stand out even more from his future background. The end result should be something like this:

Step 6: What Now?

Save your art as a bmp or a gif file. I'd reccomend saving it as a .gif with a 56-color maximum. This will give you a VERY detailed, colorful sprite that you know the GBA could really handle. What you do with your little guy now is up to you.

So how do I make animated sprites? All I have is one image.

Well that's simple: Make more images. In the end, it's up to the programmers and coders to animate your little guy -- all you'll be giving them is the still images. But if you want to test how well a sprite animates, save each sprite as a gif, then use a Gif Animator like Ulead to see your little guy in action (like you see all over our site).

So that's ALL there is to making sprites?

Well, there's a few more pieces to the puzzle, which include altering the values of your art so that the deepest black is set at 15,15,15 or above. And saving your sprite on a 0,0,0 black background, or a 255,0,255 magenta one, or whatever your programmer/coder prefers. But if you got this far, be very proud of yourself -- you've made something a GBA developer could take and slap into any game. And that's pretty damned awesome, when you think about it.

Is this the 'Right Way' to make sprites?

There is no right way. Like anything else in life, use your own methods, whichever ones work best for you, to get to the finished product. This is just the way I currently use, and it's an easy way to make great-looking sprites very fast.

Next Lesson

Adam C. Tierney (HDProds@hotmail.com)

Copyright © 1998-2007, Games++ All rights reserved. | Privacy Policy