Connecting Unity and UI Unity image sources
Connecting Unity and UI

Unity image sources

Render Texture2D, Sprite, and live RenderTexture bridge state in Solid with LoomImage.

Loom can expose Unity images directly as bridge state. Assign the Unity object in C# and render the generated LoomImageSource with LoomImage in Solid. There is no publish, refresh, registration, or release call in the customer API.

Define image state

C#
using UnityEngine;

public Texture2D Thumbnail { get; set; }
public Sprite ItemIcon { get; set; }
public RenderTexture Minimap { get; set; }

Image references can be bridge properties or fields inside state DTOs, snapshot collections, ReactiveList<T>, and ReactiveMap<K,V>. Regenerating types emits LoomImageSource | null for each of the three Unity types.

Image references are state-only. They are not supported as action parameters, action return values, or event payloads; the bridge generator reports those positions as errors.

Render an image

TSX
import { LoomImage, useBridge } from '@loomgui/bridge'

export function InventoryItem() {
  const bridge = useBridge()

  return (
    <LoomImage
      source={bridge.itemIcon}
      alt="Health potion"
      class="item-icon"
    />
  )
}

LoomImage accepts source instead of src and forwards ordinary image attributes such as alt, class, style, width, and height. A null or temporarily unavailable source renders quietly and can become available again without remounting the component.

Use LoomImage for Unity-backed sources. They are not supported as CSS background-image values, canvas inputs, or arbitrary browser URLs.

Texture2D and Sprite snapshots

Texture2D and Sprite values are immutable snapshots while they remain in bridge state:

  • Loom captures the object the first time it becomes reachable from state.
  • Reusing the same Unity object in many fields or LoomImage components reuses the same snapshot.
  • Changing its pixels afterward does not update the displayed image. Assign a different Unity object when a new snapshot is required.
  • Runtime-created, non-readable textures are supported in player builds.
  • Sprite output preserves its logical rectangle, transparent trimmed space, tight or rotated packing, and associated split alpha.

Loom does not destroy either the source texture or Sprite. Your game continues to own their Unity lifetime.

Live RenderTexture sources

A referenced RenderTexture is live. Pixel changes appear without assigning the bridge property again:

C#
public RenderTexture Minimap { get; set; }

private void Update()
{
    Graphics.Blit(source, Minimap, minimapMaterial);
}

Resizing, releasing, or recreating the same object updates its availability, contents, and intrinsic dimensions automatically. Its public bridge value stays stable, so the Solid component does not need to remount. Hiding or temporarily unmounting LoomImage also requires no refresh; showing it again displays the current contents.

Live sources require URP and the supported graphics API for the target platform: Metal on macOS, or Direct3D 11/12 on Windows. Loom reports an unsupported configuration instead of switching to a software image path. Loom never calls Release or Destroy on your RenderTexture.

Browser development and mocks

Unity-backed images render inside Loom’s embedded game view. The separate Editor browser cannot display images owned by the Unity process, so it shows a development placeholder while bridge state and the rest of the UI remain usable.

For mock-mode UI tests, use a normal browser asset through the typed helper:

ts
import { createMockImageSource } from '@loomgui/bridge'

const mockState = {
  itemIcon: createMockImageSource('/mocks/health-potion.png'),
  minimap: createMockImageSource('/mocks/minimap.png'),
}

This helper is for mock state only. Embedded Unity image sources remain opaque.

Loom documentation

Search docs

Esc

Type a word or phrase to search the documentation.

Type a word or phrase to search the documentation.