Art Direction

I have been managing art teams of various sizes for many years now, both as a Lead artist, and as an Art Director. I have managed upwards of four projects simultaneously and learned the value of proper delegation and have always been a proponent of clear concise communication. Following are some examples of training  and feedback sessions I’ve generated over the years.


This project rose from very unusual circumstance; FXLabs was an Indian owned and operated company who had licensed a shelved project from Irrational Games,entitled ‘The Lost’. Originally the game was slated for release on the PS2, and being co-developed by Crave Entertainment. It was shelved for reasons I won’t get in to here, but had been highly anticipated by Irrational fans. The Indian team was looking for a project to “learn on” — something with most of the hard work already done. Irrational saw an opportunity to port the game to the XBox and PC with updated graphics, while allowing them to focus on the project that would become Bioshock.

I was hired to manage and train the Indian dev-team which had NO formal training in game development. I had to start with the bare basics. This was a huge challenge, the results of which I’m particularly proud of. Despite massive culture and language barriers we were able to achieve some amazing results in a relatively short amount of time. This would become one of the biggest challenges of my career.

The game shipped in to the international market; Russia, Europe, Asia, and India, but was never released in the US. Here is an excerpt from a review I could found for the game. Even though it’s not glowing, I am really proud of what the team and I were able to accomplish. Some of this team had never even played a video game before.

…The art direction in the environments excels whether it’s in a gloomy cathedral with stained-glass windows, a fiery dilapidated classroom, or a war-torn battlefield. The graphical detail is more in line with games from five years ago than the current generation of PC titles, but the demonic atmosphere, august architecture, and use of color are so well done…

…it managed to hold my interest due to its compelling locales and varied gameplay. I’m not sure how much of its development was done by FXLabs but it’s certainly not a bad start for the fledgling game maker…

The Next Level

 


Environment Texturing Basics

When texturing environments for games it is important to keep in mind re-use, and versatility. In most cases it is not a good idea to un-wrap a model then create a texture map specifically for that model. Not only is it impossible to keep the pixel density consistent using this method due to scale differences in , but each individual object ends up with its own texture. For the sake of memory, and disk space, this is not an option!

I have put together an example scene with a simple wall with an alcove, and a simple tile floor. This is meant to demonstrate, not only the proper way to create textures for objects and environments, but to show how to blend edges, and break up repeating with the use of “decals” or “overlays”

Here is a render of the scene I created, and all the textures used in the scene. Please note that the textures are all different sizes. The key to texturing for games is to use a texture that is big enough to get all the visual information across to the viewer, but small enough that it doesn’t cause memory and storage problems. It is a fine balance. You will be surprised at how far you can reduce a texture before there is a noticeable reduction in visual quality on the screen.

NOTE: Paint your textures as if they are fully lit. As a rule, the texture will never get any lighter than its base value even with a super bright light on it, but it is easy to make it darker by reducing the light. It is best to stick with mid range values. The exception is if the scene calls for heavy contrasts you can make some textures dark and others light to accent a certain area.

 

In this scene there are three distinct models, each with between one and four textures applied to them. We will start with the wall.

The Wall Model

The wall is textured with 4 textures:

-          (3) 512 x 512 textures

-          (1) 1024 x 1024 texture

 

In order the keep the pixel density consistent, the textures are tiled to different scales. The wall is 512 by 512 units, and I chose a pixel density of 2:1 (two pixels to one unit), so the 512 x 512 textures will be tiled twice across the surface, and the 1024 will be tiled once. Note that the floor texture is reused for the tiles around the alcove.

 

The Floor Model

The floor is textured with two textures. One that repeats in all directions (the floor tiles), and one with broken tiles that tiles only in two directions (left to right).

The Decals

The third model is the grime decal… it is made up of a series of polygons that mimic the geometry underneath. These polygons are raised slightly from the surface, and angled down like a ramp so that they have the illusion of occupying the same space as the wall or floor. The texture for the grime is a 128 x 128 image with an alpha channel. It is important to keep this as a separate model. If the decal is combined with the wall it can cause other objects with alpha to sort badly with the wall. It can make the wall appear as if is drawing in front of other objects, particularly other objects with alpha textures.

A decal or overlay is just a texture with an alpha, applied to polygons that are hovering just over the surface of a model. This method can be used to create streaking grime, blood splatters, charring from a fire, blast marks, bullet holes, etc…

Decal Texture

Wall Texture

There are other methods for creating decal textures (rather than using alpha). You can also use an additive texture (no alpha) – This effect is set up on a material in the Unreal engine, so you will not see the effect until you import the model and set the appropriate values on the texture in the engine. An additive texture is a texture where dark colors (below 127 in value) become translucent and eventually transparent when the color reaches pure black (a value of Zero). You can see a similar effect to additive by setting a layer in Photoshop to ‘Screen’. This is a good way to test out your additive texture over the texture you wish to use it on.

 

Additive

 

For more shadowy effects, you can use multiply. This does the opposite of additive in that anything below a value of 127 darkens the texture under it. When the texture reaches full black, the color is fully opaque, and will show as complete black, where as colors that reach towards white are fully transparent. You can test out this effect by setting a Photoshop layer to ‘Multiply’.

 

Multiply

 

