Hazel Whorley
2D Art / Level Design

me@hazelwhorley.com

tutorials

Skyboxes [UED 3]

This tutorial covers the basic concepts of skyboxes and some more advanced effects.



What is a skybox?

A "skybox" is like a fake backdrop, used to create realistic-looking skies, distant scenery, and other effects. As you move around the map, distant scenery appears to move with you (kinda like a real sky). A huge range of skybox effects can be achieved with UnrealEd. Depending on what you use it can make or break the theme of the map. Here are some examples:

example screenshot
ONS-RedPlanet - Red foggy sky with a planet and some aurora effects.
example screenshot
DM-CBP2-Buliwyf - This skybox is made with terragen with an animated ring of fog added to it.
example screenshot
CTF-FaceClassic - This skybox rotates, making it look like the whole map is spinning in space.
example screenshot
JB-DoomedHeaven-Gold - A huge demon peers down into the map from the skybox.


Building a basic skybox - step by step

Step 1: The Box
Make a cube for the skybox - it can be any size and shape but it's a good idea to use powers of 2 (ususally 1024 x 1024 x 1024). Right-click the cube and click Reset > All. Move the builder brush well away from the rest of the map and subtract it.

Subtracted cube for skybox

Step 2: SkyZoneInfo
Add a skybox actor. This marks the cube as the skybox, so wherever you apply a fake backdrop in the map you'll see the sky.
  1. Go to the actor brower and find SkyZoneInfo in Info > ZoneInfo > SkyZoneInfo.
  2. Place the skybox actor in the cube by right-clicking and click Add SkyZoneInfo Here.
  3. Move the SkyZoneInfo actor to the centre of the cube. Wherever you place SkyZoneInfo, the skybox will be shown as if you were standing at that point.
Skybox actor

Step 3: Textures
There are many different methods for making a skybox, this one uses a set of six seamless textures to make a panoramic view. One for north, east, south, west, up and down. Once you choose a set of textures, apply them to the cube as they are labelled (i.e. "up" or "roof" goes at the top of the cube, "north" at the north end of the cube etc.) Don't worry if the textures look smeared or are just huge blocks of colour - we'll fix that on the next step.

textured skybox

Step 3: Texture Alignment
Skybox textures use different Clamp Modes than ordinary textures. This prevents white lines and seams from appearing at the edges of the cube by smearing the texture's pixels right to the edge of the face it's applied to. When the textures are first applied however, they're aligned wrong, so the texture sometimes appears as a block of colour or lines. Here's how to align it properly:
Do this for each side of the cube, one at a time:

  1. Right-click the surface and click Alignment > Face
  2. Right-click the surface and go to Surface Properties. Click the Pan/Rot/Scale tab and click both the buttons labelled "1" under Pan U and V.
  3. If the texture still isn't aligned completely you can use the Texture Pan tool to align it manually.
  4. Don't forget to make the texture unlit by checking Unlit in surface properties.
If you mess it up just repeat the above steps!
The texture may also smear if your skybox has bsp cuts in it. To avoid this, move the box up and away from the rest of the map so it isn't affected by any of its bsp.

aligned skybox textures

Step 4: Applying the fake backdrop to the map
To make the backdrop visible within the map, right click the surface you want to show the skybox and click Surface Properties. Check Fake Backdrop under Flags. You can use any texture on the fake backdrop surface, but it's a good idea to use one that's easily recognised. Here I've used the texture wm_textures.Editor.sky

fake backdrop

If you want to see what the backdrop looks like from in the editor, rebuild the map, then right-click the 3d viewport and click View > Show Backdrop.

fake backdrop viewed from the editor




More Skybox methods and ideas

Skyboxes aren't limited to flat textures. You can use anything that you'd use in the rest of the map - static meshes, emitters, shaders, movers, terrain... use your imagination!

Layers of clouds
cloud layers 1 cloud layers 2
This skybox (from ONS-Dria) uses two layers of panning cloud texture (a sheet and a static mesh) and a fog ring. Lights are used to give the clouds their colour. You can add other meshes or sheets in the distance above the clouds to add planets or stars.

Fog Rings
If you use a skybox on a map that uses zone fog, for example a large outdoor/onslaught map, you might notice some strange effects occuring in the distance:

BR-TwinTombs without fog ring
BR-TwinTombs without fog ring.

Because zone fog only works on the sone you're in, it has no affect on the skybox. Zone fog also stops the rendering of anything behind it at the point where it's completely opaque. Once a mesh goes behind the opaque fog it "pops" - it's no longer rendered so it just disappears. The mesh will also fade into the colour of the fog while the skybox doesn't. You can stop these horrible effects by using a "fog ring" - a rounded static mesh in the skybox which is the same colour as the fog in the map.

BR-TwinTombs with fog ring
BR-TwinTombs with fog ring.

You can use a fog ring from an existing map or use your own by making a texture the same colour as the fog, and add a transparent gradient using an alpha map.

fog ring

Stop projectiles from hitting the sky
So you shoot a rocket into space, just to see how far it goes. After a few metres it explodes in mid-air for no apparent reason...
The walls where you applied the fake backdrop will act like any other walls unless you use a limitation volume. You can prevent projectiles and/or the translocator disc from travelling through this volume.

  1. Make a cube builder brush that covers the fake backdrop wall
  2. Right-click the volume icon and click LimitationVolume
  3. Go to volume properties and open the Limits tab
  4. Here you can limit projectiles, the translocator disk or a specific class

