...This suite of tutorials is largely aimed at pre-UT3 versions of the Unreal Engine. However, some of the information, particularly in the 'Theory' section, is universal regardless of the Engine, or game, used.

If you're a level designer interested in learning more about lighting, I'd reccomend reading through the entire work.




Introduction:

Those of you who know that this tutorial is my very first one are probably wondering why I choose to talk about lighting before architecture, since architectural forms are the first element one manipulates in UEd. The reason is relatively simple, but not necessarily intuitive: the fact of the matter is that forms and architecture are puppets of the light. In other words, one must think of the function of a level’s architecture as a facet of the light, and avoid trying to force the light to adapt to the forms (in fact, you can do this, however it will take much more time than the methods I will be recommending.) In sum, therefore, the design method is more or less inverse to the order of the tools that are presented in the editor.

For the rest of you who are looking to better understand how to use UEd’s lighting tools, you’ve come to the right place. However, this is not a tutorial aimed at the discrete functions of the tool; it is assumed that you know what a Light Actor is and what is contained in its properties before reading this. If you still need this information, then I would recommend starting with any of the many tutorials available online. Otherwise you certainly won’t understand much.

CAUTION: the techniques and tools presented in this tutorial relate to UnrealEd 3.0 and therefore to UT2KX, and possibly to a certain extent for Unreal 2. However, there is no guarantee that the information will be applicable for other editors using the Unreal Engine or its derivatives such as XIIIEd, DevastationEd, or others. On the other hand, one can reasonably expect that the majority of tools will be available in UT3’s editor, but there’s no guarantee of this: just keep it in mind when reading the tutorial. As for UnrealEd 1.0 and 2.0, rather, for Unreal 1 and UT99, I would hesitate to say that all of the described techniques are possible.

One last item of note: this is not a tutorial that will teach you how to make ‘beautiful’ things, but it will give you ideas for methods and ways to simplify your tasks while designing. Just as in the majority of other arts, making a ‘pretty’ level is easy, but to make it truly ‘beautiful’ is pure chance. If you follow these methods you will increase your chances greatly. Follow your heart and the results will not be guaranteed.

Are you ready? Then let’s begin!


1) Light : what is it?

If you ask a physicist they would reply that light is the visible portion of the electromagnetic spectrum; the one that belongs to the four fundamental interactions of the universe along with gravity, strong interactions, and weak interactions. It goes without saying that artists learned to domesticate light long before scientists were able to express it using equations, the kind that you don’t truly need to know; but a little physics never hurts. In addition, it will enable me to explain some basic aspects that will be useful to examine for better understanding other portions of the tutorial.

So... take a peek at the following diagram:


From left to right, the length of a wave, measured in nanometers (1 Nm = 1 millionth of a millimeter) is reduced; from the safe ones on the left, to the deadly ones on the right. The electromagnetic spectrum is thus composed of a suite of radiation. The ones that interest us reside between 400 and 700 nm because this is the interval that can affect the retina and thus are ‘visible’ (artificial processes can also permit seeing into the ‘invisible’ spectrums but, of course, these do not concern us).

The lower part of the diagram represents the splitting up of light when passed through a prism. This experiment was carried out by Isaac Newton in 1676 to show that light consists of an infinite amount of colors. As far as we’re concerned, we’ll stick to the Red, Green, and Blue because Thomas Young, in 1800, showed that mixing these three tones to varying degrees allows the reproduction of all the other colors.

One can distinguish two color types: chromatic and achromatic. The latter are Black, White, and all intermediaries of Grey, whereas the former are comprised of all the shades of Red, Green, and Blue. The chromatic colors are defined through three primary attributes.

- Brightness: The relative density of the colors; chromatic or achromatic. In UEd, this attribute corresponds to the brightness of the Light Actor: the higher the brightness, the stronger the light.

- Hue: The shade of the color: the Red, Yellow, Green, Blue… the colors. But there are ‘only’ 256 colors in UEd. The other two attributes make it possible to moderate them to be able to reproduce all the visible colors of the human eye.

- Saturation: The degree of saturation of each color. The more a color is saturated, the more color comes through. The less saturation, the more ‘pale’ is becomes. (Note that in UEd, this parameter is inverted. The more the saturation is raised, the more the color fades.)


2) Contrast: Why is it essential?

If light enables us to distinguish the forms which surround us and thus direct us in our environment, it has also another fundamental property: The areas that are not lit stay in shadow and are thus darker that the rest in our field of view. Thus, our brains are able to interpret the concepts of 'depth' and 'volume'; the famous '3rd Dimension', dear to computer graphics experts. If, one day, you have the opportunity to watch a painter at work, watch as they mix light, dark, and their intermediaries to create an impression of space on the fabric. (Of course, this does not apply to abstract painting.)

A picture is worth 1,000 words…


On the left, the form is shown as an absolute. In the center, the same, but lit by 360° of light. On the right, a light emanates from the left center (the illumination down the right edge is caused by the reflection of light from the floor back onto the cylinder). See how the distribution of the shades create an immediately identifiable form without any thought on behalf of the viewer, just as its position is also indicated by the shadow (this example progressively shadows the ground when moving away from the object and the light reflected on the right edge is attenuated).

