Panels
A panel (YauiPanel) is the root of a YAUI tree. It is also an element: YauiPanel requires a YauiElement on the same GameObject, and that element is the root box of the layout. Elements belong to the nearest panel above them in the hierarchy.
Each panel is drawn in one draw call, unless custom materials, masks or many textures split it (see Performance).
Render modes
Overlay
PanelRenderMode.Overlay draws the panel over the screen after post-processing, like uGUI's Screen Space - Overlay canvas. It is drawn on the last game camera that renders to the screen. No setup of the URP renderer is needed.
The root element fills the screen. The size of the canvas (the unit of all lengths in the panel) depends on the scale mode:
| Scale mode | Behavior |
|---|---|
ScaleWithScreenSize | Scales with the screen toward ReferenceResolution. Match blends between matching the width (0) and the height (1). The same as uGUI's Scale With Screen Size. |
ConstantScale | ConstantScale screen pixels per canvas unit. The same as uGUI's Constant Pixel Size. |
When several overlay panels exist, the ones with a higher SortOrder are drawn on top.
In the Scene view, overlay panels appear like uGUI's overlay canvases: one world unit per screen pixel, with the bottom-left corner at the origin.
Camera
PanelRenderMode.Camera draws the panel over the target of a camera (WorldCamera), at a point among the render passes of that camera (InjectionPoint). Like an overlay panel, the root element fills the target and the scale mode sizes the canvas, but from the pixel size of the camera (its target texture when it renders to one) instead of the screen.
The panel names the point, and the renderer of the camera decides its event:
- Create a
YauiInjectionPointasset (Create > YAUI > Injection Point) for each place where panels are drawn, such as "HUD" or "Front". - Add Yaui Renderer Feature (
YauiRendererFeature) to the renderer of the camera, and list the injection points with their events. - Set
WorldCameraandInjectionPointof the panel. Its Inspector shows the event that the camera's renderer draws it at, or why it is not drawn.
A panel whose injection point is not listed in the camera's renderer is not drawn. Since events are set per renderer, the same point can have different events in a 2D Renderer and in a Universal Renderer, and a panel keeps its point when a script moves it to another camera. The event field takes any value, and shows the nearest named event and, in a 2D Renderer, where the renderer runs the pass.
The event decides what the panel is drawn over and what applies to it:
- Before the camera's post-processing, the post-processing applies to the panel. After it, it does not.
- Any value between URP's events works, such as
RenderPassEvent.AfterRenderingPostProcessing - 20. Passes run in the order of their events, so you can place panels between the passes of your own renderer features, or draw several layers of UI and post-processing in one camera instead of stacking cameras. - The 2D Renderer runs passes only at some points of its frame, and groups the events into them:
| Event | The 2D Renderer runs the pass |
|---|---|
Up to 450 (BeforeRenderingTransparents) | Before rendering |
451 to 550 (AfterRenderingTransparents included) | Before post-processing |
551 to 600 (AfterRenderingPostProcessing) | After post-processing |
| Above 600 | After the final blit, on the camera's target |
Panels of the same camera and injection point are drawn in SortOrder. Other things to know:
- The panel is drawn between passes, so it is not sorted with the transparent objects (uGUI canvases included) of the pass before it.
- Masks use a stencil buffer of their own, so the camera's depth buffer is not needed, and its stencil values are left as they are.
- The camera's view and projection are set back after the panels, for the passes that follow.
- Pointer events and coordinate conversions use
WorldCamera. - Custom materials draw with their
Overlaypass, as in overlay panels. - Camera panels are not shown in the Scene view.
World space
PanelRenderMode.World draws the panel as a flat quad in the scene, at the panel GameObject's Transform. It is drawn in the transparent pass of URP, so it is sorted and depth tested with the other transparent objects.
- The canvas size is
ReferenceResolution. WorldScaleis the number of world units per canvas unit. With the default of 0.001, a 1080×1920 panel is 1.08 × 1.92 world units.- The panel is centered on its Transform, in the Transform's XY plane.
EventCamerais the camera that pointer events are seen through (the main camera when not set).
The Transform of the panel GameObject is used only in world space. The Transforms of all elements below the panel are always ignored.
Hidden panels
A panel is not drawn, and costs almost nothing to render, while its root element has an opacity of 0, or while everything it draws is transparent (every element and its content has an alpha of 0, and its custom draws draw nothing). To hide a panel for a short time, fading it out is enough: unlike disabling its GameObject, it does not rebuild the draw order when it comes back.
YauiPanel.IsDrawn tells whether the panel was drawn in the last rendered frame. For example, a script can enable a camera only while the panels of that camera are drawn. The value describes the frame that was rendered last, so a panel that starts to show is drawn one frame before the script sees it.
Coordinates
Positions in a panel are in canvas space: canvas units, with the origin at the top-left and Y pointing down. Screen positions (like PointerEventData.position) are in pixels with the origin at the bottom-left.
| Member | Converts |
|---|---|
YauiPanel.TryScreenToCanvas / TryCanvasToScreen | Screen ↔ canvas space of the panel |
YauiElement.ScreenToLocal / LocalToScreen | Screen ↔ the local space of an element's box (after its render transforms) |
YauiPanel.ScaleFactor | Screen pixels per canvas unit (overlay), or pixels of the camera per canvas unit (camera) |
YauiPanel.CanvasSize | The size of the panel in canvas units |
YauiPanel.CanvasToWorld | Canvas space → world space (world space panels) |
These conversions use the state that was last rendered.