Unity image sources

Assign a Unity texture or Sprite to a bridge property, then display it with LoomImage in Solid. Loom tracks the image while it is referenced by state.

Define image state

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

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 displays no image. When it becomes available, LoomImage displays it without needing to be remounted.

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.

Your game is responsible for destroying its textures and Sprites; Loom does not destroy them.

Live RenderTexture sources

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

public RenderTexture Minimap { get; set; }

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

You can resize, release, or recreate the same RenderTexture without reassigning the bridge property. LoomImage picks up the new contents and dimensions. If you hide or unmount it, it displays the current image when shown again.

Live sources require URP and the supported graphics API for the target platform: Metal on macOS, or Direct3D 11/12 on Windows. Unsupported graphics APIs produce a rendering error. 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.

In browser mocks, use createMockImageSource with an image URL:

import { createMockImageSource } from '@loomgui/bridge'

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

createMockImageSource is for mock state only. Use Unity objects for image state in the game.