UE4 Fog Sheet and Light Beams

左手的ㄟ右手 2022-08-17 14:26 24阅读 0赞

# Fog Sheet and Light Beams #

[Unreal Engine 4.9][]

[Blueprints][]

![FogSheetLightBeams.png][]

The Fog Sheet and Light Ray Blueprints serve as an example of using Blueprints to create atmospheric effects for use in level design. Arranging translucent Static Meshes such as planes of fog and beams of light when decorating a level tends to be time-consuming, and so the purpose of these blueprints is to make the process easier while giving the user more control over the appearance of these meshes.

Relatively simple in setup, these assets still provide a wide range of customizability, including color, brightness, and size. Artists also have control over the panning speed of the fog texture, and the range at which the fog will fade out, which prevents players from noticing the sheet effect.

## Fog Sheet ##

![FogSheet.png][] ![FogSheetDetails.png][]

The Fog Sheet Blueprint, shown above, consists of a Static Mesh plane with a cloudy fog Material applied to it. If you open the network in the Blueprint Editor, you will see that most of the setup is done in the Construction Script.

[![FogSheetCS.png][]][FogSheetCS.png 1]

Each of the three aspects of the Blueprint (i.e. the *Components List*, the *Construction Script*, and the *Event Graph*) are responsible for a different part of the overall effect. The following table breaks down the jobs for each aspect and how they work together to create the final result.

### Blueprint Setup ###

Of particular importance in this effect is the creation of the [Material Instance Dynamic][] (MID for short) in the Construction Script. A MID is parameterized Material that is set up in such a way that it can be edited during gameplay.

![MIDNodeNetwork.png][]

### Editable Variables ###

The exposed (**Editable**) variables give designers control over the following properties of the Material:

![BPVariables\_FogSheet.png][BPVariables_FogSheet.png] ![MaterialProperties\_FogSheet.png][MaterialProperties_FogSheet.png]

<table style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(160,160,160); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(160,160,160); border-spacing:0px; width:930px; margin:1.5em 0em; font-size:0.925em; color:rgb(22,22,23); font-family:Helvetica,Verdana,Arial,sans-serif; line-height:26.25px; background-color:transparent">      
 <thead> 
  <tr> 
   <th colspan="1" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); color:rgb(0,0,0); padding:0.25em 2.5em 0.25em 0.5em; vertical-align:top; background-color:rgb(224,224,224)"> Property</th> 
   <th colspan="1" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); color:rgb(0,0,0); padding:0.25em 2.5em 0.25em 0.5em; vertical-align:top; background-color:rgb(224,224,224)"> Purpose</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td colspan="2" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> 
    <div style="margin:-0.25em -2.5em -0.25em -0.5em; padding:0.25em 2.5em 0.25em 0.5em; font-weight:bold; background:rgb(244,244,244)"> 
     <p style="font-size:1em; margin-top:0px; margin-bottom:0px">Materials</p> 
    </div> </td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Color</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> The color of the fog effect.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Brightness</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> Brightness applied to the fog color.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Opacity</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> How well the fog can be seen through.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Depth Fade Distance</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> Controls the distance away from intersecting geometry that the effect will fade. This prevents harsh cuts along walls and other surfaces.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Noise Projection Distance</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> Provides a depth offset for fog noise.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Noise Size</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> This is similar to tiling - the higher the value, the fewer tiles of the noise texture.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Panning Speed</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> How quickly the noise texture pans across the fog surface.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Fade Distance</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> The distance between the player and the effect at which the fog fades as the player approaches. This prevents the player from noticing the sheet geometry.</td> 
  </tr> 
  <tr> 
   <td colspan="2" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> 
    <div style="margin:-0.25em -2.5em -0.25em -0.5em; padding:0.25em 2.5em 0.25em 0.5em; font-weight:bold; background:rgb(244,244,244)"> 
     <p style="font-size:1em; margin-top:0px; margin-bottom:0px">BP Fog Sheet</p> 
    </div> </td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:0px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Size</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:0px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> This controls the size of the sheet mesh used to display the fog sheet.</td> 
  </tr> 
 </tbody> 
