Cell Shading in 3D art

Disclaimer

Most of the projects that I will be doing are for a game that I am developing on my own code named Project Ninjio. In short, the game is a story action driven role playing game (common referred to as an action RPG). It features 2 uniquely styled areas, one in which the cities are built to flow along with nature, and the other where the cites are hyper futuristic. The game is built in the Unity 3D game engine.

Cell Shading in 3D Art

Introduction

Cell shading vs a normal, smoothly lit shader

One of the things that I have questioned myself a lot during the course of Ninjio's approximately 1 year development time is what art style would be best for the game. I originally planned for the game to have a fairly realistic art style, closer to the Uncharted series of games made by Naughty Dog games. This, however is not very realistic for the game engine that Ninjio is built in. I then turned towards various games from the past that seemed to have aged well in terms of their art style. The art style that I came up with that seemed timeless was cell shading.

Cell shading, often referred to as toon shading, is a lighting technique used in games. The proces consects of, instead of having the light shine smoothly, lighting is approximated and rounded up and down to appear like the lighting was applied by hand. In this style, the lighting is typically one calculated once or twice, resulting in hard lighting edges when transitioning between a lit part of the object to a darker part of the object. This technique has been used throughout the years in games such as Jet Set Radio, The Legend of Zelda: Wind Waker, Ni no Kuni,and Pokémon X and Y.

Jet Set Radio

Legend of Zelda: Wind Waker

Ni No Kuni

 Pokémon X and Y

Typically this technique is used in conjunction with a border around every object, like Jet Set Radio and Pokémon X and Y, but it doesn't have to.


In fact, I plan not to use borders around objects in Ninjio, as I enjoy the clean look that Legend of Zelda: Wind Waker gives in it's aesthetic.

Implementation in Ninjio

Surprisingly, there is no easy way inside of the Unity3D game engine to make this lighting mode possible. There is something that Unity includes default with the game engine that makes any object using that material in the engine look like it is cell shaded. This is great, however I want everything in Ninjio to be make by myself, that way if something is broken I can at least know how to fix it. The way that I ended up making this happen in Ninjio is by telling the lighting engine, using a the built-in lighting shader code as a reference, to round the lighting values to the nearest whole number. This gets the job done very well.

So where is that code?

As much as I want to go ahead and put the shader code for everyone to use right here in the blog, I honestly don't feel like doing that. It is not because I hate all the beautiful people who read this blog, it is because that is how I learned coding. One thing that I have to say to everyone is that Google is your friend, look anything up that you don't know. I had slight difficulty when writing the shader code for this cell shading look, but I ended up learning a lot more about low-level graphics processing than what I would taking the easy way out and just using the default cell shading scripts found in Unity.