GML Blog‎ > ‎

Cel Shading in Game Maker

Cel shading is a graphical technique that is used to create a cartoonish look in games. Basically, it is the addition of a black outline to shapes. In 3d, cel shading simplifies the shadows to usually no more than 4 shades. Since in most 2d applications shadows are not needed to illustrated depth (Because there is none besides isometric but that's another article.) it is usually much simpler to accomplish.

For any single object that is not attached (Doesn't follow or snap it x & y to another object.), simply edit the sprite to include a black outline.

For “sets” of objects, like a turret that shares it's x & y with a tank, you need to make “twins” of those objects. The twins have sprites that are exactly like their originals but with a 1-3 pixel outline of black. It is also helpful to make the insides of the twin sprites black just in case there are some pixels that would show through when doing some transformations/rotations. These twins must follow their objects around, matching their x & y, image_angle, and scale. They must have deeper (higher) depths than all of the objects in the set.

That's all there is to it. Go on and try this out. Make an obj_tank and an obj_turret. In the step event of the turret, make it point at the mouse. Make the twins of the the tank and turret do the same as their respective objects. The tank has a depth of 0 the turret has a depth of -1 and the twins; a depth of 1. Now test out the demo. Looks cool huh?

You can even make a side program that will take all of your sprites and make twin sprites for them (Granted that all of your sprites are loaded into the game from image files.). This kind of modularization of cel shading for Game Maker would help you concentrate on the programming, and not on the tedious task of drawing all of those black twin sprites.

Here's a tip for the side program: Set up a matrix of objects that will pass over the sprite both horizontaly and verticaly. Everytime they collide with the sprite, have them create a black pixel object. When the matrix is all done, tell all the black pixels to search for clear areas and draw 1-3 pixels in those clear areas. Then just take a snapshot, screen_save_part(), and you have your twin object. You may want to optimize this pseudo code a bit but it should generate acceptable results.

Happy cel shading!


By the way, this is what cel shading looks like in 3D.


Notice the black outlines around the orange dogs.


Affiliates