Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Spriting Tutorial Part 1

  1. #1
    Lord of Death jubeh's Avatar
    Join Date
    Dec 2010
    Location
    Space
    Posts
    12,725

    Spriting Tutorial Part 1

    Introduction
    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.

    Tools
    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.

    Size
    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.



    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.

    Palette
    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.



    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.

    Okay 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.



    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.



    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.



    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.



    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.



    Coming Next Week: Basic Animation

  2. #2
    Sir-Mass-a-Lot Sylux's Avatar
    Join Date
    Nov 2010
    Posts
    7,448
    Do you think you could do one for 4096 x 4096 sprites

  3. #3
    Lord of Death jubeh's Avatar
    Join Date
    Dec 2010
    Location
    Space
    Posts
    12,725
    I'm sure you thought that was funny when you posted it but you're actually pretty much a twat.

  4. #4
    Sir-Mass-a-Lot Sylux's Avatar
    Join Date
    Nov 2010
    Posts
    7,448
    It was my way of expressing my gratitude. I'm sorry, I'm not specialized in being affable.

  5. #5
    Fenn
    Guest
    Thanks jubeh!

  6. #6
    ハリセン クラプ Ace Pitcher Hayashida's Avatar
    Join Date
    Nov 2010
    Location
    PEPSI
    Posts
    9,110
    Thanks James. Also are there actually such things as 4096 sprites or is he just being a dick butt

  7. #7
    Sir-Mass-a-Lot Sylux's Avatar
    Join Date
    Nov 2010
    Posts
    7,448
    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.

  8. #8
    Ruler of the Seventh Empire GunZet's Avatar
    Join Date
    Jan 2011
    Location
    Preparing the laser beam, we're gonna use it tonight.
    Posts
    11,906
    Couldn't you just upscale them using vector graphics.

  9. #9
    Sir-Mass-a-Lot Sylux's Avatar
    Join Date
    Nov 2010
    Posts
    7,448
    No because you must have at least hand-made 2048 detail in order to be pro lol jk

  10. #10
    Fenn
    Guest
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •