Skip to content

Drawing primitives

Tick UI ships a set of drawing primitives in addition to Fill and Text. Every primitive listed here is a public method on UI, and each pushes a draw command into the current panel's command list. For the model behind the command list itself, refer to Drawer and batching.

Primitive reference

Primitive Method Use it for
Drop shadow DropShadow(offset, blur, spread, radius, color) (or with explicit rect) A soft rounded shadow under a card or button.
Frosted-glass fill FillFrosted(blur, tint = default) Blur the content behind a panel by blur pixels and tint over it.
Frosted-glass rounded FillFrostedRounded(blur, radius, tint = default) The same effect with rounded corners.
Frosted-glass circle FillFrostedCircle(blur, tint = default) A circular or pill-shaped frosted region.
Texture by reference Image(Texture2D), ImageRounded(Texture2D, radius), ImageRounded(Texture2D, tint, radius) Draw a Texture2D you hold a direct reference to.
RenderTexture Image(RenderTexture), ImageRounded(RenderTexture, radius) Display a render target (camera output, frame capture).
Texture by name ImageByName(name), ImageByName(name, tint), ImageByName(name, tint, angleDeg), ImageByNameRounded(name, radius), ImageByNameRounded(name, tint, radius) Look up a texture through the resource-provider chain.
Antialiased line Line(a, b, thickness, color, cap = Round), Line(a, b, thickness, colorStart, colorEnd, cap = Round) A smooth line in layout space.
Antialiased polyline Lines(points, thickness, color, cap = Round) A connected polyline of antialiased segments.
Pixel line LinePixel(start, end, colorStart, colorEnd) A single pixel-space line, mesh-rendered (no antialiasing).
Pixel polyline LinesPixel(points, color) A connected polyline in pixel space, uniform colour.

Drop shadows

DropShadow draws a soft rounded-rectangle shadow under the current top rect. Call it before you draw the element so the shadow renders behind:

using (ui.Auto().Center(200, 100))
{
    ui.DropShadow(new Vector2(0, 4), blur: 12, spread: 0,
        new CornerRadius(8), Color.black.WithAlpha(0.35f));
    ui.FillRounded(cardColor, 8);
}

Two convenience overloads omit spread (defaults to 0):

ui.DropShadow(offset, blur, radius, color);   // float radius (uniform corners)
ui.DropShadow(offset, blur, color);           // square corners

Each overload also has an explicit-rect variant (DropShadow(rect, offset, blur, ...)) for the rare case where you need to shadow a rect that isn't on the layout stack. Most calls don't need it.

Match radius to the element's corner radii so the shadow tracks the shape. Alpha controls intensity. Values around 0.25–0.5 read as a natural shadow.

Frosted-glass effects

FillFrosted, FillFrostedRounded, and FillFrostedCircle blur the content behind the current rect and optionally tint over the blurred result. Call them after the content that should appear blurred:

ui.Image(backgroundPhoto);
using (ui.Auto().Center(400, 200))
{
    ui.FillFrostedRounded(blur: 12, new CornerRadius(8),
        Color.white.WithAlpha(0.05f));
}

The tint alpha controls how strongly the tint mixes with the blur: 0 is pure blur, 1 is pure tint. Larger blur values read softer but cost more per draw. The frosted effect samples through the panel's render-target at draw time; for the performance and pipeline-support implications, refer to Drawer and batching.

Images

Image(Texture2D) and ImageRounded(Texture2D, ...) draw a texture you already hold a reference to. ImageRounded takes a CornerRadius; pass new CornerRadius(r) for uniform corners or the four-argument constructor for per-corner radii. An int converts implicitly, so ImageRounded(tex, 8) also works.

using (ui.Auto().Center(64, 64))
{
    ui.Image(iconTexture);
}

Image(RenderTexture) and ImageRounded(RenderTexture, radius) draw a render target. Use these for camera previews, minimaps, or any GPU output you need on the UI surface.

ImageByName(name, ...) and ImageByNameRounded(name, ...) look the texture up through the resource-provider chain at draw time. Prefer the by-name overloads when the asset comes from a GUIResourceProvider so theme swaps and runtime overlays work. For the chain itself, refer to Resource providers.

ui.ImageByName("icon-save", Color.white);
ui.ImageByName("badge", Color.white, angleDeg: 45f);
ui.ImageByNameRounded("portrait", new CornerRadius(8));

Lines

Tick UI ships two line APIs:

  • Line and Lines: render through the same SDF pipeline as rounded rectangles. Endpoints are in layout space, antialiasing is analytic, and end caps (DrawCommand.Cap.Round or DrawCommand.Cap.Butt, defaulting to Round) are available. Line supports per-vertex gradients.
  • LinePixel and LinesPixel: render as raw mesh geometry in pixel space. They apply no antialiasing and no transform, so the geometry hits the framebuffer one-to-one. Use these for debug overlays, graphs, and pixel art where mesh rendering is the right look.
ui.Line(new Vector2(0, 0), new Vector2(100, 50),
    thickness: 2, Color.cyan);

ui.Line(new Vector2(0, 0), new Vector2(100, 50),
    thickness: 2, Color.cyan, Color.magenta);  // gradient

ui.LinePixel(new Vector2(0, 0), new Vector2(100, 50),
    Color.green, Color.green);

ui.LinesPixel(graphPoints, Color.white);

Lines is a wrapper that calls Line once per segment. Joins are overdraw, which reads fine for opaque colours at typical thickness. For stroked outlines that need clean joins, build the geometry yourself and use LinesPixel.

Coordinate spaces

DropShadow, FillFrosted*, Image*, Line, and Lines accept layout-space arguments. They convert to screen space before they issue the draw command. LinePixel and LinesPixel accept pixel-space arguments and skip the conversion.

For the broader rule, refer to Coordinate spaces.

Additional resources