Note: The central figure illustrates the problem with Zone Lighting well. This technique, though quick and easy, tends to reduce lighting contrasts. Pushed to the extreme as in the figure above, it would destroy all your efforts, thus it should be used with caution. (Brightness values of 16 or 32 should be the maximum chosen for Zone Lighting).

Of course the example presented here is simplified. In fact, it's simplified to the limit of monochromatism (one color and its variations, like a Black and White composition plus the intermediate levels of Grey to some extent…). Generally, this is a color system of very restricted potential which is little used by level designers because of its inherent limitations. One shouldn't believe it to be neither useless nor necessary. You will find some official levels that use this monochromatic system of close colors to great effect, such as DM-Gestalt and, to a certain extent, DM-Icetomb. Here are screenshots; do not hesitate to open them in UEd to examine how their respective authors circumvented the inherent difficulties.



The Easy Way: This process was taught to me… a long time ago by my first art professor, Marie-Héléne Astruc, to whom I owe about 90% of what I know about artistic creation. When you work on a composition for a while, the image of it tends to become 'imprinted' in your head so that you don't perceive its defects any more. Thus, if you periodically look at it in a mirror, it will allow you to detect contrast weaknesses since looking at it reversed is similar to seeing it with a brand new eye. Of course, this doesn't work quite the same way with level design since you are creating an environment in three dimensions observed from several successive points of view in UEd. But, from a point of view of fixed locations, like the spawn point of a single-player level, or the exit from a corridor where the player's view is restricted, or from a point toward a significant landmark, like the Super Shield room in DM-Injector, this trick could be of some use. From time to time, take a screenshot of the area in question, and flip it horizontally in an image editing program such as Photoshop. This 'mirror image' (remember this expression, we will return to it…) is a rather fundamental trick for any self-respecting artist and will allow you detect flaws that you would normally not easily see.

Note: Beginner artists are often tempted to darken the colors to obtain contrast and, opposed to the above example, can lead you to believe it works well; however, this is not necessarily a 'good thing'. Indeed, the painters of old used blue almost exclusively (Cyan, to be precise, but I'll get back to that later…) to darken their colors, but never Black. The use of Black is an invention by printers which is only about a century old. There is no artist whose works are in museums who used this 'color' for the simple reason that it did not exist. To make 'Black', which was actually more or less a dark chestnut, painters mixed equal quantities of the three primary colors. What are the primary colors? Let's proceed onto the following chapter to find out…


3) Complementary Colors: Color contrasts

Monochromatism was only of limited interest, so artists quickly developed a similar system of contrast based on colors. Early on, the painters used mineral powders mixed with water to create their paint. They then refined this technique by mixing the powders with oil which dries more slowly and therefore allows more time for the artist to interact with the canvas. With modern chemistry, more complex techniques became available; such as acrylic resin. Very quickly they were able to stop juggling many powders and only use three primary colors to create all the others by mixing them in different quantities. These three colors - Cyan (a pale blue), Magenta (a slightly rosy red), and Yellow – are called ‘Primary Colors’ and the products of their combinations are called ‘Secondary Colors’. Towards the end of the nineteenth century printers adopted the colors and, naturally, adopted those of the painters to adapt their machines to use the pointillism technique conceived by Seurat and Van Gogh. This technique consists of juxtaposing tiny points of primary colors side by side in order to create an optical illusion of color gradations (known as ‘secondary colors’). This would normally be obtained by mixing the powder mentioned above. When viewed from a distance, the colors mix perfectly, whereas close-up, the points of primary colors can clearly be discerned. Some examples:


If you take the time to look very closely at an image in a magazine (don’t be afraid to use a magnifying glass), you will notice that the image is made of a multitude of juxtaposed points which, viewed from farther away, reproduce the intermediate colors and the gradations necessary that avoid uniform surfaces. These are often abrupt and are called ‘flat’. (I don’t want to indicate that flats must be avoided absolutely; Modern Art has shown this well, but as a general rule an image with many ranges is more pleasant to the eye.) In Photoshop these points are called pixels…

Over the centuries, artists used all the secondary colors they could obtain through mixing the primary colors, and long believed that there were no others; until color photography was invented. Then it was realized that certain colors on a piece of film could not be printed as such. The printer’s colors – and those of the artists – were too restrained, which is the reason why one speaks of ‘Printer’s Colors’ (CMYK) and the ‘Visible Colors’ (RGB) where the spectrum is wider than the preceding one. (You can easily check this with Photoshop: for example, if you set the color to pure Red in the Color Picker, with RGB=255,0,0, you will see - just to the right of the New field where the color obtained with this combination is displayed - a little triangle with a ! in the middle; this sign simply means that this color cannot be printed, and the values which appear in the CMYK field - in the bottom right of the Color Picker - are just an approximation of this RGB color with CMYK tones: this tool is of great help for graphic designers who work in the printing industry and it allows them to avoid big mistakes which can only be seen once the picture is printed, I.E. too late because a domestic printer is useless for this). The problem that concerns us is that the complementary colors are in the CMYK spectrum: how does one incorporate the colors in the RGB spectrum into it?

