Well, here’s your post-alpha update from the Misfit Interactive 3D Director.
Kyle wanted me to write this over the term break, but here I am, sitting in the airport during my 3 hour layover in Calgary on Sunday, and I’m just now starting to type this out on my laptop.

Some of you may wonder about the general art style of the game “Hench.” Well, sorry to disappoint, but Mark’s article should probably cover that better than I could. What I’m going to tell you about is how we implemented our chosen art style. Using the Unreal 3 Editor, it was quite a challenge to get a working CelShader for our game. As you may already know, we’re using two different types of cel-shaders in our game; one for our environment, and a completely different one for our characters.

Implementing the Environmental cel-shader was a slight challenge to figure out, but after getting some much appreciated help from Lanh Doan, Pieter Parker (of GD10) and Chiyo Lai, I was able to create a very distinct looking CelShader. The way this was done is basically tricking the engine into showing and hiding certain polygons of the Static Mesh. I would create a Static Mesh in 3DS Max 9, unwrap all the UVs and all the fun stuff. But before I started to texture the mesh, I would select all the polygon faces of the mesh, Shift+Drag the mesh so it created a duplicate of the mesh, then I would position the duplicate exactly on top of the original and then Detach to a separate object. Doing this, I had two of the exact same meshes in the exact same space. Kinda redundant, eh? Well, after selecting one of them, I’d then select all the polygons of that mesh, Extrude by Local Normal with an extrusion height of 2. This gave me one mesh that was slightly bigger than the first one. After again selecting all the polygon faces of the larger mesh, I would invert all the normal’s so that facing towards us would be the back of the polygons. With that mesh still selected, it was time to unwrap the UVs for that mesh. Opening the UV Editor in Max, I would select all the UVs, and scale them down so they were very small, and move them off to the side so I could deal with them later. Exiting the UV Editor, I would then attach both meshes together, and enter the UV Editor once again. This time, I would have two sets of UVs, one regular size, and one tiny size off to the side. Selecting the tiny sized ones, I dragged them into the grid-space and put them way up in the corner (usually top right) and out of the way of any other UVs that I wanted textured. Using this method of making a cel-shaded mesh is not very efficient, as you can tell. It forces us to use twice as many polygons as we would like, but it also gives us a nicer CelShader.

How it works is that the back side of a polygon does not get drawn when it is rendered in an environment, so you can see through the outer “shell” of the mesh. Using some very fine texture work, this outer shell is colored black while the rest of the mesh is colored whatever colors we felt worked in our color pallet.

Now you have the construction of the Mesh, so I will now go through the texturing part. Since Unreal 3 is able to use Specularity and Normal Mapping, we decided to use those features to give our meshes some very fine detail. Rendering the UVs onto a 1024×1024 template, I brought the UVs into Adobe Illustrator CS3 and began fill coloring the UVs. In the top right corner (or wherever I had put the second set of tiny UVs) I put a single tiny spot of black to cover those UVs up. Using black there gave us the black outline on the Static Meshes in the game. When I was happy with my color setup, I brought the Vector image into Adobe Photoshop CS3 into a 256×256 canvas. Since I was converting Vector shapes into Pixel images, I had to sometimes manually re-color a couple pixels that mixed color incorrectly. This gave us a flat color texture on our meshes, and we needed something a little extra to make it look truly beautiful.

Opening the original 1024 UV template, I began to set up our Normal Map. Thanks to Chiyo Lai, I got almost all of my textures from http://www.CGTextures.com (Amazing site, check it out). I won’t go through this process, because it’s pretty self-explanatory. After I had my Normal Map layout that I wanted, I saved it as a Targa format (.tga) and imported the image into CrazyBump (Amazing software) and created a Normal Map with that. Going back into Photoshop that I kept open, with the Normal Map layout still open and in separate layers, I deleted the layers that would not produce any specularity, like wood for example (unless you’re playing Bioshock :P), and only keep shiny surfaces in there, with a black background. Saving this as a Targa format as well, I used this as our Specularity map. I know that is not how specularity is used in the real world, it’s usually black and white instead of color, but using this gave our game just that little bit of extra when you’re looking at meshes.

Now you know the whole process of how the Static Meshes were constructed, I’m going to go through how our Characters were made. Being a team of only four guys, and being the smallest team in our class, we tried to find ways to make our workload less intensive than it already is. We outsourced our main character, Hench, to Paul Patko to model, and he did an amazing job of it. Kudos to him. The Food Ghost, code named “Mercedes,” we outsourced to Mohit Punia, and he also did an amazing job of creating such a key character to our game. The Special Ghost, code named “Jet,” we outsourced to Dan Bittencourt, which looks great so far, albeit incomplete. The Attack Ghost, code named “Tank,” I modeled myself. I’m not going to toot my own horn or anything here, but I believe he came out very well.

Creating a CelShader for these characters was a very long and drawn out task to complete. Creating CelShading in such a realistic rendering engine as Unreal 3, there was a lot of time spent in the Material Browser. Our first CelShader, courtesy of Lanh Doan, was a very simplified shader.

Unfortunately, we decided to find a more complex shader tutorial to try on our own. I was told to check out Hourence’s website, and found a very fancy CelShader on there. Borrowing from his example, I recreated and altered it slightly to look a little better.

But, it still didn’t look quite right. I decided to jump into the Unreal 3 forums provided by Epic, and created a very hot topic on there regarding CelShading.

Many people came out and shared their concoctions, and we finally settled upon this last shader.

It is very complex, very confusing, and very easy to break. But one big advantage it had was being VERY light on rendering instructions. Being the awesome professional that I was with the Material Browser by then, I debugged the shader and found out what options to tweak. I also removed a lot of stuff that I felt wasn’t needed, or just plain didn’t have any effect on the shader (from what I could tell. I had only been using the Material Browser for about a month, so I was still very much a noob to it). I also tried to look into how Material Instances worked, and I decided that I liked them very much. Changing a few values, we were able to change the colors of the Material Instances, and basically apply the same Material to a character 5 or 6 times without being extensive on the rendering instructions. With that taken care of, we were able to bring out characters to life in our game. Having a different CelShader on the Characters and Environment really helped to make the characters pop out on screen, and be the main focus of the player, with the environment providing obstacles.

Well, there you have it. The entire rundown of what I did to make everything 3d in our game come to life.

Thomas Kobelsky, 3D Director