Welcome once again!

In a previous post, I’ve talked about how important lighting is so as to recreate our 3D world. In fact, it’s importance goes beyond the 3D scene, and there comes the 2D part of the game, such as textures, menus, GUI elements or some other related things. As in the post before, I want to spare some background with you, as it may help focusing about what we are talking about.

I’m sure that you’ve seen some of that very nice and well illustrated Star Wars, Indiana Jones or even Harry Potter posters over there. It’s part of Drew Struzan’s work, which you’ll recognize as soon as you see them. I have to admit that I love his mastery and skills, bringing life to the stencil. If you are asking for someone closer to gaming industry, I may suggest the work of Shinkiro, illustrator of SNK and Capcom. His work on lighting is worth seeing. Both of them cleverly use light to give more realistic look to the images, as you may see in the posters of Indiana Jones or the King Of Fighters characters, for example.

As 3D/2D artist working in A Mad Journey Minigolf, I realized that I spent most of my time making 2D art and texturing. Of course, skinning a character can be tedious, but painting textures was my time consuming activity. You have to plan what textures do you need and make the most out of them reusing as much as you can – thus saving some memory space, but that’s another question. As I’m producing images in virtual stencils, I have powerful tools that improve my productivity. In my daily work I use Photoshop CS (no matter the version, everyone has the basis explained here), and I’ll show you in this example how to get those lights quickly enough, for adding details to our character’s face. It’s a simple illustrative example about how you can start by adding details that look realistic, working with lights and shadows only.

The key is working properly with layers. If you are tidy, you can achieve great results in no time. Let’s paint our base layer. It’ll contain only color information, such the skin tone, eye and hair color. You may be tempted to add some other details such as zones that look slightly different (the nose stroke by a cold breeze looks a bit red!), but it’s best to have those details for another layer above the base. So, you can preserve the base, change the details efficiently, and have different versions of the face. You may notice that I’ve painted no nose, but be patience: it is there.

First layer for the face

Next, I’ll focus only on lighting, on a layer above (Ctrl + Shift + n). This layer will be overlayed over the ones below, so select that fusion method in the layer dialog (which you can open pressing F7). It’s marked in green in the image. I use the spanish version of Photoshop CS 5, so it’s called Superponer, but you may find it as Overlay as well. This part is very important, as it allows us to focus on shadows and lights, instead of color: I’ve only used grayscale tones in this layer.

Photoshop final layer composition

The light comes from the left of the image, so part of the eye is covered by shadows. The nose magically appears in front of our eyes (where else could it be?) just by drawing the shape of it with shadows, and remarking the outline with white tones. And, of course, here is also the mouth, drawn with a thin line that shows the smooth shadow of our lips. The shadows may be a bit brighter, so we can add another layer, overlay it again, and retouch some shadows.

First lights applied

Shadows added

The process needs a bit of practice, but it’s rewarding when you see the final result. And you do not have to care about colour, which is the main point of this post. This means that you can change the skin tone, and do not have to modify the lights at all. What’s more: once you got the shadows, experiment changing the fusion mode: Hard Light, Soft Light … I left some examples to invite you to try this techniques.

Hard lights

Hard and overlay

Soft lights

As you can easily notice, paint strokes aren’t accurate while painting shadows and lights, they are easily noticeable in the images. But that’s the advantage: even imprecise strokes give great results. You don’t need to have nerves of steel nor great pulse to achieve good looking images. Below is one texture used in A Mad Journey Minigolf, done with the same technique described here, and then applied to a level of the game:

Basic color for the structure

Lights added to the structure

In-game results!

As you can see, this concepts can be applied to a lot of aspects of 2D art and texture creation. Once again, I hope it was worth reading for you. And, as always, feel free to leave a comment!

CrazyBits Studios.

Hi!

I’m Rafa del Riego, Art Director at CrazyBits Studios. Now that A Mad Journey Minigolf, our first game for iPhone/iPod, has come to the end of it’s development, I thought that sharing some of the knowledge learnt with you will benefit both of us, especially if you’re a 3D artist or want to become one. In this post I’ll talk about how to light things up, given that light is, perhaps, the most important artistic feature one has to care about when it comes to recreate a world.

I won’t get into tedious explanation about light sensing, but ¦ have you ever heard about cones and rods? Human eye has about 5 million cone cells – color sensing – and about 90 million of rod cells – grayscale sensing. So, most of the information we see doesn’t need color at all, although color is almost a must. See the two images below, taken from the incoming promo video of A Mad Journey Minigolf (UPDATE: it’s already done: watch it here), and the final result.

Ambient Occlusion Pass

Default scanline pass

Ambient Occlusion multiplied with color

If you’re used to 3D modelling and rendering, I’m sure that you noticed that this was Ambient Occlusion and some lights affecting the scene. The point is that you’d probably have noticed that grayscale images have a lot of information: illuminance without colour is still very expressive!

Things this way are fine for current gen consoles and filming industry, but as long as real time needs for mobile platforms concerns, complex lighting is too expensive nowadays: we have to find workarounds to make the scene still visually atractive.

Level design can help to achieve realism, although as artists we won’t be designing so often (if ever at all). But we have in our hands one powerful, inexpensive and effective tool: vertex painting. With it, we can fake the lights, and give the scene that look & feel we have in mind. Vertex lighting (faking the lights by colouring every vertex, simulating real light), is the lighting of the poor. But it’s great anyway, as you may appreciate in this two images from a level of A Mad Journey Minigolf. The only difference between them is that one hasn’t vertex colour (first) and the other has. The latter is what you will see in the game. It’s not as complex and realistic as the previous Ambient Occlusion example, but the difference justifies the time spent.

Scene without vertex lighting

Scene with vertex lighting

Some background: vertex data includes 3D position, 2D texture coordinates and colour, and they are usually imported without problems in game engines; that’s why you get that fine result in the game. One benefit of it is that it’s almost inexpensive compared to other lighting techniques: all computation is baked into vertex data, thus saving CPU/GPU time as it avoids lighting calculations.

So, yes; the more the vertex, the more the detail the model has. And, yes again: we have a limit of vertices. Now the question is: how can we achieve a great result? In my experience, it’s best to drop some vertices from the the stuff (things on scene, decorative or playable, but not main characters, as they are too important), so as to expend them later in our terrain, the main receiver of light. It’ll improve the overall look. The key is to place the vertices in the mesh so the blending of colours truly represents the flowing of the light over the surfaces. It’ll usually require moving existing vertices in the mesh, but practice will give you fine guidelines as how to do it.

First version – Vertex light disabled

First version – Vertex light enabled

Fixed version – Vertex light disabled

Fixed version – Vertex light enabled

Take a look at the example. The mesh (our cave) is near a light source (a magic ball), but the vertices aren’t well distributed, so we see the light over a diamond shaped surface. After adding some vertices we have conducted the light. Of course, it’s an illustrative example, but shall do, as now the light propagates in a more realistic fashion.

Tools, please?, you might ask: Vertex Paint and Edit Poly modifiers, both included in 3D Studio Max. Every other 3D modelling program have similar tools, sure. With Edit Poly you modify the geometry (primarily the vertices in this case), and with Vertex Paint, you’ll paint every vertex.

Create the mesh of your terrain/stuff/etc, model it, do the texture mapping, and apply a Vertex Paint modifier. First of all, remember to set the Vertex color display – unshaded mode in the Vertex Paint dialog that appears (top left icon, marked in green in the image), as you will see the final result right into the editor. I recommend start flooding the entire mesh with the predominant color (shadow/light), and then painting the enlighted/darkened areas with brighter/darker colours. If you find that it looks overall brighter/darker than you want, add another Vertex Paint modifier and flood the entire mesh with black/white at, say, 10% of opacity, and see what happens. The same goes for globally changing the colour of the mesh.

3D Studio Max's Vertex Paint tool

One tip with 3D Studio: you’ll often find, after painting, that you need more vertices: add another Edit Poly modifier on top of your Vertex Paint. If you use one below, you’ll get unexpected (and undesireable) results, although you can use them to move the vertices without problem. That’s what I’ve done in the previous example, as you can see in the snapshot.

So simple that it’s amazing the great results it provides. There is other tip worth mentioning to bake lights automatically, but you’ll probably end up fixing the result: search for tutorials about Render to Texture and Bake Lighting, and you may learn more.

Lighting is a very complex field, so I have barely scratched the surface in this post, but I hope this is something worth reading for you. That’s all till the next time. Enjoy playing A Mad Journey Minigolf if you want to see our finished work, which includes some other uses of vertex lighting (the Ghost Wheel awaits you, the Haunted Castle, the Dwarf Mine, the Magic Hut ¦), and feel free to leave any comments/feedback/personal experience, we’ll appreciate it!

CrazyBits Studios.