In closing, here are some bullet points to think about:

  • Create textures that tile with themselves, and re-use them in creative ways.
  • Plan out your model so that it is easier to texture and unwrap.
  • Do your best to comply with a pixel density rules. It is ok to deviate a little bit, but use good judgment. If two texture are sitting next to each other and don’t seem to go together, or the textures appear blurry or “sparkly” then there is a density problem.
  • Use decals to add detail, and experiment with additive and multiplicative textures.
  • Additive textures can replace projection maps on flat surfaces, and are a lot cheaper!
  • Create textures with lighting in mind.
  • Map textures carefully on to the surface of your model so that texture edges line up with model border edges so that the models will tile with one another.
  • AVOID UNWRAPPED TEXTURE SHEETS (unless it is totally necessary.)

Beau Folsom

Art Director

:: games division ::

FXLabs Logo


Translucent light beams

 

First: Make sure that the normals on your roof are facing the right way.

 

Next: Select the edges of your hole, and extrude them straight down, then slide the bottom over to match the angle of the overall (Sun) light for the level. This will give the beams the proper perspective.

Then: Add in cross-sections to the beam at regular intervals. This will be important for later steps.

 

 

Smooth the entire surface of the light beam so that there are no hard edges.

Next: apply UV coordinates and a texture to the beam. We will adjust these later.

In Maya, in the Edit Polygon menu, under the Color sub group, you will find the command, Apply Color click on the  [] Box to bring up the options window.

In this window you want to set the color to white, and the Alpha to 0 to start. The way this works, is you grab a row of vertices, set the Alpha value then click Apply. Make sure it is Apply, and not Apply Color, because Apply Color will close the window.

Starting at the bottom and working your way up, set each row of verts with an incrementally larger Alpha value. In this example I started with a value of 0 (zero), and ended with a value of .5 at the top of the light beam. This means that the beam will be fully transparent at the bottom, and be 50% transparent a the top.

Next: spend some time straightening out the UVs, This will be important so that you can animate the texture in the engine to approximate dust flowing down the beam. Some things to note here:

  • Make sure your texture has no alpha channel
  • Paint the texture assuming it will be additive, where your bright colors will be opaque, and your dark colors will be transparent.
  • Make sure that the texture tiles in all directions, because it should tile on the beam.
  • When the texture is imported in to Unreal, set it as Additive (or the Unreal equivalent), and set the static mesh up with a texture-panner to allow the texture to move down the surface of the beam. Something slow like panning from Zero to 1 over 120 frames.

Give it a whirl!

Beau Folsom

Art Director

:: games division ::


Up to my arrival, the Indian team had only manged to port the content from the PS2 to the XBox verbatim. They had no experience in “uprezing” art assets, or taking advantage of the added features/horsepower of the new platform. They had been working on this for the better part of a year, and Irrational was not impressed with the results. It was time to give Irrational something to cheer about.

The original game was created for the PS2, so it had very limited poly counts and texture resolutions. Also the XBox was capable of some new tricks like “Material Shaders” allowing for greater control and detail in graphics than ever before. We weren’t able to take full advantage, as we were stuck with a  license of Unreal 2.5 which had not advanced to normal mapping and displacement mapping yet. regardless we could definitely take the levels and characters up a notch or three.

I chose to have the Indian team recreate the Cathedral level –

[ORIGINAL PS2 Shots of 'The Lost']

The Eye of the Behemoth

The Bell Tower Top

The Bell Tower Bottom

Ante Chamber


[UPDATED Graphics on the XBox]

Main Cathedral

Main Cathedral – With New Main Character

The Bell Tower

The Ante Chamber

Exiting the Ante-Chamber

Eye of the Behemoth — New Design

BohemothEyeBlind

Eye of the Behemoth – Blinded by a drop of pure knowledge.

EyeModel

Eye of the Behemoth – 3D Model

A lot had to be accomplished in those 6 weeks leading up to our review demo with Irrational, and I was dealing with a team that had never built any graphics for games before. Their background was in fully rendered cinematic sequences, and cartoon animation. They were not familiar with tiling textures, reusable set pieces, low poly modeling methods, stripping, fill rate, etc. As I mentioned before, we were starting at square one! We had a couple of guys on the team that were pretty comfortable in the Unreal engine because they had worked on transplanting the PS2 graphics on to the XBox using UE2.5, so we started by blocking out the space. I supplied them with some paint-overs, and layout plans.

Cathedral Entry — The Ramp leading up to the rubble pile.

Cathedral Entry — Paint-over

Cathedral Main – Initial block-out.

Cathedral Main –Paint-over with feedback.

Cathedral Diaz — Block-out

Cathedral Diaz — Paint-over

Cathedral Entry — Mesh breakdown Side

Cathedral Entry — Mesh breakdown Top

Cathedral Fence Detail

Bell Tower — Walkway mock-up Quarter View

Bell Tower — Walkway mock-up Top-down

Original PS2 version of the Succubus

We chose to redesign and build one of the monsters for the demo –

Here is our re-vamped version

And the reveal!!

There was a lot of guidance needed to get the team up to the initial quality bar. Some of their first attempts fell very short of the mark, But they learned quickly and took direction well!

Here are some examples of feedback given through the course of the 6 weeks.

The first pass at the Succubus was a bit rough.

The environments didn’t fare well either.

ROUND 2 — Getting better!!

ROUND 3 — Almost there!!

It was all coming together nicely!

over the next year and a half we rebuilt nine levels, and a myriad of characters and monsters. We took a team of inexperienced Indian artists and programmers and turned them in to game developers. Many of the folks on this team went on to do great things…

  • Level designer on ‘Conan: The Hyborian Age’
  • Level Designer at Crytek
  • Artist on ‘Fallout 3′
  • Artist on ‘Modern Warfare’
  • Artist on ‘Beatles Rockband’
  • And many more…

Cheers!

Leave a Reply