With Unreal Engine 4.17, the clipping system has been overhauled and in some cases may break backward compatibility. For additional information about these changes see the Slate Clipping System details here.
The clipping system in UMG uses Slate's Clipping System as a framework to control how text, images, or content is shown for Widgets (as well as the rest of the
Clipping works by restricting rendered objects (graphics and text) to a region using a bounding box so that anything outside of it is not shown. The clipping system is now axis-aligned
meaning that it can clip any rotation, which was not possible before because of the way transforms were handled.
In this example, each of the buttons is a parent to the displayed text. These examples demonstrate whether the button or the text is responsible for clipping.
- Left - No clipping is enabled on the button or the text.
- Center - Clipping is enabled on the text
- Right - Clipping is enabled on the button.
The Canvas panel (or clipping zone), outlined in blue, represents your game screen and will clip (or not draw) anything outside of this area for your game.
In the UMG Designer Graph, the Canvas panel (blue) represents the clipping zone for your game screen.
In Unreal Engine 4.16 and earlier, clipping for Widgets was handled using layout-space which prevented anything from rendering outside of the Canvas panel. So if part of a Widget's bounding
box was outside of the Canvas panel it would no longer rendered, even if the Widget were rotated, its bounding box would not be leaving parts of the graphic or text cut off even if it's inside
the Canvas panel.
Take for instance these examples showing a comparison before and after the changes:
The Image Widget (left) has been placed at the edge of the Canvas panel so that part of its bounding box is outside. Now that the clipping system is axis-aligned, instead of using layout-space,
clipping which resolves artifacts and issues like the comparison (right).