Lara's Hangout - Das Forum von TRForge.net
Nadines Tutorials - Druckversion

+- Lara's Hangout - Das Forum von TRForge.net (https://www.trforge.net/forum)
+-- Forum: Games & Technik (https://www.trforge.net/forum/forumdisplay.php?fid=3)
+--- Forum: Tomb Raider Level Editor (https://www.trforge.net/forum/forumdisplay.php?fid=4)
+--- Thema: Nadines Tutorials (/showthread.php?tid=483)



Nadines Tutorials - Nadine - 09.06.2008

Texturen für den NGLE: Natur

Als Ausgangsmaterial nehme ich Fotos von Sand, Felsen und Gras:
[Bild: 1-sand.jpg] [Bild: 1-grass.jpg]
[Bild: 1-rock.jpg]

Fangen wir mit dem Gras an, über Filter -> Sonstige Filter -> Verschiebungseffekt kann man die untere Kante des Bildes (rot) über die untere Kante (blau) und die rechte Kante (gelb) neben die links Kante (grün) stellen. Hierbei sollte man das Bild um jeweils etwa die Hälfte der Breite und Höhe verschieben:
[Bild: 2-farben.jpg]

Mit dem Kopierstempel kann man jetzt die Ränder weicher machen indem man das Gras rechts als Quelle definiert und so den Rand in der Mitte übermalt. Dies kann man an allen Rändern machen und hat somit eine Textur die "seamless" ist (also nahtlos aneinander passt).
[Bild: 3-uebergang.jpg]

Beim Fels kann man ähnlich vorgehen. Erst kann man ein möglichst großes Stück des Felsens freistellen:
[Bild: 4-felsenausschnitt.jpg]

Dieses verschiebt man jetzt wieder um ca. die Hälfte des Bildes um die Übergänge zu bearbeiten. Dabei sollte man darauf achten, nicht allzu markante Felsformationen doppelt im Bild zu haben:
[Bild: 5-felsen.jpg]

Nun kann man die Gras und Sand Texturen verkleinern (hier auf 128x128 für den Next Generation LE) und die Grastextur über die Sandtextur legen. Aus der Grastextur kann man nun mit dem Radierwerkzeug Teile herausschneiden:
[Bild: 7-bodentex.jpg]

Das fertige Texturenset als TGA kannst du hier herunterladen.


Texturen für den NGLE: Stadt - Nadine - 09.06.2008

Mit dem Next Generation Level Editor ist es endlich möglich größere Texturen zu verwenden - aber wie kommt man zu guten Texturen? Suche mit z.B. mit Google nach Begriffen wie "architecture", "classicism", "roman". Englische Begriffe sind meist besser, da man zu mehr Resultaten kommt. Achte darauf dass die Fotos groß genug sind (>1024x786) und nicht Urheberrechtlich geschützt sind. Ich habe mir dieses Bild für das Tutorial ausgesucht:
[Bild: tex1_basisfoto.jpg]

Erst einmal möchte ich eine normale Wandtextur. Öffne das Foto in einem anständigen Grafikprogramm (Photoshop) und erstelle je zwei horizontale und vertikale Hilfslinien. Diese Linien helfen dabei die Perspektive zu korrigieren. Verzerre nun das Foto und korrigiere so die Perspektive. Für Texturen braucht man immer Frontalansichten.
[Bild: tex1_wandzerren.jpg]

Schneide nun das Rechtecke innerhalb der Hilfslinien aus.
[Bild: tex1_wandfensterteile.jpg]

Links stören noch Teile des Fensters. Nimm den Kopierstempel, definiere mit Alt+Klick eine Kopierquelle und korrigiere den linken Rand. Speicher die Textur erstmal ab.
Jetzt zum Fenster: benutze wieder Hilfslinien um die Perspektive zu korrigieren und schneide mit Hilfe des Lasso Tools und dem Auswahlrechteck die Mauersteine heraus:
[Bild: tex1_fensterschnippeln.jpg]

Das Fenster speicherst du nun auch ab. Öffne nun wieder deine Mauertextur und verkleinere sie auf eine passende Größe. In diesem Falle wäre 128x256px angebracht. Kopiere nun das ausgeschnittene Fenster auf die Mauertextur und richte eine neue vertikale Hilfslinie bei 50% ein. Mit der Hilfslinie kannst du das Fenster nun direkt mittig platzieren:
[Bild: tex1_fensteraufwand.jpg]

Das Fenster solltest du noch auf eine realistische Größe bringen (Lara ist etwa 96 Pixel hoch). Setze die neuen Texturen in deine TGA und öffne den NGLE:
[Bild: tex1_editor.jpg]

Aktiviere den "Big Textures" Button und trage deine neuen Texturen an irgendeine Wand auf Smile


Einige Tipps zur Beleuchtung (Englisch) - Nadine - 09.06.2008

1 - The Light Effects
First of all, lets get familiar with the different kinds of light effects. The most common one is the Light Bulb. Activate Show Light Meshes to see the area the light bulb will affect.
[Bild: 1-lightbulb.jpg]
The second one is the Shadow. I has the inverted effect of the Light Bulb and is thus already quite unrealistic. Shadows are the absence of light and it's better to light a dark room with Light Bulbs than darkening a bright room with shadows. So, usually you won't need the shadow effect.
Third, there is the Spotlight. It creates a cone-like light effect. In contrast to the Light Bulb it is directional. The Spotlight can be used in comination with lamp objects or it can simulate light coming through a hole in the ceiling and so on.
[Bild: 1-spot.jpg]
The fourth light effect is the Sun. It is a very powerful tool to easily light rooms. The sun is directional too, but it creates shadows based on how the environment looks. In the picture below you can see the shadow right of the wooden box.
[Bild: 1-sun.jpg]
The last one is called Effect. It is rarely used in custom levels, probably because most builders don't know of its potential. One quick example: In the picture below we have a lamp hanging from the ceiling and a normal Light Bulb lighting the room. However the ceiling is far too bright - the lamp is covered on top.
[Bild: 1-effect-a.jpg]
When you place an Effect, it won't do anything yet, you need to set it up first. In this case I want to darken the ceiling so I lower the Intensity (Int) to darken the face the Effect has been placed on.
[Bild: 1-effect-b.jpg]
So, basically the Effect can be used to correct little glitches in the lighting. Note that the Effect will only change the lighting on the surface it has been placed on, it will not affect Lara or other objects.


2 - Colours & Atmosphere
Something you need to consider while lighting your rooms is the atmosphere you want to achieve. Lets say you want to build a mediterranean city at sundown. Wonderfully romantic, eh? Choose warm and soft colours like orange, red and pink.
[Bild: 2-warm.jpg]
On the opposite lets take a look at the cold colours. To create a chilly feel you can use blue-greyish tones and a bright cyan to light the scene.
[Bild: 2-cold.jpg]



3 - Contrasts
This room has an orange base colour (Ambience) and is lighted by an orange Sun. It looks like a typical scene at dusk but still it looks rather dull.
[Bild: 3-orange-mono.jpg]
This can be changed by getting some more contrast into the lighting. I set the base colour to blue. Thus the hightlights are still orange but all the shadowy areas are now dark blue. This is a colour combination that works fairly well - the colour of the bright areas is a warm orange and the shadows are cold blue.
[Bild: 3-orange-kontrast.jpg]
This can be done with numerous colour combinations, though it is advisable to use cold colours for the shadows (=base colour). Here are some examples: green base colour and yellowish light, gives a rather creepy atmosphere.
[Bild: 3-gruen-kontrast.jpg]
The next one has a blue base colour and pink light, looks rather surrealistic but it can be used nevertheless ;-)
[Bild: 3-rosa-kontrast.jpg]



4 - Examples of Good Lighting
The best you can do to improve your feeling for a good lighting is to play the original Tomb Raider games, especially TR5.
Here are a few examples of the excellent atmosphere and lighting.
This is a screen from TRC, take a close look at the colours used: low saturation, lots of grey. Wonderfully cold and bleak.
[Bild: 4-cold.jpg]
Valley of the Kings, TR4.
[Bild: 4-warm.jpg]
TRC Ireland.
[Bild: 4-creepy.jpg]


Texturen für den NGLE: Stadt (Englisch) - Nadine - 09.06.2008

With the new Next Generation Level Editor it is possible to use bigger textures - but how to get high quality textures? First of all, go to google.com and search for pictures. Use terms like "architecture", "classicism", "roman" etc to get a decent picture. Look out for high resolution (min 1024x786) photos. You should keep in mind that some photos are copyright protected. For this tutorial I chose this picture:
[Bild: tex1_basisfoto.jpg]
I want to get a brick texture and a window for a start. Open the photo in the graphic program of your choice (I use Photoshop) and create two vertical and two horizontal lines (not on the actual picture, but on a different layer or in case you use Photoshop, you can use the "guides") These lines will help you to correct the perspective of the photo - which you can do by distorting the photo: pull the corners of your texture into the corners of the rectangle:
[Bild: tex1_wandzerren.jpg]
Now crop out the rectangle and your brick texture is almost done.
[Bild: tex1_wandfensterteile.jpg]
As you can see there are some parts of the window - you can delete these with the so-called "stamp-tool". Define a source using ALT+Click to select the area which you want to copy and then click on the window parts to paste the copied area. Now save your nearly finished brick texture. Let's continue with the window texture: Use some guidelines to correct the perspective and then crop the brick parts out of the picture by using the "rectangular marqee" and the "polygon lasso" tool:
[Bild: tex1_fensterschnippeln.jpg]
Save this one too. Now open your brick texture again and resize it so you can use it in the room editor. A good size for the NGLE would be 128x128 or in this case 128x256. Now copy the cropped out window onto the brick texture and set a vertical guideline at 50% so you can easily center the window:
[Bild: tex1_fensteraufwand.jpg]
Resize the window a bit so it fits into the texture. Put both textures into you texture set and open the next generation editor:
[Bild: tex1_editor.jpg]
Activate the "Big Textures" button and apply your newly created textures to a wall Smile


Texturen für den NGLE: Natur (Englisch) - Nadine - 09.06.2008

As a base for the new textures I have photos of sand, rock and grass:
[Bild: 1-sand.jpg] [Bild: 1-grass.jpg]
[Bild: 1-rock.jpg]
Lets start with the grass texture. In Photoshop go to the Filters menu and choose Other -> Offset. With this filter you can rearrange the picture so that the upper edge (blue) is below the lower one (red) and the left edge (green) next to the right one (yellow).
[Bild: 2-farben.jpg]
Use the stamp tool to soften the transitions so that the texture will be seamless.
[Bild: 3-uebergang.jpg]

You can do this with the rock and sand texture too. Crop out a large section form the rock:
[Bild: 4-felsenausschnitt.jpg]
And use the Offset filter to edit the edges and make the texture seamless. Make sure there are no striking rock formations in the texture:
[Bild: 5-felsen.jpg]


Now resize the textures to 128x128 and copy the grass texture upon the sand texture. Cut out areas of the grass texture with the eraser tool so that the sand is seen below to get some transition between the textures:
[Bild: 7-bodentex.jpg]
You can download the textures as a TGA here .