OLIV'S DITHERING TUTORIAL

Dithering is a technique spriting technique used to transition colors, give the appearance of multiple colors, and to give texture. I have compiled 7 basic dithering styles here. I ahve also broken down the traditional dither into 4 parts, and show a technique you can use to soften any dither.

As you look through the tutorial, look at the textures the dithers create and think about what they could be used for. Most of them could be used for anything, but one may be especially suited for vloth, mottled skin, metal, etc.


The Completed Basic Dither

Description The complete dither. It is composed of 10%, 25%, 50%, and 75% dithers. This dither is not used for texturing, but for smoothly transitioning colors.

The Components of the Basic Dither

10% Dither

Description The first part of the complete dither.

25% Dither

Description The second part of the completed dither. This has a noticable texture, and is good for creating a soft shadow that does not go into 50% dither.

50% Dither

Description Third part of the complete dither. The most commonly known dither style. Is useful for creating a flat in-between shade.

75% Dither

Description The fourth component of the complete dither. This is the only of the components that gives a real "texture." This is caused by the crosses.

Those are the components of the completed dither. Many can be used on their own, or in different pairs or trios. I reommend when dithering a large basically unrestricted piece dithering 25% - 50% - 25% between shades. For smaller sprites, just do a straight 50% dither. The only time you should need the complete dither is if you are working on a very large piece with very restrciting colors.


Dither Styles
These dithers are not only used for transitioning, but also for texturing.

Brickwork


Diagonal


Groady


Horizontal


Scribble


Vertical


I also want to show you how to "soften" or "extend" a dither. It's very simple, you just take the raw dither like the vertical:

And tack on some extra pixels, effectively softening and making the transition more gradual, like this:



Here are all the dithers at regualr size in one image:


That is what dithering is. Not something you can really teach, but something you have to look at and understand what is being done and how. I hope this helps you understand pixelling better :)

Downlaoded gm7, yet to pay for it though. I want everyone to recompile their games in gm7 and re-release them so I can play them! Please! I'm sorry I got Vista, but pleaaaase

I started a game wioth thernody and cocpuffs. Right now we got some characters, a very detailed list of basically the whole game, and some sprites. It'll be awesome. Now, onto the main point of this blag.

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/LNVYWJOEy9A"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/LNVYWJOEy9A" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

ALGEBRAIC!

Well, I got accepted as a spriter into TeamOG. They're teh awesome clan that made Ivan. Oh, and that screenie I showed you was bogus xP. It was actually the trialwork for the OGs. But, maybe you'll be happy to know that Seven Scientists is in the same style?

Here's a screenshot of the fixed/ fully played around with tileset.


I was also going to start a 3/4 arcade game, but halibutski says he can't program something from nothing. Oh well. Off to jellyfish, lol.

So, Jellyfish... he's an awesome programmer, honestly like the best I know. Don't beleive me, check out his physics engine. Programmed compeltely in GM, omfg. If I could program like that....

irl, yeah, that thing.... it's going good, school and stuff. Well, you all know how school goes, so not much to say.

Well, sorry, but that's all I got. Hope it's enough, mr.moderator.

PS- mr.moderater, images are worth a thousand words.

Some of the tiles that tie the image together are missing, like the little niche-corner ones. The backgrounds and foregrounds are also not shown here. you got to wait for the game xP

I'm really kind of getting offed by drawing people... it's more of a chore than drawing animals, not as fun


Argh the second dogs back foot is a little short...

The fox is missing it's front left leg. Oh well. THis one's for you, desertfox.

Cats are really long...

I don't like the bottom of her hair.


That's all I got for now. Maybe some mechs next time.

Elk.. or soemthign liek that


Hairy old man


Man parts


Wolf.

That's all.

I have coem back from a 3 day trip to Disneyland. Not fun, it's like the world of fake-spontaneity. Gawd. The nice people at Adesso sent me a new tablet driver, so I've been drawing again, right now I only want to share a couple of profiles I did to show off at GMClans (I am a judge so you better watch your back!)

