Introduction to Skyboxes

Relic's Introduction to Skyboxes

For UnrealED 3.0

The purpose of this tutorial is to cover the basics of skybox design in UnrealED 3.0 for UT 2003 / 2004. I am not a master of Unreal Technology by any means, but these are truths and techniques I have learned during my course of map making. I assume you are already familiar with the basics of map editing. If not, then this tutorial is not for you...

So...you have a nice level going on and you are ready to add some awesome sky effects. For this tutorial, we will start with a very simple one room level, then design our skybox. You will be able to apply these techniques to any level you are designing. I suggest following along with your editor open to get the most from this tutorial. So get a cup of coffee, sit back, and get ready to dive in!

Building our simple room

Open UnrealED and let's start with a fresh map. We'll arrange our viewports so that we can see all perspectives. I am using UnrealED for 2004, but the interface is the same as 2003. Click on the 'View' menu and choose Viewports > Configure. A box appears with different viewport configurations. The first one is already chosen for you so just click OK.

Let's build our initial room to build in. Right click on the cube builder tool and we will enter our room dimensions. Let's use a height, width, and breadth of 2048. Next click the 'Build' button. You should have something similar to figure 1-1 shown below.

Figure 1-1

Next we need to choose a texture for our room. For this example let's use the texture 'bas02HA' found in the 'HumanoidArchitecture' package. Now that we have a texture selected, click on the 'Subtract' button. We now have a room to work with, but we need some light and a player start before we can build it. In the top viewport, right click near the center of the room and choose 'Add light here'. Check your other viewports to make sure the light is near the center of the room. You'll notice that the room is still pretty dark, so double click the light actor you just added and let's adjust it's brightness. In the properties box, expand the 'Light color' section and change the 'Light brightness' to 255. To add your player start, right click somewhere on the room's floor and choose 'Add player start here'. At this point, save your map...then click on the 'Build all' button to compile your map.

Now let's make a hole in the ceiling of our room. Again, use the cube builder to make a brush with a height of 64, width of 1024, and a breadth of 1024. Click 'Build' and position your new red builder brush in the center of your ceiling. Line the brush up so that it is just above and touching the ceiling (see figure 1-2). This will make an opening in our ceiling which will later become our sky. It's a good idea to designate surfaces that are meant to be sky, so before we subtract let's choose a different texture. Go to your texture browser and open the package 'wm_textures'. Choose the 'sky' texture then click the 'Subtract' button to make the hole. Rebuild your map to re-calculate the lighting and save.

Figure 1-2

At this point, we could simply texture the new brush with a sky texture and be done. However, the sky would not appear realistic. As your player moved, the sky would not appear to stay still...as if it were far away. To get this effect we need to create a skybox. Skyboxes can be very simple backdrops, or more complicated with moving objects, distant static meshes, even emitter effects! We will keep this fairly simple and just create a nice backdrop.

Skyboxes are simply cubes that are created OUTSIDE of your level. They are usually small in size, and should be the size of the sky textures you intend to use. For example, if you wanted to use a sky texture that was 1024x1024 then you should make your skybox cube dimensions the same size. This will save you the trouble of having to scale and position your textures, and retains the original resolution of the texture. A basic skybox is made up of a subtracted cube, a texture, and a SkyZoneInfo actor.

We will want to build our skybox far away from our level...especially if you are not sure how big your level is going to be. There are many different sky textures provided by Epic, so you may want to browse the texture packages before you decide on one to use. For this skybox, we will use the 'AnubisSky' package. In your texture browser go ahead and open that package. If you take notice, they provide a texture for east, west, north, south, and the top. Take note also of the texture size...as this will be the desired size of your skybox cube. The top is 1024x1024 and the sides are 1024x512. In this case, we will want our skybox to measure a height of 512, width of 1024, and breadth of 1024 to match the textures.

Create a cube builder brush with the above dimensions. Move the builder brush far away from your level and click 'Subtract'. Now that we have our skybox cube it's time to texture it. You now should have something like figure 1-3 below.