Anything you shoot at the sky now should just disappear when it hits the LimitationVolume! You can also use it to prevent people from translocating to certain points instead of using a blocking volume. There is a problem where LimitationVolumes don't work online. I've added some short instructions on how to make a custom online LimitationVolume here.



Lighting

You can use ordinary lights to light clouds/other parts of the skybox. If you use a set of 6 textures or a solid background colour, set the textures to unlit to make it look seamless.

Sunlight Actors
Sunlight actors are a directional light which is applied to the whole map. They are very effective at creating realistic daylight and shadow effects. To place a Sunlight actor, click Actors > Light > Sunlight in the actor browser. You can either add it inside the skybox or within the main map area. I would recommend adding it to the skybox, as you can align it with the sun and find it a lot more easily. You can add multiple sunlight actors to a map for light coming from different directions.

How to solve the corona problem
Ordinary coronas don't show up in the skybox when viewed from the main level. There's a simple way around this using an emitter.

  1. Put a new sprite emitter where you want the corona
  2. Open the emitter properties and change the following:
  3. Set Texture > Texture to the corona texture
  4. Set General > MaxParticles to 1
  5. Set Time > LifetimeRange (Min and Max) to 0.5 (This is to prevent there being a delay in the flare appearing when you look at it in-game. You can set LifetimeRange to lower values)


Special effects with emitters

Here are some example settings for emitter effects to go in the skybox. Add a new sprite emitter and change these properties:

Meteor Shower
  • Acceleration
    • Y = -100
  • Color
    • ColourScale
      • [0]: R=179 G=179 B=255, RelativeTime=0
      • [1]: R=179 G=179 B=255, RelativeTime=1
    • UseColorScale = True
  • Fading
    • FadeIn = True
    • FadeInEndTime = 1
    • FadeOut = True
    • FadeStartTime = 1
  • General
    • MaxParticles = 5 (or more)
  • Size
    • StartSizeRange
      • X: Min=40 Max=40
      • Y: Min=2 Max=2
      • Z: Min=2 Max=2
    • UniformSize = False
  • Sprite
    • UseDirectionAs = PTDU_RightAndNormal
  • Texture
    • Texture = Texture'EpicParticles.Beams.WhiteStreak01aw'
  • Time
    • LifeTimeRange: Min=2.5 Max=1.0
  • Velocity
    • StartVelocityRange
      • X: Min=500 Max=500
      • Y: Min=600 Max=600
      • Z: Min=-150 Max=-150
Clouds / Mist
  • Fading
    • FadeIn = True
    • FadeInEndTime = 2
    • FadeOut = True
    • FadeStartTime = 2
  • General
    • MaxParticles = 15
  • Rotation
    • SpinParticles = true
    • SpinsPerSecondRange
      • X: Min=0 Max=0.05
      • Y: Min=0 Max=0
      • Z: Min=0 Max=0
  • Size
    • StartSizeRange
      • X: Min=200 Max=200
      • Y: Min=200 Max=200
      • Z: Min=200 Max=200
  • Texture
    • DrawStyle = PTDS_AlphaBlend
    • Texture = Texture'AWGlobal.Particles.Steam01aw'
  • Time
    • LifetimeRange: Min=8 Max=10
  • Velocity
    • StartVelocityRange
      • X: Min=-50 Max=50
      • Y: Min=-50 Max=50
      • Z: Min=0 Max=0


Static mesh and texture reference (UT2004)

AnubisSky.utx - Skybox with purple nebula.
Aurorae.utx - Animating aurorae effects.
AWGlobal.utx - Clouds (in group "skies").
cf_tex01.utx - Planet textures (used on existing static meshes).
cf1.utx - Rainbow texture.
Skies.utx - Moon and animated cloud textures.
skyline-epic - Some clouds and fog rings.
SkyRenders.utx - Loads of panoramic skyboxes, clouds, and suns.
XceptOne.utx - Planets.

AntalusStatic.usx - sky ring with blue sky and fields.
AS_Weapons_SM.usx - city in a dome (used in AS-RobotFactory).
AW-Bridge.usx - Untextured sky rings.
AW-RustMeshes.usx - Junkyard sky ring and corona mesh.
AWStellarMeshes.usx - Moon static mesh and star background sphere.
AW-Tech.usx - Untextured sky rings and sphere.
BarrenHardware-epic.usx - Light-coloured fog ring.
BenTropicalSM01.usx - Blue sky dome with grey/white/orange clouds.
cf_sm01.usx - Planets, rings, atmousphere, asteroids.
Desp-SMS-SM.usx - Atmousphere dome with white clouds.
forest.usx - Line of trees
X_AW-Bridge - Textured sky rings
X_AW-Natural - Textured sky dome and ring
X_AW-Tech - Textured sky rings
cp-Evilsky1 - Grey sky ring
X_SC_CityPrefabs - Blue sky rings



Links

Terragen Tutorial

UnrealWiki: Building a Skybox
UnrealWiki: Terragen
UnrealWiki: Rotating Skybox
Outpt.co.uk tutorial

German translation of this tutorial