The back of the head is large, I don't like her nose, and I don't like the bottom part of her hair.


This one I like, it came out how I wanted. He's supposed to look faintly Spartan/Greek, he will star in a short bulljumping game Jellyfish (1337 programmer buddy, check this out if you want proof (no really check it out it's AMAZING)).

Report cards came.
Hist H- A (only one in my class, damn that teracher)
English H- B (the woman is crazy, not my fault)
Calc- B (I don't like the class, but the teacher is extremely nice)
French 3/4 H A (je parle francias plus pauvre)
PE- A (Run the mile, wear the clothes, get an A)
AP Bio- A (Thank god, I had to bust some ass in this class)
All in all, I'm disappointed, and I think I'm spending way too much time on schoolwork as things are now. So feck.

I've also been bustin my ass on an adventure game since about mid-summer, and I've kept it pretty secret.

Titled The Seven Scientists of the Far North (awesome name) you play as one of seven scientists commisioned by somebody to go and study magama tunnels in Iceland. While you're there, some shit goes down and you need to go kill stuff and proceed to save the world.

Completeion Chart (i r not nub)
Planning- 50% ( I don't know how it ends)
Development (levels)- 30%
Programming- 80% (I don't like AI opr cutscenes)
Spriting- 90% (More enemies, some scewnery, foreground stuff)
Effects- 0% (I'm leaving it til later)

About the gameplay
-You have a gun that shoots grenades that explode. It was originally mining eqipment, ie, blow up rocks.
-You have a heat wand (sword) that was originally designed to melt ice off shit.
-You have a shield. It was orignally used to proect from falling rocks
-You have sticks of dynamite. They are now your mines/ obstacle removers. Orginally used for entertainment.

Yeah, I thought about the weapons for awhile. I wanted to keep this game say, +5-10 years future, but still very realistic and somewhat plausible, except then come that whole save the world thing which...

So now, I will leave the control scheme to ponder over. I wanted gameplay to be similar to Metroid.

WASD for movement. E for weapon changes. F for flashlight/ function. Arrow keys for ---?

I've already submitted this tutorial to a few other places, and i figure since I don't have a site I should submit it here for you guys as well.

oliv's basic platform sprtiting tutorial


Part1

Use greys to sketch a concept of what the sprite will be. Darker greys for shadows, lighter for basic lines. Do NOT begin cleaning up the lines while they are grey. The idea here was a robotic dinosaur with a cockpit where the head was, but that changed.

Part2

Use black to create an outline, on top of the greys. make sure the black outline is as clean as possible. Try fluxuating the black outline across different parts of the greys, to help see which lines are more natural.

Part3

Basic clean up, get rid of greys, and if anything about the lines looks awkward change it now.

Part4

Pick your pallet. This is one of the most important steps. First, think about the mood your going for. Then think bout what colors are associated with that mood, and pick out colors that go with it. keep in mind you must think of the actual color that object is- any child will tell you waater is blue- it is not. Water is grey, water is green, water is purple, water is blue, water is black, whater is white (reflections). In the color chooser, experiment with the colors- don't pick a color out of the section that has the general thing you're going for- really look at the colors.

Now, in small sprites you need contrast- lots of it. So make sure your colors are few and far between. When adjusting shades (look at color choosing for ref.), you start where your original color is (the black dot in the green), and then move your next color either to the left or right of where the original color is, and down, then lower the ptich on the right hand side (that grayscale bar) as well. Note that I only used 4 colors total for this sprite. Put all the colors on your image, side by side, to see how they look. Make sure there is enough contrast! ALWAYS minimalize your color usage. (This is only basic pallet-choosing, not at all in-depth)

Part5

Begin coloring your dinosaur by filling in with your mid- color, then add shadows and highlights. When coloring, don't color things the way you think they should be- color them the way you see them. Go on google images and looks for reference pictures, so you see how the light really falls on them and how they really look. One thing I sometimes do is draw a lightsource up in the corner, to help me visualize where the light is coming from. DO NOT color over ANY of your outlines- outlines are absolutely necessary for small sprites. Just color around them for now.

Part6

Time to begin coloring your outlines- slightly. use the two darker colors (I have for), and use the lighter of two darks to color over where the brightest parts of the image are. Also, in places where the outline have doubled up, use the lighter of the darks to highlight the part with more light.

Part7

Begin anti-aliasing (AA). Start with your mid color, and go around the edges of the outline that when zoomed out are roughest. You tuck single AA pixels in the corners of the outline. Do not overAA with this shade, only use it for the parts that are roughest. Next take the lightest shade and begin adding pixels next to the darker AA in a manner where the pixel does not sit on top of them, creating a lump, but along the outline and net to the original AA pixel. Then, go through the corners that were not AA'd before and add AA there- but ONLY in the areas that need it. If you over AA the image will look fuzzy and blurred. MAKE SURE that none of the AAing interferes with the shape of the sprite- only softens it.

Final

Look at the sprite now- if anything is wrong, fix it. Sometimes you just have to finish a sprite before you really see what is wrong with it. Clean up the background, and you're finished. If you're going to animate the sprite, do so now, or if you're an outline-animator, too late :(. I hope this will help people with their sprites, even if all it does is teach good spriting form and techniques, not actual drawing skills- those come through practice.

And here are the steps in one image (dammit I JPEG's the image >_< sorry guys)



Now practice on these lines! Post with your colorings, make sure you do while following the steps in this tutorial!

thnx guys :D

Ronins, I think, are samurais who have abandoned their masters. I think. I am not japonese.


this is ringo, in-game. unanimated, for now. Ringo is a ronin who wanders around beating the crap out of people and taking their food.


normal.


happy. Ringo is never happy, this is as close as he can get.


embarrassed. the only time he looks like this is when someone gets on his case for killing for food.


sad. this is how he looks when he has no food. that is to say all the time.


angry. this is how he looks when people taunt him with food. he usually kills them.


exasperated. this is how he looks when he thinks about food.

Ringo, random person. random person, Ringo. Hopefully you'll be seeing more of each other (in a game! woot)

muy mulahs

well, I'm not in a gming battle just yet. But I will be, very, very soon.

And i'll be in it with my new clan,


Our clan consists of me, teknogames, and nobody.

YES, NOBODY AND TEkNOGAMES!! w00t.

we also have this sexy lil' thang



To put in our signatures.

in the battle, we will face down my old clan, Cactus Blossom. But they have merged with clan water Margin, thus, we will PWNINATE WATER BLOSSOM. i feel kinda bad about pwning my old clan, but not too bad. Anyways, the battle is to create a semi-linear platform game with 30-50 levels in 3 months.


I also made a gollem! pretty crappy, i know. Now S I P _ S T F U

I need ideas for what to sprite. post them, or something.

And I am rlly bored, but tekno will be back from arkensaw on thurs do, so things will get wai batter.

Bye now.

EDIT



i am the third highest level at GMClans. Whos hot now?

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/tK3Ce9md96g"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/tK3Ce9md96g" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

I wouldn't say it's better than the previous, just... different. You have to watch it maybe 3 times before you really understand what's going on. The Decemberists RULE.


If you're brave enough to click, you'll laugh. Hard.

In other news, I've done more animations of Spud, and gottens ome recordings for his voice. Not that nayone gives xD


Ohh yeah, tekno + 3d = ZHOMFG

Radnom has volunteered to help me with Spaceman Spud,which we will be working on as partners. I will be doing graphics, he effects and programming. I was kind of disappointed by the number of comments in my previous blog, but whatever. Today I'll get cracking on more Spud animations.

Now for the best music video.
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/qWf_CIz--88"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qWf_CIz--88" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

Take On Me by Ah-Ha
Total pwnage.

I got Perfect Dark for my 360, and that game is so great, I don't understand why everyone was all "meh" about it. 4 player co-op, for goodness sakes, and there's an awesome cover system that makes gameplay more challenging, and the AI actually thinks- when you have your back turned it will sneak up on you, the take cover when you turn around. it's really great, though the plot is mediocre.

Das all.