Unreal 5.8 - Materials Masterclass - Chapter 8: Time, animation and Video (Part 1)

Main ideas & lessons (Animated Materials, Part 1)

• “Animation in materials” can mean multiple things

  • Earlier techniques in the course: Panner and time-based math nodes (e.g., Time, Sin) to smoothly animate values and move UVs.
  • “Literal” animation approaches:
    • Video files playing inside materials (e.g., on TV screens).
    • Sprite sheets / flipbooks (2D frame animations).
    • Procedural transitions (covered more in Part 2: gradients/masks controlling animation).

• This lesson is split into two parts

  • Part 1 (this video): focuses on literal stop-motion/video playback and sprite sheets.
  • Part 2 (next video): focuses on procedural animation using gradients and masks.

---

Methodology / Instruction steps (detailed)

A) Play video files inside Unreal materials (MP4 → Media Player → Media Texture → Material)

• Add/import video content

  • Drag an MP4 onto a mesh, or import via the Content Browser.
  • If you import an MP4, Unreal creates a File Media Source asset.
  • Check for a warning: Unreal may not package the video if its path is outside the project’s content folders.
  • Fix packaging path expectation:
    • Ensure the file is placed under Content/Movies.
    • Create Content/Movies if needed.
    • Use Show in Explorer, then drag the video file into that folder.

• Create a Media Player

  • In the Content Browser: right-click → Media → Media Player.
  • Unreal may prompt to create/link a Media Texture automatically—generally enable this.

• Use the Media Player

  • Open the Media Player asset.
  • Use playback controls such as:
    • Play on Open
    • Shuffle
    • Loop (enable for endlessly playing TVs)

• Media Texture setup

  • Note: it may initially appear tiny (e.g., 2×2 pixels) until the first frame loads.
  • Video decoding fills the texture and it resizes dynamically.
  • Adjust texture settings such as:
    • Filtering (example: set to Nearest for pixel/retro style)
    • Wipe color (color shown when muted)

• Create the material for the TV

  • Create a material (example: TV screen).
  • Set Shading Model: Unlit.
  • Use a Texture Sample Parameter (e.g., Media Texture) and assign the media resource.
  • Connect the texture RGB to Emissive Color.
  • Apply and view on a plane/mesh.
  • Playback note:
    • In-editor preview will show the animation when the Media Player plays.
    • Sound comes from the Media Player, not necessarily from the mesh in-world (fix later via spatialized audio approach).

---

B) Add retro CRT scanlines on top of a video (procedural overlay)

• Goal: produce horizontal “scanline stripes” that are controllable in density and brightness.

• Graph concepts used:

  • Texture Coordinates → Component Mask (isolate one channel; effectively creates a gradient)
  • Gradient math → Sine → Lerp mask
  • Promote values to parameters for tweakability

• Steps

  • Add Texture Coordinate node.
  • Add Component Mask to isolate the relevant coordinate component (creates a usable gradient).
  • Multiply the gradient as needed to shape repetition.
  • Shortcut: right-click input pin → Promote to Parameter (e.g., Scan Line Count).
    • Example: set to 100.
  • Pass through Sine to generate alternating black/white stripes.
  • Use Lerp:
    • Connect Sine output into Lerp’s Alpha
    • A = parameter Scan Line Brightness
    • B = 1.0
    • Set A to something like 0.75 to make lines subtle
  • Multiply the resulting scanline mask with the video output and feed into the material’s emission path.

• CRT “glass/phosphor” look using shading model

  • Change shading model from Unlit to Clear Coat to simulate CRT layers:
    • Keep video connected to Emissive Color
    • Set Roughness = 1 (matte video surface)
    • Set Clear Coat / transparency layer roughness = 0 for a glossy top layer effect
  • Result: reflections + video + scanlines.

---

C) Mosaic / flipbook-style grid slicing across multiple TVs (UV slicing with index + toggle)

• Goal: one material can display different parts of a video on different meshes using a tile index, and optionally form a mosaic.

• Parameters introduced

  • Columns
  • Rows
  • Index
  • A boolean toggle parameter: mosaic
    • Enables UV slicing or uses normal UVs

• Core UV math

  • Scale UVs down by dividing by (Columns, Rows):
    • Use Make Vector2 / Append Vector to build (Columns, Rows)
    • Divide standard UVs by that vector
  • Compute X offset (horizontal tile position):
    • Use Fmod(index, columns)
      • Repeating remainder pattern: for columns=2 → 0,1,0,1,…
  • Compute Y offset (vertical tile position):
    • Divide index / columns, then apply Floor
      • Repeating row pattern (example given results like 0,0,1,1,…)
  • Combine offsets
    • Use Append Vector to combine X and Y results
    • Scale the offset back to match the earlier UV scaling (divide by the same (Columns,Rows) vector)
  • Add offset to the scaled UVs, then connect to the media texture UV input.

• Use cases

  • Instantiate the material multiple times (or use material instances) with Index = 0..(Columns*Rows-1).
  • Optionally transition to the next lesson concept:
    • Apply similar tiling logic to a texture containing frames (sprite sheet).

---

D) Classic flipbook animation from a sprite sheet (SubUV node + Time → frame index)

• Goal: animate a sprite sheet texture with timed frame stepping.

• Material setup

  • Create a new material (example: flipbook fire).
  • Set Shading Model: Unlit.
  • Set Blend Mode: Masked (performance benefit over translucent for pixel art).

