This tutorial shows how to create an animated map preview as you may know from UT2004.
I assume that you know about the general way of working with Unreal Editor 4, as I will not cover any basics in this tutorial.
An example map and various offline versions of this tutorial are available (see bottom of this post).
What we are going to do in a few words: we will create a material consisting of a combination of LinearInterpolates
("Lerps"), and then we will instance that material using a MaterialInstance TimeVarying
so we can change the Lerps alpha values over time which will result in the material instance showing different textures at different points in time.
Here we go...Creating the Base Material
For this example, we want the map preview material to display three different textures (usually screenshots of our map), one after another. At this point, textures from retail packages will be used, they are:
We create a new material ("MAT_MapPreview"
) which will later serve as the base for the material instance. Inside of the Material Editor, two properties of the material are to be changed: setting the LightingModel
will make the material look constantly bright as it won't be affected by light sources any longer; at the same time, the material should be "emissive" (see Figure 1
). Also, the BlendMode
should be set to BLEND_Translucent
as transparencies come into play when interpolating from one texture to the next.Creating the "Lerp chain"
As said, the base material consists of a combination of Lerp
s; more precisely, the Lerps are building a "chain" as they are connected in series (see Figure 1
), while the output of one Lerp serves as input "B" of the next Lerp. For each Lerp, input "A" is a texture (see Figure 1
, TextureSamples TextureA
). Only the last Lerp (LerpCA
) has a texture connected to input "B", too, which is the very same texture that the first Lerp (LerpAB
) has connected to its input "A": TextureA
. This is important for the animations seamless repeat.
But first of all, a few words on how a Lerp is operating: a Lerps output is a mixture of its inputs "A" and "B". How this mixture looks depends on the value of the Lerps "Alpha", which affects the transparency of both input "A" and "B" at the same time. Suggestive values for the "Alpha" input are in the range between 0 and 1, actually. With an increasing alpha value, the transparency of input "A" increases and the transparency of input "B" decreases; for each in equal parts.
The Lerps alpha input values are supposed to change inside of the material instance to be created. For this, they are provided by ScalarParameters
(see Figure 1
). This is important, as only parameterized expressions
(i.e. all those expressions whose name ends in "Parameter") can be altered inside of material instances. Parameter expressions should have a unique ParameterName
assigned, so they can be easily distinguished from each other.Figure 1: Setup of the base material. Each Lerps (LerpAB, LerpBC, LerpCA) output depends on the corresponding alpha input value (AlphaAB, AlphaBC, AlphaCA). Each alpha value is initially set to zero and is parameterized (as ScalarParameter), so their values can be altered using a material instance. The textures supposed to be displayed sequentially are provided by the TextureSamples TextureA, TextureB and TextureC. Unused expression connectors are hidden.
Inside of the base material, any Lerps alpha input has an initial value of zero; so, each Lerp just outputs its input "A". Therefore, the base material is quite useless on its own, as it does not do anything but showing TextureA
all the time. But, by altering the alpha values of the individual Lerps, it is possible to run through the "Lerp chain" until its end and display every single texture (TextureA
). Exactly this variation of the alpha values happens inside of the material instance.Creating the Material InstanceMaterial Instances in general
A material instance allows to modify an existing material to a certain extent without recreating the whole material setup with all its expressions. So, for a material instance there is an underlying base material (see Figure 2
) to which the material instance is identical at first. But some of the instances properties (or expressions) can be altered, those are the already mentioned parameterized expressions.
There are two types of material instances: a "M
onstant" (MIC) allows a one-time alteration of parameters, whilst inside of a "M
arying" (MITV), parameters can be assigned different values at different points in time.
So, for the animated map preview we need a MITV, as the Lerp alpha input values must vary over time in order to get the three textures displayed consecutively.
We create a MITV ("MITV_MapPreview"
) of our base material, namely via the Generic Browsers context menu: right-click the base material and select "Create New Material Instance Time Varying". Doing so has the advantage, that the base material is automatically set as the instances Parent
(see Figure 2
). Furthermore, inside of the Material Instance Editor, all the parameter expressions of the base material are automatically added into the corresponding array (see Figure 2
array) and their ParameterName
is also set. The order of the parameters inside of the array does not matter, but to keeps things clear, they should be ordered as they are going to be altered over time, in this case AlphaAB
.Setting up the ScalarParameters inside of the MITVParameterName
determines the ScalarParameter to be processed. Here, we deal with the three parameters AlphaAB
must be checked, otherwise the values assigned inside of the base material will be used instead of those assigned inside of the material instance.
Also, we want the parameter values to have an effect right away without any triggering or other special kind of activation, so we check bAutoActivate
, too.Assigning parameter values inside of the MITV
There are two ways to assign parameter values inside of the MITV. For one thing by using the ParameterValue
property (see Figure 2
), but that way the parameter would have a constant value in time, thus the MITV would not differ from a MIC. If we use the ParameterValueCurve
instead, we can assign values dependent on time: the Points
array fields describe the ParameterValueCurve
resp. they are points on that curve. (Note that the ParameterValueCurve
is preferentially used: if its Points array contains one or more fields, any value set in ParameterValue
will be ignored.) InVal
is the point in time in seconds when the parameter is assigned the value given by OutVal
. Between the OutVal
values of two points chronologically following each other there will be interpolated, in this case it will be a linear interpolation (InterpMode
). (The properties ArriveTangent
do not play a role for the linear interpolation, so we do not take care of them here.)
We need to think about how long we want each texture to be displayed. Of course, every texture can be displayed for a different amount of time, but for this example four seconds for each of the textures should be enough and the interpolation to the next texture should last one second each. This sums up to an overall sequence duration of 15 seconds which we set for each ScalarParameter under CycleTime
. When the sequences end is reached, it should repeat from the beginning for each parameter, so we check bLoop
.Figure 2: Properties and final setup of the MITV. Each Lerps alpha input value is altered explicitly at two different points in time given in the Points array; at time zero, they all are automatically set back to the value they initially have inside of the base material (zero in this case). (Colors as in Figure 1.)Analysis of the MITV
For a better understanding, let's take a closer look at what actually happens at particular points in time during the animation sequence (see Figure 2
and Figure 3
).Figure 3: Alteration of the alpha input values over time. At an alpha value of 0 (1), a Lerps output equals its input "A" ("B"). A triangle (square) marks Points (Points) in the corresponding ParameterValueCurve. (Colors as in Figure 1.)
By time zero (zero seconds) all the Lerps alpha inputs (AlphaAB
) are assigned the value they have in the base material, which is 0 (zero) in this case. So, each Lerp outputs its input "A", thus the material instance displays TextureA
After 4 seconds (AlphaAB
) the value of AlphaAB
starts to increase until it reaches a value of 1 (AlphaAB
) after another second (at the time of 5 seconds: AlphaAB
). So, at that time LerpAB
now out outputs its input "B", namely the output of LerpBC
whose alpha value (AlphaBC
) is still zero at that time. Therefore, LerpBC
outputs its input "A" and the material instance now displays TextureB
. In the further, the value of AlphaAB
stays constant until the sequences end, so from now on LerpAB
always outputs its input "B".
After 9 seconds (AlphaBC
) the value of AlphaBC
starts to increase. After 10 seconds (AlphaBC
) it has reached a value of 1 (AlphaBC
), so LerpBC
now outputs its input "B". Thus the material instance displays TextureC
. (Until the end of the sequence AlphaBC
stays constantly 1 as well.)
After 14 seconds (AlphaCA
) the value of AlphaCA
finally starts to increase, so, at the time of 15 seconds, again TextureA
is displayed. Right at that time (15 seconds), the sequence is finished and starts over again from the beginning. Due to input "B" of the last Lerp in the chain (LerpCA
) is equal to the first Lerps (LerpAB
) input "A", the whole sequence repeats seamlessly.Setting up the Map INI File
In the corresponding map ini file, the newly created MITV ("MITV_MapPreview"
) is to be set as the PreviewImageMarkup
. Here is the ini file for the example map:; DM-AnimMapPreview.ini
PreviewImageMarkup="<IMAGES:DM-AnimMapPreview.MITV_MapPreview>"...and that's it!
Now, for our map we can see an animated preview in the map selection screen.Figure 4: Animated map preview inside of UT3. (animated GIF file, frames thinned.)Acknowledgements
Thank you, Murphy
, for the possibility to publish this tutorial here.
Thank you, Yuloc
, for testing.Links
The following links may be interesting:
- Mahajan, Material Instance Editor User Guide
- Sherman/Burke/Mahajan, Instanced Materials
- Burke, Material Editor User Guide
You will need an unpacker able to handle 7-zip
files in order to unpack the archives attached.
- Example map and ini file
DM-AnimMapPreview.7z (5,292 bytes)
- offline version of this tutorial: English, HTML (example map included)
ut3tut_AnimMapPrev_en_html.7z (61,782 bytes)
- offline version of this tutorial: English, PDF (example map included inside the PDF document, all in one file)
ut3tut_AnimMapPrev_en_pdf.7z (172,682 bytes)
- offline version of this tutorial: German, HTML (example map included)
This is the original version of this tutorial. It is a little more comprehensive.
ut3tut_AnimMapPrev_de_html.7z (72,159 bytes)