The 3 Different UI Canvas Renderer Modes.

The 3 Different UI Canvas Renderer Modes.

In the first step, I will create a UI Image element In the hierarchy.

When creating UI Canvas, automatically Event system is created, this system allows you to be able to interact with buttons and other interactable elements like slides, toggle buttons,s, etc.

There are three types of UI canvas Renderer Modes, the first is Screen space overlay, Word Space, and Screen Space-Camera.

1. Screen space overly, this is the type of canvas where all UI elements are not interactable in the game environment.

UI Rect is uneditable, this component will be locked since our canvas will fill the whole screen of the viewport of the screen.

This shows a capsule is in a different place, while the canvas object is in a different view. Even if there are placed in the same spot they won't interact because this UI element is placed as an overlay on top of the camera.

2 Screen Space camera.

This Canvas Renderer Mode needs Camera if you put Main Camera into the Renderer Camera option our Canvas will be centered in the Main Camera view.

If we move the plane far away from the z-axis, we can show the plane from a far place. If we manipulate the Fov of the main camera of the Screen Space camera UI, this UI changes resolution, or the camera frustum changes, the Canvas will automatically change the size to match as well.

3. World Space Renderer

In this Renderer mode UI canvas and its element act as any other object in the scene, size of the Canvas can be set manually using its Rect Transform, and UI elements will render in front of or behind other objects in the scene based on 3D placement.

See you in the next one.