|
|
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
|
|
|
|
|
|