Figure 1-3

It's a good idea to use your Perspective viewport and navigate inside the skybox at this point. That way we can make sure the textures are lining up correctly. Before we apply the textures, we need to edit some properties of the cube's surfaces. Unless you plan on using a sunlight actor, or other lighting method inside the skybox, you will need to set the surface properties to unlit. Choose any surface and highlight it. Right click on the highlighted surface and choose 'Select Surfaces > Matching Brush'. This will select all six sides of the skybox. Next right click on any of the selected surfaces and choose 'Surface Properties'. Under the 'Flags' tab, check the 'Unlit' checkbox. Now any textures we apply to the surfaces will be illuminated without the need for a light source. Time to apply some sky textures. Go to the texture browser and locate the texture 'AnubisTop'. This will be the roof of the skybox. Now click/select the ceiling of the skybox cube while holding the left shift key. The texture should be applied to the ceiling. Since the room dimensions match the size of the texture, no scaling should be needed. Your skybox should look like the figure below.

Figure 1-4

Nice! Now we have a sky...but we need to also create a panoramic view on the 4 walls, unless the horizon will not be visible in your finished map. To create the rest of the backdrop, we'll use the East, West, North, and South anubis textures. If you are unsure which direction is North, you may just have to experiment placing the textures until they form a matching backdrop. Simply highlight each side surface of the skybox and apply the appropriate texture. Everything should line up perfectly since our wall dimensions match the texture dimensions. Once you have all the textures in place, your skybox should look like figure 1-5. The floor was not textured since it won't be visible in the map...however one could be applied if needed.

Figure 1-5

One small, but important, addition is needed to complete our skybox. In order to use this backdrop in your map, you need to place a SkyZoneInfo actor inside the skybox. Open the Actor Browser and find the Info > ZoneInfo > SkyZoneInfo actor and highlight it. In the top viewport, right click in the center of the skybox and choose 'Add SkyZoneInfo Here'. Check the other viewports to make sure that the actor is inside/center of the skybox.

Figure 1-6

Now we are ready to apply this backdrop to our simple room. In the perspective viewport, navigate back to the room we created earlier. Select all of the surfaces making up the hole in the ceiling. To do this, click and highlight any of the brush surfaces. Right click on the selected surface and choose 'Select Surfaces > Matching Brush'. (pressing Shift + B will have the same effect) With all 5 surfaces selected, right click and choose 'Surface Properties'. Under the 'Flags' tab select the 'Fake Backdrop' checkbox. You may want to rebuild the map. Your backdrop should now be visible in the ceiling's opening. If nothing appears, make sure 'view backdrop' is enabled in your viewport. (to check...right click the grey bar at the top of your perspective viewport > view > show backdrop) If you play your map now, you will notice how the sky stays still as you walk about the room.

Figure 1-7

Let's say we want to make some windows in our room's walls and make the horizon visible. First let's make a builder brush for our window. Right click on the cube builder button and create a brush with a height of 512, width of 64, and breadth of 1024. Position the builder brush against the side of your room. Open the texture browser and let's use the wm_textures > sky texture. We only do this so that we know which surfaces have been designated as backdrops later on. Click the 'Subtract' button to create our window. Make another window on the opposite wall. In my example map, I made two more windows on the other two sides.

Figure 1-8

Apply your backdrop to the windows using the same technique used on the ceiling. Rebuild your map and save. Click the 'Play Map' button and you should have a room that looks like the one below...

Figure 1-9

Now ... anywhere in your map you want your backdrop, all you have to do is set the surface property to 'Fake Backdrop'. You could go on to make the skybox even more realistic. For example, you could build a sheet near the top of the skybox and texture it with moving clouds...add moving objects...add emitter effects. Anything visible in the skybox will be visible in your map!

If you found this helpful...let me know at relic@relicsut.com and I will proceed to cover other topics.