Remember, above, where I mentioned that light is a visible portion of the electromagnetic spectrum: in reality, light is only a ‘straight line’ where the only extreme contrast that can be obtained consists of juxtaposing two sides of the two extremes of the spectrum, thus the Red and Blue. Rather limited, isn’t it? More often than not the result is generally too abrupt to become widely used – see DM-1on1-Squader for more details. A solution can be represented by positioning the RGB in a triangle and overlaying the CMY spectrum in the following manner:


*Note: Contrary to what is shown here, the mixture in perfectly equal qualities of the RGB spectrum is supposed to produce White, not Black, because this is the product of the mixture in equal quantities of the primary CMY colors. This diagram is supposed to simply illustrate the principle of the superposition of two spectrums normally incompatible. Thus, view it with a grain of salt…

At the triangle’s extremities is the visible light spectrum, RGB. In the center is the CMY spectrum which is presented as the form of a Color Circle, the one and only bible of all painters; composed of Cyan, Magenta, and Yellow. The secondary colors obtained by mixing equal quantities of primary colors correspond to their placement within the circle between the primary colors.

- Cyan and Magenta = Violet (V)
- Magenta and Yellow = Orange (O)
- Yellow and Cyan = Green (G) (*Careful; this is not exactly the same green from the RGB spectrum. It’s not ‘printable’, because it is actually RGB=0,0,255, in a similar way to the one I discussed above regarding the pure Red.)

The secondary colors are thus the ‘Complementary Colors’ not used to obtain them. Follow the white double arrows to find a primary color’s complementary color, and vice-versa. These ‘Complementary Colors’ are thus the ‘opposite’ primary colors and therefore those with which it is necessary to combine in order to get the best contrasts, and therefore the best implementation of space and volume in a level environment. Here is an example of the use of complementary colors in an image which resembles another you have already seen. See how the cylinder, now in orange, is clearly separate from the blue floor, the primary color complementary to the orange.


*Note: For the RGB spectrum, the combination of the colors is known as ‘subtractive’ whereas for the CMY spectrum, it is known as ‘additive’, and the reason is rather simple. For the CMY spectrum, you probably already understand; the addition of the primary colors on a white sheet makes it possible to reproduce the color gradations. That is, using the pointillism techniques of printers, or by mixing paint on a palette (or directly on the canvas for the true Masters). Regarding the RGB spectrum, it’s a little more subtle; in fact, the colors don’t truly ‘exist’. They are just materials whose atomic structures enable them to retain some of the light they receive, and reflect the rest. The colors retained are stripped from the light and the reflected colors are the colors that surround us. It goes without saying that no 3D engine is able to reproduce, in real-time, all the details in their complexity, which is the primary role of textures and materials in lighting a level. We’ll return to taking into account the importance of this later on…

*Note: As mentioned previously in connection to DM-1on1-Squader, too many contrasts tend to kill contrast; in short it hurts the eyes. Many examples are in children’s media; those of Walt Disney top the list. Children don’t distinguish color as easily as adults. Therefore it becomes necessary to use very saturated colors and strong contrasts to express volumes. You thus should not feel obliged to transform your level into Las Vegas or Alice in Wonderland in order to express depth. A harmony of color is often the best approach both for the eyes and to avoid a large imbalance (I will present some examples with notes later). If in doubt, don’t forget that a mirror is your friend… Here is an example of a Walt-Disney’d version of a level (DM-Cusrse4), at least in my opinion…


It’s useless to argue that this type of lighting does not function well for a theme that tries to be infernal and daemonic. In fact, it gives more an impression of being in a marvelous fairy-like place rather than at the gates of Hell. Was the author misled in his choice, or did he stay too close to the concept? It will never be known for sure, but to me, there does seem to be a lighting problem. You may not share the same opinion, however.

This example enables me to mention the following: the symbolism of the colors, or when Art is combined with Philosophy, or even Metaphysics. Certain obscurantist imbeciles, whose names I will not mention out of courtesy, argue strongly in their tutorials on certain forums that certain colors are better than others because of their symbolism. This thesis is hardly tenable for several reasons. First, artists since the dawn of Art have always used the majority of colors available to them (knowledge of basic Art History supports this) such that they were all of use and that there were no better others. In fact, the choice of a harmony of colors depends on the theme of the work and the personal choice of the author. Which brings me to the next reason: the symbolism of colors varies widely from one culture to another (proved by the disastrous policy of General Motors during the sixties which tried to sell cars painted with American colors in Asia, with dramatic consequences for the company). This is to say, that the symbolism you work so hard on over many hours will lose all its meaning if the audience is African, Asian, or whatever else. This is even more likely in modern times when your work can be downloaded from any place on the planet. Do not waste time on dreams, stick to the path – you are an artist, not a philosopher or metaphysician. Your work involves allowing your audience to feel an emotion while regarding your work. What your audience does with your work is none of your concern: know your limits.


...Continued in Part 2: Application