Go to page 1, 2  Next  [ 31 posts ]  Reply to topicPost new topic 
Author Message
 [us]
 Post subject: Mit's Official Unofficial Spriting Dictionary
PostPosted: Mon Jul 06, 2015 12:20 am 
User avatar
Huh? What? Huh?
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
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:


Last edited by Mit on Sun Jul 19, 2015 2:32 am, edited 4 times in total.
_________________
ImageImageImageImageImage

Image
 
Top
Offline 
 
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Mon Jul 06, 2015 12:45 am 
User avatar
Kootie Patootie
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
That's quite a lot of info!

_________________
Image
My mains
 
Top
Offline 
 User page at mfgg.net
 
 [tw]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Mon Jul 06, 2015 3:46 am 
福瑞退化者
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
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.

_________________
 
Top
Offline 
 User page at mfgg.net
 
 [zz]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Wed Jul 08, 2015 12:21 pm 
User avatar
Member
[*]
[*]
[*]
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.

_________________
HylianDev wrote:
Xandalf wrote:
i hate mfgg because they declined my call of duty and minecraft crossover fangame :angry:

Whoever did this is fired immediately

Image
 
Top
Offline 
 User page at mfgg.net
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Wed Jul 08, 2015 12:45 pm 
User avatar
where are the dreamers gone?
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
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?)

_________________
Friend your imaginary cakes here!
ImageImageNNID: Astromonic
Image 3454-4272-3882
Skype: imaginary.cake
 
Top
Offline 
 
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Wed Jul 08, 2015 1:49 pm 
User avatar
What a mania-tastic time
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
This info is very useful for beginners.

_________________
Formerly TyrougeYoshi
My New and True Ref:
http://i.imgur.com/Og7ij6t.png
 
Top
Offline 
 User page at mfgg.net
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Wed Jul 08, 2015 2:18 pm 
User avatar
Jammin' with Luigi and Tails
Member
[*]
[*]
[*]
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.

_________________
Image
Image
Spoiler:
 
Top
Offline 
 User page at mfgg.net
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Wed Jul 08, 2015 2:21 pm 
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
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.

_________________
Spoiler:
 
Top
Offline 
 
 
 [zz]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Wed Jul 08, 2015 2:26 pm 
User avatar
Member
[*]
[*]
[*]
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.

_________________
HylianDev wrote:
Xandalf wrote:
i hate mfgg because they declined my call of duty and minecraft crossover fangame :angry:

Whoever did this is fired immediately

Image
 
Top
Offline 
 User page at mfgg.net
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Wed Jul 08, 2015 2:30 pm 
User avatar
Huh? What? Huh?
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

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

_________________
ImageImageImageImageImage

Image
 
Top
Offline 
 
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Wed Jul 08, 2015 4:56 pm 
User avatar
Always have a Shy-Guy in your avatar
Administrator
[A]
[S]
[W]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

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.

_________________
Course clear! You got a card.

Image
 
Top
Offline 
 User page at mfgg.net
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Sun Jul 19, 2015 2:33 am 
User avatar
Huh? What? Huh?
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
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.

_________________
ImageImageImageImageImage

Image
 
Top
Offline 
 
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Sun Dec 13, 2015 1:26 am 
Always have Jason Voorhees in your sig
Member
[*]
[*]
[*]
[*]
[*]

stickied and moved to Graphics & Audio

_________________
Image

Image Image
Bibby Team | MFGG3 Github
 
Top
Offline 
 User page at mfgg.net
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Thu Dec 24, 2015 2:48 am 
Always have Jason Voorhees in your sig
Member
[*]
[*]
[*]
[*]
[*]

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.

_________________
Image

Image Image
Bibby Team | MFGG3 Github
 
Top
Offline 
 User page at mfgg.net
 
 [zz]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Sat Jan 02, 2016 2:41 pm 
User avatar
Member
[*]
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.

_________________
 
Top
Offline 
 User page at mfgg.net
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Sat Jan 02, 2016 6:09 pm 
User avatar
C# Programmer
Member
[*]
[*]
[*]
[*]
What about using alpha for AA? Then, it would work all the time. Why isn't alpha AA more common?

_________________
MFGG TKO (scrapped) - Animations
Image
"It feels that time is better spent on original creations" - Konjak
Focus on the performance, the idea, not the technical bits or details - Milt Kahl
 
Top
Offline 
 
 
 [at]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Sat Jan 02, 2016 7:59 pm 
Cliax Codec X Splatoon
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

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

_________________
Image

Cliax Codec is a combination of top-down and third-person shooter. The gameplay will blend platforming, puzzle and shmup elements together to create a unique gameplay experience. You will take control of four playable characters which rise against a team that seemingly wants to take over the world - but are their motives really that cliché, or are there deeper motives behind their actions?

Currently designing Chapter 1-6, 5%

GOTM titles
Spoiler:
Fan Art
Spoiler:
 
Top
Offline 
 User page at mfgg.net
 
 [zz]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Sat Jan 02, 2016 9:06 pm 
User avatar
Member
[*]
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.

_________________
 
Top
Offline 
 User page at mfgg.net
 
 [zz]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Tue Mar 08, 2016 3:08 pm 
User avatar
Member
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

 
Top
Offline 
 
 
 [us]
 Post subject: Re: Mit's Official Unofficial Spriting Dictionary
PostPosted: Thu Apr 07, 2016 4:36 pm 
User avatar
Huh? What? Huh?
Member
[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
[*]
[*]
[*]
[*]

[*]
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.

_________________
ImageImageImageImageImage

Image
 
Top
Offline 
 
 
« Previous topic | Next topic »
Display posts from previous:  Sort by  
Go to page 1, 2  Next  [ 31 posts ]  Reply to topicPost new topic 


Who is online

Users browsing this topic: No registered users and 0 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group