Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

So I was just wondering on how to give a scene I am rendering a hand drawn look (like say Crayon Physics). I don't really want to preprocess the sprites and was thinking of using a shader. Cel shading supplies the effect I want to achieve, but I am only aware of the 3D instances for it.

So I wanted to ask if anyone knew a way to get this effect in 2D, or if cel shading would work just as fine on 2D scenes?

Edit:The reason why i didn't want to do preprocessing ,was that i almost don't have anything to prepossess.I have some material textures ,which are basically just black and white images and using them i create textures from specific vertices ,which represent entities in the game (mostly physics based ones).So i wasn't sure how to processes the textures for the texture mapping to work as i intended.Thanks for the help!

share|improve this question
5  
"cel-shading for 2D graphics" is redundant. Cel-Shading is the technique to make 3D look similar to hand-drawn 2D. You have total control over every pixel in 2D anyway, so to get a cel-shaded look, you simply make your textures so. You want your textures to have black borders, you open the paint program of your choice and make them so. You want them to have a flat look, you make it so. No compositing tricks required. –  Hackworth May 30 '12 at 12:00
    
You could create your own sprite renderer shader, which would add outlines (and maybe other effects) at runtime, but why wouldn't you prefer a preprocessing? It would be simpler than runtime processing, in many important ways. –  jv42 May 30 '12 at 15:12
    
The term is "cel," incidentally. I edited your post to reflect that. :) –  Josh Petrie May 30 '12 at 15:20
add comment

1 Answer

up vote 6 down vote accepted

You can't really do it without some kind of preprocessing step -- either authoring the original sprites so they have the desired effect, or including some extra information along with each sprite about pixel "depths" and normal information, essentially turning your 2D sprite into a 3D-ish data structure.

The cel shading effect is designed to make 3D art look like hand-drawn 2D art. It works with the principle of color quantization, most of the time -- mapping a smooth continuous input range into one of N discrete color buckets. Usually the diffuse term of your lighting equation -- the "n-dot-l" term, or the dot product between a vertex normal and the light vector -- is used at the input because this will range smoothly from 0 to 1. You can use this as input to a 1D texture read where the texture contains information about the actual color to apply. It usually is just a band of a small number of discrete colors.

Obviously this will be hard to do without that input value, and without encoding additional information -- such as pixel normals or depth (with which you could in theory reproduce the normals at runtime) -- into the sprite you won't have any meaningful data to use as the input. Unless your sprites are being authored in a 3D modelling program where you might be able to write some export script for producing the final renders with encoded normal information (like a normal map, essentially), you are likely better off just drawing the sprites to look the way you want.

The closest you could probably get would be to write a shader that maps the [0..1] range of every color component into one of a fixed set of buckets -- say 0, 0.25, 0.5, 0.75 and 1. This could be done independently for each component or on a global basis. It essentially massively reduces the color space available to your sprites, which is more-or-less what cel shading does. But unless your sprites are authored to account for this it's entirely possible that you will spend hours tweaking the mapping and still end up with sprites that look hideous in practice.

A render effect that is typically applied with cel shading is feature edge detection and rendering -- "outline" rendering. It would be possible to do this with 2D sprites, but you'd only get the outlines of the sprites and no interior feature edges, which does not look nearly as good. Once again, to achieve a better effect you'd be preprocessing the sprite data or just authoring the edges directly into the sprite images.

share|improve this answer
    
Thanks ,that made everything much clearer.The reason why i didn't want to do preprocessing ,was that i almost dont have anything to prepossess.I have some material textures ,which are basically just black and white images and using them i create textures from specific vertices ,which represent entities in the game (mostly physics based ones).So i wasnt sure how to processes the textures for the texture mapping to work as i intended.But this has cleared some stuff up and the solution you proposed seems like what i was looking for,so hey thanks! –  Artii May 31 '12 at 9:52
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.