Author Topic: Shading Tutorial  (Read 4961 times)

0 Members and 2 Guests are viewing this topic.

Offline Chakra

  • Inactive Staff
  • Flagrunner
  • *****
  • Posts: 937
Shading Tutorial
« on: April 18, 2006, 11:14:36 am »
How to Shade Your Maps

Although shading isn’t particularly necessary in your map, it does add aesthetic value and make the polygons much easier to look at.  In this little tutorial, I’ll show you how to create seamless shading that looks realistic.


MapMaker Controls
First, let’s look at how to use the shading controls.



Polygon Tab In order to use the controls, you will need to select the ‘Polygon’ tab.

Vertice Colors Underneath the tab are three different drop-down menus.  These let you select the different colors for each vertice (or corner) of your polygon.  When you select a polygon, you should see that the vertices have colored dots on them.  Each dot corresponds both to the order in which you placed the vertices and their color selection menus in the polygon tab.  So, the first vertice that you place will be coded green, the second yellow, and the third is red.  When you click on the arrow in the drop down menu, you will see many different preset colors that you can choose to shade your vertice.  Alternatively, and much more useful, is the topmost color which is your custom color.  This will bring up a color mixer and let you pick specific colors to use and save for later use.  I will explain how to use this tool later on.

Copying and Pasting Colors The buttons below the drop down menus will let you pick up colors from vertices and set them to others.  To pick up colors from another vertice, simply select the polygon and then click the ‘Get Colors’ button.  The colors from each vertice will then be transferred to your three vertice color menus.  If you want to take the colors from your menus and place them on a polygon, select the colors that you want to use, click on your polygon, and then click on the ‘Set Colors’ button.

Texture Options The texture options let you stretch or fix the textures on your polygons.  Select a polygon and click the ‘Stretch Texture’ button to click and drag the texture around.  Alternatively, click on the ‘Fix Texture’ button to set your polygon’s texture so that it matches and syncs up with every other polygon that also has a fixed texture.

Vertice Lighting Options Finally, the darken or lighten vertices buttons let you brighten or dim the individual vertices on a polygon without having to mess around with the color options. Just click outside any polygons to deselect any that you might currently have selected, click on the button that you want to use, and then click on a vertice to brighten or dim it and any vertices connected to it.  Be careful, though, because it changes the brightness fairly quickly.


The Color Mixer
This tool will come up whenever you select the topmost custom color in any color selection menu.  Here is how it works.



Basic Colors On the top, you should see a lot of boxes with different colors in them.  If you want to quickly select a default color you can click on any of those boxes to select it, and then click the OK button to transfer it onto your color selection menu.

Custom Colors Normally, you would be able to save the custom colors that you chose here, but it doesn’t work properly so no matter what you do you can only save one.  Whatever color you had selected in the Color Mixer last will be saved in the first box.

Define Custom Colors If you click on this button, it should bring up an extension to the right of the current mixer.

Color Mixer Box This will come up after you click the ‘Define Custom Colors’ button.  Basically, you can click and drag the crosshairs around (although, they disappear when you click and reappear when you release) to select any of the hues and mixtures of colors that you see there.  If you have a color selected from the boxes on the left, the crosshair should be centered over that color in the mixer box.

Brightness Bar This will also come up after you click the ‘Define Custom Colors’ button.  It is a bar to the far right of the Color Mixer that lets you change the brightness of the color you have selected.  You can either click directly on the bar or on the arrow to the right of it and drag to change the brightness.

Color/Solid This is simply a box that shows a preview of the color that you have selected.

