Skip to main content

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 modeBehavior
ScaleWithScreenSizeScales 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.
ConstantScaleConstantScale 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:

  1. Create a YauiInjectionPoint asset (Create > YAUI > Injection Point) for each place where panels are drawn, such as "HUD" or "Front".
  2. Add Yaui Renderer Feature (YauiRendererFeature) to the renderer of the camera, and list the injection points with their events.
  3. Set WorldCamera and InjectionPoint of 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:
EventThe 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 600After 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 Overlay pass, 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.
  • WorldScale is 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.
  • EventCamera is the camera that pointer events are seen through (the main camera when not set).
note

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.

MemberConverts
YauiPanel.TryScreenToCanvas / TryCanvasToScreenScreen ↔ canvas space of the panel
YauiElement.ScreenToLocal / LocalToScreenScreen ↔ the local space of an element's box (after its render transforms)
YauiPanel.ScaleFactorScreen pixels per canvas unit (overlay), or pixels of the camera per canvas unit (camera)
YauiPanel.CanvasSizeThe size of the panel in canvas units
YauiPanel.CanvasToWorldCanvas space → world space (world space panels)

These conversions use the state that was last rendered.