</table>

The *Size* variable is particularly interesting in that it has had its 3D Widget enabled. The 3D Widget is a feature available only to vector variables, and creates a visible object in the Viewport that can be manipulated to change the 3D vector value.

![3DWidget.png][]

Since a 3D Widget is simply a mechanism for controlling a Blueprint variable, the widget is only visible when it is associated Blueprint is selected. The widget can then be selected and moved using the standard Move tool. This provides a designer with a quick way of changing a vector value.

In this case, the 3D Widget is employed to allow for quick resizing of the fog sheet geometry plane. The upper right corner of the mesh meets the location of the 3D Widget, and the sheet as a whole scales from the center, where the Blueprint's sprite icon is located.

## Light Beam ##

![LightRayBp.png][]

The Light Beam Blueprint is very similar in nature to the Fog Sheet, except that it is set up so that it can follow the rotation of a given light source and uses a slightly different Material setup. It also has no Event Graph, as all of its calculation takes place in the Construction Script.

### Blueprint Setup ###

The Components List, Construction Script, and Event graph for this Blueprint perform the following tasks:

### Editable Variables ###

Since this Blueprint is primarily a level design tool, most of its functionality takes place within the Construction Script. Below are the exposed variables that drive the behavior within the Construction Script:

![LightRay\_Variables.png][LightRay_Variables.png] ![LightRay\_Properties.png][LightRay_Properties.png]

<table style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(160,160,160); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(160,160,160); border-spacing:0px; width:930px; margin:1.5em 0em; font-size:0.925em; color:rgb(22,22,23); font-family:Helvetica,Verdana,Arial,sans-serif; line-height:26.25px; background-color:transparent">      
 <thead> 
  <tr> 
   <th colspan="1" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); color:rgb(0,0,0); padding:0.25em 2.5em 0.25em 0.5em; vertical-align:top; background-color:rgb(224,224,224)"> Property</th> 
   <th colspan="1" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); color:rgb(0,0,0); padding:0.25em 2.5em 0.25em 0.5em; vertical-align:top; background-color:rgb(224,224,224)"> Purpose</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td colspan="2" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> 
    <div style="margin:-0.25em -2.5em -0.25em -0.5em; padding:0.25em 2.5em 0.25em 0.5em; font-weight:bold; background:rgb(244,244,244)"> 
     <p style="font-size:1em; margin-top:0px; margin-bottom:0px">Light Beam</p> 
    </div> </td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Light</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> This gets populated with the light source that you want the light beams to follow.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Width</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> Controls the width of the light beam sheet.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Length</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> Controls the length of the light beam sheet.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Color</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> Controls the color of the light beam.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Brightness</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> A brightness factor that is applied to the light beam color.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Fade Distance</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> The distance between the player and the effect at which the light beam fades as the player approaches. This prevents the player from noticing the sheet geometry.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Animated</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> Whether the light beam material is animated; this provides the shimmering effect within the beam.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Spot Light</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> If unchecked (<em>false</em>), the sheet uses a parallel shape for a Directional Light. If checked (<em>true</em>), it uses a cone shape for a Spot Light.</td> 
  </tr> 
  <tr> 
   <td colspan="1" align="" style="border-bottom-width:0px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> <strong>Use Light For Rotation</strong></td> 
   <td colspan="1" align="" style="border-bottom-width:0px; border-bottom-style:solid; border-bottom-color:rgb(216,216,216); vertical-align:top; padding:0.25em 2.5em 0.25em 0.5em"> Whether the light follows the rotation of the Light Actor specified in the&nbsp;<em>Light</em>&nbsp;property, or if it can be rotated independently.</td> 
  </tr> 
 </tbody> 
</table>

![related_icon.png][]