Skip to main content

UI System Coordinates

Current UI layout model

The UI system uses a pixel-space orthographic projection built from the current window size.

  • 0, 0 is the middle of the window.
  • Positive X moves to the right.
  • Positive Y moves upward.
  • width and height are interpreted in pixels.
  • position is applied in pixel units.

This makes UI sizing match the window size directly.

Projection used by the UI shader

The UI projection is built like this:

Matrix4x4.CreateOrthographicOffCenter(
-window.Width / 2f,
window.Width / 2f,
-window.Height / 2f,
window.Height / 2f,
-1,
1);

This creates a coordinate space where the center of the window is (0, 0).

Corner positions in this space

If the origin is the center of the window, the window corners are:

  • Top-left: (-window.Width / 2, window.Height / 2)
  • Top-right: ( window.Width / 2, window.Height / 2)
  • Bottom-left: (-window.Width / 2, -window.Height / 2)
  • Bottom-right: ( window.Width / 2, -window.Height / 2)

The full distance between the center and the bottom-right corner is half the screen size in each direction, not the full screen size.

Converting from the bottom-right corner

If you want to use the bottom-right corner as the starting point, the offset from bottom-right to the center is:

Vector2 toCenter = new Vector2(-window.Width / 2f, window.Height / 2f);

More generally, to move from bottom-right to any point in the window:

Vector2 point = new Vector2(
window.Width / 2f + dx,
-window.Height / 2f + dy
);

Where dx and dy are offsets from the bottom-right corner.

If you want a matrix form, the same conversion is just a translation:

Matrix4x4 fromBottomRight = Matrix4x4.CreateTranslation(-window.Width / 2f, window.Height / 2f, 0f);

Apply that translation to move from bottom-right space to middle space.

General corner conversion formula

To convert from the center to any corner, use sign multipliers:

Vector2 corner = new Vector2(
xSign * window.Width / 2f,
ySign * window.Height / 2f
);

Where:

  • xSign = -1 for left, +1 for right
  • ySign = -1 for bottom, +1 for top

If you prefer a bottom-right anchored matrix, the corners become:

  • Bottom-right: (0, 0)
  • Bottom-left: (-window.Width, 0)
  • Top-right: (0, window.Height)
  • Top-left: (-window.Width, window.Height)

To move from bottom-right to the middle in that anchor system, use:

Vector2 middle = new Vector2(-window.Width / 2f, window.Height / 2f);

Example positions

To place a UI element in the middle:

uiElement.Transform.Position = new Vector2(0, 0);

To place it in the bottom-right corner:

uiElement.Transform.Position = new Vector2(window.Width / 2f, -window.Height / 2f);

To place it in the top-left corner:

uiElement.Transform.Position = new Vector2(-window.Width / 2f, window.Height / 2f);

Notes

The old UI shader used a fixed scale factor and aspect-ratio correction. The current setup uses pixel-space coordinates directly, which makes UI sizing easier to reason about and keeps window-sized UI elements aligned with the actual window.