• Use SubUV functionality

  • Use SubUV node instead of manually coding UV slicing.
  • Key inputs conceptually:
    • Texture object (sprite sheet)
    • UV coordinates
    • Sub Images = (columns, rows)
    • Frame = scalar frame index

• Steps

  • Define XY dimension vector parameter:
    • Example: frames 8 across and 1 down → (8,1)
  • Create frame timing
    • Add Time node
    • Multiply Time by frames per second parameter (example: fps = 8)
  • Ensure discrete frame stepping:
    • After multiplication, Floor to get frame indices 0,1,2,…
  • Provide the sprite sheet via Texture Object Parameter
    • Preview won’t show pixels (expected because Texture Object is just a reference).
  • Connect outputs:
    • Sprite frame RGB → Emissive Color
    • Sprite frame Alpha → Opacity Mask

• Optional brightness control

  • Multiply emission by an Emission Gain parameter (example: 5–10).

• Important limitation acknowledged

  • A flat plane flipbook can look wrong from the side (illusion breaks).
  • The next topic after this would be camera-facing tricks.

---

E) Make a sprite (flipbook plane) face the camera using Blueprint logic

• Goal: keep the sprite visually facing the player so it doesn’t look flat/incorrect when the camera rotates.

• Concept

  • Every Tick, compute a “look at” rotation toward the camera, then apply it.

• Steps (logic outline)

  • Use Find Look at Rotation
    • Start = world location of the flame object/component
    • Target = camera world location
      • Get camera via Get Player Camera Manager → Get Camera Location
  • Only use the Z component of the rotation (example given; also a 90-degree adjustment due to drawing orientation).
  • Keep X/Y (roll/pitch) from the current flame component rotation:
    • Get current rotation → split into components
    • Combine old X/Y with new Z
  • Apply result with Set World Rotation to the flame component.

• Behavior notes

  • When the camera moves, lights/rotation follow.
  • Jumping may reduce the effect; noted as a known limitation.

---

F) Start media playback in-world without manually opening the Media Player window (Level setup)

• Goal: ensure TVs/video panels start automatically when the level begins (or via triggers).

• Example workflow

  • In the level blueprint/editor:
    • Create Media Player variables (e.g., MediaPlayer1 and MediaPlayer2)
  • Set them to Play on Open.
  • For each media player:
    • Open Source and select the desired video file.

• Alternative trigger approach

  • When the player enters a trigger volume, call play for that panel/video.

---

G) Spatialize media audio and make it fade with distance (Speaker Blueprint concept)

• Goal: sound should get louder when near and quieter when far, with stereo/panning and filtering effects.

• Component approach

  • Use a simple in-world “speaker” actor/blueprint containing a Media Sound component.
  • Assign the Media Player as the audio source.

• Distance behavior

  • Modify/redefine attenuation (no separate attenuation asset required).
  • Enable multiple attenuation aspects:
    • Volume reduction over distance
    • Binaural-style left/right panning
    • Air absorption (higher frequencies absorbed faster)
  • Use example values like:
    • Falloff distance
    • Radius (example: 400)—emphasizes experimentation

• Advanced note

  • Multiple speaker objects can be arranged for richer multi-channel setups (Dolby Atmos-like concept mentioned, e.g., 11-channel output).

---

H) Project media using a Light Function material (movie projector effect)

• Goal: project the media texture like real light, enabling interactions such as shadows and volumetric light beams.

• Scene effect

  • Uses a spotlight with a light function material.
  • Adds volumetric exponential fog to create colored volumetric light rays matching the projection.

• Material creation steps for the projector

  • Create a material with Material Domain = Light Function.
  • When switching domain:
    • Most pins become inactive except Emissive Color.
  • Connect the media texture (or sampled output) to Emissive Color.

• Critical alignment issue (ellipse/circle vs square texture)

  • The spotlight cone intersects a surface as a circle/ellipse, so a square texture’s corners get clipped.
  • Fix: UV scaling + centering + masking

• UV scaling and centering

  • Start with Texture Coordinates
  • Multiply by a scale factor (parameterized; described as using “one minus” to match expected direction)
  • Subtract half the scaling factor as an offset so the image stays centered when scaled

• Masking to remove “stretched edge pixels”

  • Use knowledge about out-of-range UV coordinates:
    • Some UVs < 0 (outside)
    • Some UVs > 1 (outside)
  • Compute masks using step functions:
    • Build one mask via min(X,Y) compared to 0
    • Build another via max(X,Y) compared to 1
  • Multiply the masks together to keep only the valid projection region.

• Finalize

  • Multiply the RGB by the mask.
  • Plug masked RGB into Emissive Color so the projected output looks correctly bounded (e.g., square appearance within the cone intersection).

---

Troubleshooting / Notes included (Light Function video color & resolution)

• Problem: video appears in grayscale

  • Cause: Unreal stores light function data using an atlas, default often 8-bit grayscale.
  • Fix:
    • Project Settings → search atlas
    • Change Light function atlas format from grayscale to 8-bit RGB to enable full color video.

• Problem: low resolution / noisy or grainy fog rays

  • Use console commands (tilde key opens console; can also be set via settings.ini):
    • Increase light function atlas slot resolution
      • r.lightfunctionatlas.slotresolution (e.g., increase up to 1K)
    • Increase volumetric fog resolution
      • r.volumetricfog.gridpixelsize (reduce value; default around 8; author suggests 4, or 2/1 in extreme cases)
  • Warning: higher resolution plus lower grid pixel size can cause very high memory usage.

---

Speakers / sources featured

• Enrique (presenter/author of the tutorial; closing sign-off: “I’m Enrique. Thank you very much for watching.”)