Following the previous experiments, this time we're creating fake scanlines using the Screen Position node. Scanlines can be built by dividing the screen vertically into alternating dark and light bands.
We start by getting the vertical screen coordinate. The Screen Position node's ViewportUV output is masked to extract only the Y component, which represents our position from top to bottom of the screen.
The Y value is multiplied by a ScanlineCount parameter. This scales the 0-1 range up to match the scanline count, creating distinct bands across the screen height. For example, multiplying by 360 creates 360 separate bands. The value should ideally match a factor of your screen's vertical resolution to avoid visual banding artifacts. 360 divides evenly into 1440 (4 pixels per band), ensuring clean alignment on 1440p displays.
We then apply Frac to this result. Frac resets to 0 at every whole number, which means our 0-360 range becomes a 0-1 pattern that repeats 360 times. Each repetition represents one scanline band.
Next, the Frac output is multiplied by a factor of 2. This expands the 0-1 range to 0-2, which is necessary for the next step to create alternating values.
We then add a Floor node to strip away the decimal portion. Since our values now range from 0-2, the first half of each band (0 to 1) floors down to 0, while the second half (1 to 2) floors down to 1. This creates a clean alternating pattern of 0 and 1 across every scanline band.
The alternating band pattern is multiplied by a DarknessAmount parameter. The bands with a value of 1 become whatever darkness value we set, while the bands with 0 stay at 0, creating the bright rows between dark scanlines.
Finally, we connect this mask to both Emissive Color and Opacity Override. The material domain is set to User Interface with blend mode set to AlphaComposite (Premultiplied Alpha).
The material is then assigned to an image widget that fills the entire screen. The result is a scanline overlay that darkens alternating horizontal bands across the viewport, as shown in the screenshot below.
When testing, make sure to switch to fullscreen mode in standalone play. The scanlines need to align with actual screen pixels, as mismatched resolution can produce visual banding artifacts.
The project files are available on Github: https://github.com/RohitKotiveetil/UnrealEngine--ScreenPositionExperiments
Comments
Post a Comment