Continuing the Screen Position experiments, this one explores creating a full screen grid pattern entirely through the material graph without using any textures.
The grid is built by tiling the screen space and drawing lines at regular intervals. The material is displayed as a full screen overlay through a UMG widget.
We start by getting the Screen Position viewport UV and applying aspect ratio correction. The ViewSize node gives us screen width and height, which we divide to get the aspect ratio. We then multiply the X component of Screen Position by this ratio to ensure grid tiles remain square rather than rectangular.
The corrected X and Y components are combined and multiplied by a TileCount parameter. This expands the 0-1 screen range so it can be divided into repeating sections.
Before applying the tiling operation, we add half the line thickness to shift the entire grid slightly. This prevents the edge lines from being cut off at the screen boundaries, keeping them fully visible.
The Frac node returns only the fractional part of a value, discarding the whole number. This resets the pattern to 0 at every whole number, creating the repeating tile pattern across the screen.
For the vertical lines, we use a Step node on the tiled X values. The Step returns 1 where the value is less than the line thickness, drawing a vertical line at the start of each tile.
The horizontal lines use the same logic on the tiled Y values, drawing a horizontal line at the start of each tile.
We add both line masks together and saturate to clamp values to the 0-1 range, combining them into the final grid pattern.
The grid mask is multiplied with a color parameter and connected to Emissive Color, while the mask itself connects to Opacity Mask. Since we're displaying the grid through UI, the material domain is set to User Interface and blend mode to Masked.
We assign this material to an image widget in the HUD that fills the entire screen. The result is a clean grid overlay that can be adjusted through the TileCount and LineThickness parameters, as shown in the screenshot below.
The project files are available on Github: https://github.com/RohitKotiveetil/UnrealEngine--ScreenPositionExperiments
Comments
Post a Comment