MFGG phpBB Message Boards Archive
https://phpbb.mfgg.net/

Mit's Official Unofficial Spriting Dictionary
https://phpbb.mfgg.net/viewtopic.php?f=13&t=17605
Page 1 of 2

Author:  Mit [ Mon Jul 06, 2015 12:20 am ]
Post subject:  Mit's Official Unofficial Spriting Dictionary

i figured we could use one on here. if this is better suited for the graphics board, then it could be moved there, but i figured this is relevant to actual development. loosely based off of tSR's dictionary, this is mostly open to be added to and revised by the public so long as they contribute things worth adding or changing (like full sections).

CONTENTS
-Custom Sprites
-Edited Sprites
-Recolors
-Anti-Aliasing
-Pillowshading
-Banding
-Resolution
-Rips
-Sheeting
-Contrast
-Jaggies
-Sel-Out

-Custom Sprites
Custom sprites (or more casually referred to simply as customs) are sprites made completely from scratch, without working directly off of any preexisting sprite. This doesn't mean that the style the sprite is in has to be completely original, but only that the sprite itself is brand new. One could sprite Wario in Super Mario Bros. 3's style and so long as Mario wasn't used as a base, it's a custom sprite.
Image
Image
The process of making a custom sprite is usually something like this, but it varies based off of one's personal work preferences. It's usually best to start with a sketch, then lineart, then fill in solid colors, add shading, then revise where appropriate. It's also a good idea to show off sprites in this early state if you want to get constructive criticism to help you in your future revisions.

-Edited Sprites
Sprite edits are sprites that use any preexisting sprite as a base. This is more common as it's easier to do since most of the work described in the custom sprites section is done for you. However, there's an objective difference between what's referred to as a "good edit" and a "bad" or "lazy edit".

Image
Image
Edits like these that only have minor changes are usually seen as bad and/or lazy, since they require minimal effort. When trying to make edits that involve new poses for already sprited characters, people are more interested in seeing brand new actions rather than minor reposes like the one above. The one above is also pretty dumb for other reasons, mostly that Mario's a pretty clean guy- he'd never do that to anyone!

Image
Image
However, good edits are edits that fix up any oddities the old sprite has, as well as other touchups. It's completely possible to make edits that people can mistake for completely custom sprites, so if editing is your game, it's entirely possible to expand into more advanced pixel art techniques simply by using what you've learned from editing.

Outside of "repose" edits like these, there are often also edits that can give characters new power ups and abilities that weren't seen in their original games. Since those aren't really reposes, it's mostly a matter of getting it to look accurate while staying within the boundaries of the style, on top of basic understanding of pixel art techniques. Avoid pillowshading, banding, etc.

-Recolors
Image
Image
Recolors are barebones edits that only change the colors of preexisting sprites. While including them in your sheet as a "bonus" is fine (as seen below), simply recoloring sprites and submitting them won't get you anywhere. Anyone can recolor, as it requires literally no spriting know-how. The only thing it teaches you is basic palette selection, and even that's a stretch.
Image
Image

-Anti-Aliasing
Anti-aliasing or AA is applying one or more shades to a sprite to have it blend better with its background.
Image
Image
Here we see three lines: one has no AA applied to it, and it's fairly easy to see where each "segment" starts and ends at its native resolution. The light AA line only has one shade applied to it, helping it blend in with the white behind it. The heavy AA line has two shades applied, helping it further blend with the background.

Image
Image
Anti-aliasing isn't restricted to just black and white- it can be used to blend any colors into each other, as seen here with the black blending into red, then blue, then brown blending into the white.

Image
Image
It can also be used to help smooth out shapes. The left circle has no AA applied to it, and looks fairly jagged on its own. However, the right circle has one shade of AA applied to it, so it blends in better.

Despite all this, AA should typically be kept to a minimum, at least in the ways described thus far. Applying AA to sprites on any colored sheet will render them to be fairly unusable, so these techniques are only really used in larger sprites or pieces of pixel art.

Image
Image
That's not to say sprites used in games cannot have AA, however. Here, we have three Shy Guy masks- the first one has no AA applied. It looks fairly awkward, right? Not really like a Shy Guy's mask. However, as AA is applied appropriately, the eye and mouth holes are shaped to appear more like the official design. Using AA to help shape sprites to appear smoother and more appealing is common, and definitely helps a lot.

Image
Image
the mario and luigi series of games all exhibit some form of AA: here we see superstar saga sprites using both types i've described. the first mario shows AA around his outline, and the second mario (showing his skeleton) uses AA to help shape and blend the skeleton into the black background.

