PDA

View Full Version : Spriting Tutorial Part 1



jubeh
12-20-2011, 03:10 AM
http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifIntroduction
This is the first in a series of pixel art tutorials. We'll start by talking about tools, getting started in spriting, and creating a small sprite using NES limitations.

I am by no means an expert at spriting, and I'm barely an artist so this obviously isn't THE ONE GUIDE. It's just me sharing the stuff I've learned in the past couple years.

http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifTools
You'll just need something that lets you draw and something that lets you see your image in motion. A program that does both, like Graphics Gale is convenient. I actually just use MS Paint for drawing and the sprite editor in Game Maker for testing animations.

http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifSize
When people ask me to help them with sprites the first thing I need to know is what size they're going to be. In retro games its very simple.

Typical NES sprites were 16x16 pixels.

http://i48.photobucket.com/albums/f201/Jubeh/tutlilmario.png

Little Mario fits this specification, while big Mario is twice as tall at 16x32.

Really, assuming you're making a game, the sprite just needs to fit into the bounding box you plan to use.

For our purposes we're going to use 16x16.

http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifPalette
Different hardware had different pallettes. I rarely use a specific palette because I can't be arsed to, but if you want an authentic look you can usually find palettes for specific machines online.

One thing to note is that older hardware had limitations on the number of colors a sprite could contain. For our homework, we're going to use NES limitations.

An NES sprite could only contain 4 colors including transparency. This leaves only 3 colors you can use to convey the image considering that it's not just a big block that takes up the entire bounding box.

http://i48.photobucket.com/albums/f201/Jubeh/tutzeldascreen.png

Thus artists had to design their sprites cleverly. When you get a chance, look at the sprites of some of your famous NES games and see the kinds of tricks they used in order to make the sprite look more colorful than it actually was.

http://i48.photobucket.com/albums/f201/Jubeh/kgif.gifOkay Let's Get Started
Open up your image editor of choice, draw a 16x16 pixel square, and zoom in.

Aw fuck this is too hard I give up.

No. Wait no. We can do this.

My usual process goes something like this.

http://i48.photobucket.com/albums/f201/Jubeh/process-1.png

Box, "skeleton", everything else.

I don't normally flesh out the sprite until I've drawn a skeleton of every animation I plan on using it but for the sake of the tutorial we're gonna do it the hard way.

In your square, you're going to want to start your skeleton. For the sake of animation later, it helps to give every body part its own color. Don't worry about the 3 color limit right now. Just draw a vaguely human shape and tweak it until it looks about right. We are going to animate this sprite as if it were in a platforming game, so you may want to draw it in a 3/4ths position. If not, no big deal.

http://i48.photobucket.com/albums/f201/Jubeh/shootout.png

When designing your character's posture, you might want to consider that whole "sillhouette" thing you do in design class. At 16x16 its pretty hard to do, but dont think of it has a hard fast rule. Just something to consider as you're carving out the figure.

http://i48.photobucket.com/albums/f201/Jubeh/ernieandprincess.png

Now comes the actual hard part. Take 3 colors and make a sprite. Start out with your main outfit color. If you take a look at little mario up there his hair, undershirt, and boots are all the same color. They're seperated enough that his general shape is intact without any "blobbing" of colors.

His fleshtone is also used for the buttons, but because of the placement they actually look like buttons and not nipples. Screw around with the colors until it looks right. It doesn't have to make sense at all. Link is wearing green eyeshadow in his sprite. Its no biggy.

http://i48.photobucket.com/albums/f201/Jubeh/baseballbro.png

I threw this guy together for the tutorial. He'll be a pain in the ass to animate for sure due to his long arms, but that's just part of the challenge. If you're following along feel free to post up your own. You don't have to if you don't want to, but if you do I can give you some advice. Next week we'll be animating them.

http://i48.photobucket.com/albums/f201/Jubeh/shot.png

Coming Next Week: Basic Animation

Sylux
12-20-2011, 03:26 AM
Do you think you could do one for 4096 x 4096 sprites

jubeh
12-20-2011, 03:44 AM
I'm sure you thought that was funny when you posted it but you're actually pretty much a twat.

Sylux
12-20-2011, 03:48 AM
It was my way of expressing my gratitude. I'm sorry, I'm not specialized in being affable.

Fenn
12-20-2011, 11:51 AM
Thanks jubeh!

Hayashida
12-20-2011, 01:56 PM
Thanks James. Also are there actually such things as 4096 sprites or is he just being a dick butt

