Creating an Animated Map Preview for a UT3 map

Hello, everybody.

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:

1. Texture2D'UI_FrontEnd_Art.GameTypes.CaptureTheFlag'
2. Texture2D'UI_FrontEnd_Art.GameTypes.Deathmatch'
3. Texture2D'UI_FrontEnd_Art.GameTypes.Duel'

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 to MLM_Unlit 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 Lerps; more precisely, the Lerps are building a "chain" as they are connected in series (see Figure 1, LerpAB, LerpBC, LerpCA), 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, TextureB, TextureC). 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, AlphaAB, AlphaBC, AlphaCA). 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, TextureB, TextureC). Exactly this variation of the alpha values happens inside of the material instance.


Creating the Material Instance
Material 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, Parent) 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 "MaterialInstance Constant" (MIC) allows a one-time alteration of parameters, whilst inside of a "MaterialInstance TimeVarying" (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, ScalarParameterValues 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/AlphaBC/AlphaCA.

Setting up the ScalarParameters inside of the MITV
ParameterName determines the ScalarParameter to be processed. Here, we deal with the three parameters AlphaAB, AlphaBC and AlphaCA.
bOverride 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 = CIM_Linear). (The properties ArriveTangent and LeaveTangent 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[0] (Points[1]) in the corresponding ParameterValueCurve. (Colors as in Figure 1.)

By time zero (zero seconds) all the Lerps alpha inputs (AlphaAB, AlphaBC, AlphaCA) 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: Points[0].InVal) the value of AlphaAB starts to increase until it reaches a value of 1 (AlphaAB: Points[1].OutVal) after another second (at the time of 5 seconds: AlphaAB: Points[1].InVal). 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: Points[0].InVal) the value of AlphaBC starts to increase. After 10 seconds (AlphaBC: Points[1].InVal) it has reached a value of 1 (AlphaBC: Points[1].OutVal), 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: Points[0].InVal) 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
[DM-AnimMapPreview UTUIDataProvider_MapInfo]
MapName="DM-AnimMapPreview"
FriendlyName="AnimMapPreview"
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:

1. Mahajan, Material Instance Editor User Guide
2. Sherman/Burke/Mahajan, Instanced Materials
3. Burke, Material Editor User Guide

Attachments
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)

Thaks for the tutorial.
Looks like the links are dead though.

I wrote him about it. I hope it helped you anyway.