Next up in the screen space experiments, we're creating a cinematic letterbox overlay using the Screen Position node through a UI material. To achieve this, the Screen Position's Y channel can be used to create masks for black bars at the top and bottom of the screen.
We start by setting the material domain to User Interface and blend mode to Masked. A scalar parameter called BandSize is set up to control the thickness of the letterbox bars.
The Screen Position node provides the viewport UV coordinates. We use a Component Mask set to G to extract only the Y channel, which represents the vertical position from top to bottom of the screen.
For the top band, we add a Step node: BandSize connects to the X input, and the Y channel connects to the Y input. The Step returns 1 where the Y position is less than or equal to BandSize, creating a mask for the top portion of the screen.
For the bottom band, we need to invert the threshold value by passing the BandSize through a OneMinus node. A second Step node has the Y channel connected to X and the OneMinus output connected to Y. This returns 1 where the Y position is greater than or equal to (1 - BandSize), creating a mask for the bottom portion of the screen.
Both Step outputs are added together to combine the top and bottom masks. The result is then passed through a Clamp node to restrict them to 0-1 range.
Finally, we connect a black Color (0,0,0) to the material's Final Color, and the clamped mask to its Opacity Mask. This creates solid black bars at the top and bottom, with the center remaining transparent.
The material is then assigned to an image widget that fills the entire screen. The result is a cinematic letterbox overlay with adjustable bar thickness through the BandSize parameter, as shown in the screenshot below.
The project files for this and other Screen Position experiments are available on Github: https://github.com/RohitKotiveetil/UnrealEngine--ScreenPositionExperiments
Comments
Post a Comment