Color Code Boxes These let you manually enter codes for two different color models.  On the left is the HSL model and on the right is the RGB model (defined below).  Each model is just another way of expressing a certain color, so as you enter numbers into one side, they will be translated into the other.
  • HSL Model HSL stands for Hue, Saturation, and Lightness.  Hue defines the type of color (from red to purple) and is represented on the Color Mixer Box as an x (side to side) value.  Saturation defines how much color is present in your sample (from full intensity to gray) and is represented on the Color Mixer Box as a y (up and down) value.  Finally, Lightness defines how bright your color is and is represented by the brightness bar on the right.[/*]
  • RGB Model RGB stands for Red, Green, and Blue.  Any color is really made up of several different colors mixed together.  So each number mathematically represents how much of each color is present in your sample, with 255 being the highest.[/*]
Add to Custom Colors This button will allow you to take the currently selected color and save it for later use.  It will move your color over to the first box under the custom colors section.  You can place multiple colors in the boxes by selecting the box that you want to save into and then selecting another color, but due to a bug in the program, you can only save the very first box.

OK Button This will save the currently selected color in the custom colors section, place it into the custom color box in the color menu that you accessed the Color Mixer from, and close the window.

Cancel Button Naturally, it disregards anything that you have done in the Color Mixer, doesn’t save any colors, and closes the window.


Matching Shading
In order to make your shading look perfect, you need to have the colors fade into each other.  The best way to do this is to match the colors on touching vertices.  Although, sometimes that isn’t possible because of vertices that match up with edges.  In that case, you should try to do the best that you can by slightly altering the colors in your color swatch, using the darken and lighten vertices buttons, or by realigning the vertices so that none match up with any edges. 


Polygon Placement
The best way to shade begins with your polygon placement.



The easiest scheme for shading polygons is to create a layout like the one above.



Alternatively, if you are making a large, rounded piece of the map, this layout may be the best option.


Lighting Part 1
The biggest and most noticeable aspect of shading is the lighting effect.  Generally, maps will try to emulate sunlight by having lighter polygons on top, and progressively darker polygons the lower down the map goes.



This can be achieved by choosing your custom color and slightly changing the slider on the right side of the color swatch.  Make each lower polygon slightly darker than the one above it.


Lighting Part 2
Another effect of lighting is to let sunlight seep into the lower portions of the map.



This makes it so that when a player is traveling along one path, he doesn’t get stuck with seeing the same shading over and over again.  It also adds a sense of depth to make your map look much more realistic.


Using Scenery To Shade For You
If you want to add a specific cast to your entire map, you can select the blank scenery (for one color) or make a detailed one (for any effect that you want) to cover the entire map. 



Go to your scenery tab, select the scenery that you want to use, check both the ‘Scale Width’ and “Height’ boxes, set the transparency down to a low level, customize your color,  select ‘2 – In Front of Everything’, and then click and drag the scenery across the entire map.


For Texture Change
Although you can’t change the texture for each polygon, you can add coloring effects that make it look completely different from the surrounding polygons. 



Here you can see how the upper polygons are colored green to simulate grass, while the lower ones are colored brown to look like dirt and mud.


Bases
In CTF maps, you sometimes want to give the player a visual cue that they are in a specific base.  This can be done by coloring the base a certain color.



Ordinarily, you would only want to shade the area around the flag and spawn points.  And to practice good shading (unlike this picture) the colors should be blended across the polygons so that you don’t get an awkward looking break in the coloring of the map.


Scenery
Polygons aren’t the only part of a map that need to be shaded, scenery needs to also.  You should make sure that your scenery doesn’t contrast with the surrounding polygons.  Try to match the brightness and possibly the color depending on what effect you are looking for.



The colors for scenery are controlled in the same way as polygons with one exception: there is only one choice of color.  Select the scenery tab and you can see the drop-down menu for colors near the bottom of the screen.


Tricks of the Trade
This method of shading works best for me, so I thought I might share it.  Sometimes in complicated maps, polygons don’t exactly match up.  So instead of fiddling around with the colors and checking to see if they work over and over again, I just switch my texture over to a blank one that I made to see if the colors really match.  To make this process even easier, I have a color picking program (ColorPic) so that I can select specific colors from an area of a polygon and then transfer them to the polygon that hits that area.




Version History
Feb 10, 2005
  -Added a mini-tutorial on the Color Mixer
  -Added more detail on the lighten/darken vertices button
  -Added more information on the Matching Shading section
  -Fixed typos
Feb 7, 2005
  -Original

That’s it!  If you have any questions or comments, feel free to either PM me or write a post down below.  I hope this helped…




Topic and tutorial originally created by Vijchtidoodah.
MM; seriously Chakra, stop the fisting
Yes, I'm still alive.

Offline BladeDancer

  • Major(1)
  • Posts: 24
Re: Shading Tutorial
« Reply #1 on: October 28, 2006, 05:58:30 am »
hmm.... what about pw?

Living in the deepest hell

Offline Toumaz

  • Veteran
  • *****
  • Posts: 1904
Re: Shading Tutorial
« Reply #2 on: October 28, 2006, 06:06:22 am »
hmm.... what about pw?

Read the Polyworks manual, same shit different interface, figure out something for yourself and stop necroposting!

Offline Ransom

  • Major(1)
  • Posts: 18
Re: Shading Tutorial
« Reply #3 on: November 21, 2006, 10:05:12 pm »
thanks for this my life has been saved. So have my maps.
In ur house, steelin' ur pie.

Offline VijchtiDoodah

  • Global Moderator
  • Veteran
  • *****
  • Posts: 1119
    • Stan Yeti Rave?
Re: Shading Tutorial
« Reply #4 on: June 30, 2007, 12:45:29 pm »
I've been informed that the images for this thread have all gone dead -- most likely because they were on n00bface's server when it went down.  Unfortunately, I don't have any backups and I don't feel like recreating all of those at the moment, so if anyone remembers the old images I used to have there and wants to recreate them, please do.

"“The ink of the scholar is more sacred than the blood of the martyr”"