-Pillowshading
Image
Image
Pillowshading is shading without a set light source. Pillowshading is ALWAYS bad. It always looks bad, and the more shades applied, the worse the sprite looks as a result. If you're having trouble figuring out how to fix your sprite if it has pillowshading, definitely ask around for help- the W.I.P topic exists for a reason!

-Banding
Image
Image
Banding is a type of pillowshading where shades are directly based off of a line's shape. It's almost always jarring to look at, so try to avoid it wherever possible. An example of banding on an actual sprite can be seen below:
Image
Image

-Resolution
Image
Image
Resolution is a sprite's native size, commonly referred to as 1x, or 1x zoom. To make the best sprites possible, you should always try to stay in the same resolution for the entire sprite- don't resize a sprite then smooth out certain bits while leaving other parts in their native size. It doesn't look good, it just looks ugly and strange.

-Rips
Sprite rips are official sprites used by completed games, fan-made or otherwise, taken out from their appropriate games for use in other projects. There are many ways to go about doing this, such as using tile ripping programs (usually used when ripping from NES and SNES games, as well as other consoles from those generations) or from screen capture software in the case of ripping sprites from fangames. However, it's important to know that models ripped via screenshots from games such as New Super Mario Bros. are not proper rips, it's impossible to get every possible pose of Mario seen in the game, as he's a 3D model on a 2D plane. However, enemies like Goombas and Koopa Troopas from the game are rippable, as they aren't actual 3D models in-game- simply pre-rendered, and therefore it's possible to properly rip every sprite used.

-Sheeting
While not really a part of the spriting process itself, sheeting is important as proper sheeting means more people can easily use your sprites for their games. Having a large, bloated sprite sheet due to wasted space and other needless parts makes it more difficult to extract the sprites.

Image
Here is a good example of a properly sheeted sprite sheet by Superjustinbros, containing rips of Mario from the original Super Mario Bros. Another good sheeting tip is to sprite in "frames", similarly to a tileset. When extracted, the animations are less likely to be misused and you don't have to worry about any errors in terms of placement.

Image
Here's an example of poorly sheeted sprite sheet by myself back in 2009. It contains a lot of blank space ("jokingly" marked as "blank space" among other things) that can be easily removed with proper sheeting techniques. I've since adopted a style of sheeting where all frames in each animation are in order and properly framed, making it easy to import into programs like game maker as a strip.

-Contrast
Image
Image
Contrast is the visible difference between one or more colors. The higher the contrast, the closer bright colors are to white, and the closer dark colors are to black, essentially. However, the lower the contrast, the closer colors are to eachother- or gray, in some cases. Here, we see three cubes. The first cube demonstrates contrast that's too high. The third demonstrates contrast that's too low. The middle cube demonstrates a good level of contrast between each color.

-Jaggies
Image
Image
Jaggies are the more casual term for jagged lines. while trying to make a curve, you want to avoid having a line that's too straight (the first line) or a line that's too messy (the second line). That's not to say lines such as the first line cannot ever be used, but if you're trying to sprite something like Mario's nose (presumably on a much larger scale), you're not gonna want to have a line that looks like that on something as round as his nose. One way you could actually work around certain jaggies is by applying AA to shape the line, like how AA was demonstrated on the Shy Guy mask.

-Sel-Out
Image
Image
(this is fairly difficult to notice at 1x but that's only really on this particular sprite, as it wasn't built to have proper sel-out)
Sel-out is short for selective outline. It's coloring certain parts of a sprite's outline the same color as the color it's surrounding, albeit at a darker shade to allow it to still function as an outline. Most Pokemon games feature sel-out in their sprites (notably Gens 3-5).

CHANGELOG - (Last Update: 7/19/15)
Spoiler:

Author:  Willsaber [ Mon Jul 06, 2015 12:45 am ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

That's quite a lot of info!

Author:  Hypernova [ Mon Jul 06, 2015 3:46 am ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

All spriter should read this. I felt like this topic is worth the pin to all the spriter out there and improve their spriting skills.

Author:  Xandalf [ Wed Jul 08, 2015 12:21 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

Why is nobody talking about this.

This is really useful.

I've been spriting for about a year now, I taught myself, and I already figured out a lot of this stuff. My first sprite was a Samus recolor. Heehee.

I don't have much problems with shading and such, but I have problem with proportions and shaping. Sometime could you include a spot about that in there? I can never get the shaping of sprites just right, no matter what the size. And that's my biggest spriting problem so far.

Author:  Cake [ Wed Jul 08, 2015 12:45 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

Great resource for spriters.

(I feel like banding can be talked about a little more in-depth since I feel like I've done it before, but the definition here doesn't make immediate sense. Maybe more examples perhaps? What to do to go around it?)

Author:  EnteiTheHedgehog [ Wed Jul 08, 2015 1:49 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

This info is very useful for beginners.

Author:  FieryExplosion [ Wed Jul 08, 2015 2:18 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

This is a pretty good beginner's guide. Hope to see the advice used by other newbies!

I do hope guides like these help limit the bad sprites out there, because no one really wants to see those at all.

Author:  Kirby's Adventure [ Wed Jul 08, 2015 2:21 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

imaginary cake wrote:
Great resource for spriters.

(I feel like banding can be talked about a little more in-depth since I feel like I've done it before, but the definition here doesn't make immediate sense. Maybe more examples perhaps? What to do to go around it?)


Banding is when shading follows the outline perfectly - and it usually has the darkest shades further out.

Author:  Xandalf [ Wed Jul 08, 2015 2:26 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

FieryExplosion wrote:
I do hope guides like these help limit the bad sprites out there, because no one really wants to see those at all.

Nah. I like them because mine look better in comparison this way.

Author:  Mit [ Wed Jul 08, 2015 2:30 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

proportions/shaping and revising banding with more examples are things i can do. the former would likely be split up into various sub-categories.

Author:  VinnyVideo [ Wed Jul 08, 2015 4:56 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

This is a very useful "Spriting 101" topic. I would suggest following standard capitalization guidelines for a tutorial topic, though. Besides looking more professional, it would also improve readability.

Author:  Mit [ Sun Jul 19, 2015 2:33 am ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

updated the OP. revised banding, fixed capitalization, and added contrast, jaggies, and sel-out.

i didn't add proportions as that's actually basic drawing principles and aren't really exclusive to spriting itself, but i may add it at a later date.

Author:  HylianDev [ Sun Dec 13, 2015 1:26 am ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

stickied and moved to Graphics & Audio

Author:  HylianDev [ Thu Dec 24, 2015 2:48 am ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

Whoa, guys. This is all a little much.

KirbyLover, I'll say this. Art isn't easy. Being good requires that you suck for months and months and you eventually stumble upon making a good thing. Then you suck some more for a while and your good things get better and more common. But basically, everybody, even Mit, has sucked a lot before. Mit made this topic I'm sure because he made all of these mistakes many, many times before and learned through experience and -- importantly -- criticism.

You could make amazing sprites, work worth being proud of, if you just keep trying and listen to criticism. I know that criticism online can often just be insulting, but if you can look past sucky criticism to find out how you can improve, you'll get there. But never without criticism.

Now everyone, please stop talking about it. This is a stickied topic, a fickle debate from winter 2015 is an ugly mark to have on it.

GATO EDIT: Cleaned up the thread.

Author:  DragonDePlatino [ Sat Jan 02, 2016 2:41 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

Mit wrote:
the mario and luigi series of games all exhibit some form of AA: here we see superstar saga sprites using both types i've described. the first mario shows AA around his outline, and the second mario (showing his skeleton) uses AA to help shape and blend the skeleton into the black background.

Something to note: I see new artists misuse this type of external AA all the time. For it to work, the background must always be brighter than the external AA like in Superstar Saga. You might want to add something here to discourage artists from thinking it always works.

Author:  TheShyGuy [ Sat Jan 02, 2016 6:09 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

What about using alpha for AA? Then, it would work all the time. Why isn't alpha AA more common?

Author:  DJ Coco [ Sat Jan 02, 2016 7:59 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

^Because most spriters stick with 100% opaque sprites. It's also the better choice if you intend your game to look 16-bit.

Author:  DragonDePlatino [ Sat Jan 02, 2016 9:06 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

TheShyGuy wrote:
What about using alpha for AA? Then, it would work all the time. Why isn't alpha AA more common?

The biggest strength of pixel art as a medium is its sharpness. When you add alpha AA, you begin to move away from that.

Image

This sprite still looks good with 1/3 opaque AA, but I'm not personally a fan of the look. I do use alpha transparency for things like shadows, however.

Author:  Superfly [ Tue Mar 08, 2016 3:08 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

Also, just my 2 cents. But light source is also very important. This is a crucial fundamental when it comes to any form of art

Author:  Mit [ Thu Apr 07, 2016 4:36 pm ]
Post subject:  Re: Mit's Official Unofficial Spriting Dictionary

i've seen some people around the forum (including the post above) mentioning i should add x thing to the dictionary.

the thing about that is that, usually, they aren't necessarily spriting terms. light source, color choices, things like that apply to art in general. not so much spriting exclusively.

i would personally rather not get that deep into a dictionary intended for spriting only. if you want a more extensive "guide" to pixel art that covers more broad art terms like these, i suggest anyone interested looks into pixel logic, which is more or less an extensive "handyman's guide" to pixel art.

Page 1 of 2 All times are UTC - 5 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/