Sylux
12-20-2011, 05:37 PM
Well there are they're just larger than any available computer screen on the market. You might could port it to a giant flat screen, though.

GunZet
12-20-2011, 05:48 PM
Couldn't you just upscale them using vector graphics.

Sylux
12-20-2011, 05:49 PM
No because you must have at least hand-made 2048 detail in order to be pro lol jk

Fenn
12-20-2011, 07:12 PM
This guide seems more like a "Tips" guide then a full-blown tutorial. Not criticizing, it's just more of a general overview than a step-by-step process.

jubeh
12-21-2011, 03:05 AM
Well what am I supposed to tell you? Make the arm exactly 6 pixels? Make the head exactly 4x4? We're starting out with 3 colors so that we can avoid the pitfalls I see in a lot of indie game sprites. Poor use of black outlines, noisy sprites, and general lack of character.

What the actual standing sprite looks like doesn't matter until it's animated anyway.

Regantor
12-21-2011, 05:01 AM
Maybe it would help super-newbs if you actually explained the basics of how to use MS paint? It sounds obvious to somebody who has been using it for years, but to people who are used to things like potatoshop, the simple stuff like having the secondary colour go transparent, or defining custom colours, might not seem so obvious...

It's still quite a nice tutorial regardless.

Inksprout
12-21-2011, 05:15 AM
Here is my little guy, first ever attempt. He looks kind of like a blue haired shaggy from scooby doo. >_< I used graphics gale which seemed ok.
<a href="http://www.flickr.com/photos/inksprout/6548228353/" title="derpyguy by Inksprout, on Flickr"><img src="http://farm8.staticflickr.com/7006/6548228353_e4335be3dd.jpg" width="334" height="342" alt="derpyguy"></a>

jubeh
12-21-2011, 05:35 AM
Maybe it would help super-newbs if you actually explained the basics of how to use MS paint? It sounds obvious to somebody who has been using it for years, but to people who are used to things like potatoshop, the simple stuff like having the secondary colour go transparent, or defining custom colours, might not seem so obvious...

It's still quite a nice tutorial regardless.

Idk if I want to go that far but I'll field questions and help people oot. Animation is the really hard part anyway, which will hopefully end up being a lot more in depth.


Here is my little guy, first ever attempt. He looks kind of like a blue haired shaggy from scooby doo. >_< I used graphics gale which seemed ok.

Awesome. Graphics gale is cool but I can't be arsed to learn it /lazy

Anyway I made some changes. Consider it like a red line without...any red lines (except the box which is red)

http://i48.photobucket.com/albums/f201/Jubeh/inksprite.png

I like his face a lot actually. It reminds me of an earthbound sprite.

First of all I need to point out that you broke the rules! You're sprite has 5 colors including transparency. White, blue, green, brown, fleshtone. I reduced the sprite to 4 colors (not including the box). The background is green, which would be transparent in a game. I had to make the shirt blue and the emblem on his shirt brown.

I turned him slightly away from the camera so that the transition to him walking will be smoother when we start animating.

I gave his shirt proper sleeves. This is important! The sprites upper arm and lower arm need to be easily distinguished. It helps a lot during the animation process. I noticed you tried to give him distinguishable hands. At this size it's honestly pointless. Squares suffice. I put his arms into a more relaxed position. He was positioned like a soldier in your sprite when he looks a lot like a slacker.

I forgot to retain the bagginess of his pants. That was my mistake and I only noticed it just now. Sorry!

Inksprout
12-21-2011, 06:33 AM
Ah awesome! I dunno what happened with the colours XD I was just like yeah! 3! For some reason >_< I see what you did with the changes, it looks a lot better now. I'm hoping I don't get lost with animating in graphics gale but theres probably loads of tutorials

ClockHand
12-21-2011, 10:15 AM
ok, I now my turn.

http://img687.imageshack.us/img687/7206/sprite1knight.png

I have no idea how to make it bigger =/

I just learned how to do a gif animation!!! fuck yeah! 2 things learned in one day, I'm done for the entire year. But I don't have how to upload it, so... lol.

http://m.uploadedit.com/bab/1324500123461.gif

Ok, so now I'm addicted to sprites (thanks jubeh, another thing you have make my addiction =/). And I did these:

Saga Master System Version.
http://img46.imageshack.us/img46/6214/spriteknightsegasystem.png

Snes Version.
http://img4.imageshack.us/img4/692/spriteknightsnes.png

Evolution of the Crimson Knight.
http://img15.imageshack.us/img15/5036/spriteknightevolution.png

And a GIF.
http://m.uploadedit.com/bab/1324516744831.gif