Core guide

Sprite drawing

Place textures and atlas regions with explicit transforms, tint, opacity, and draw order.

Live example

See Sprite drawing in action

Compare transformed sprites that share one texture but use different tint, flip, opacity, and position settings.

live rendering loading ticks 0

How it works

Sprite draws use logical screen or camera-space coordinates. Each draw can specify a source region, origin, flip, rotation, scale, tint, opacity, and submission order.

Public types

  • WebGpuTexture
  • TextureDrawOptions
  • TextureRegion
  • TextureFilteringOptions
  • Color

Minimum viable example

renderer.draw_texture(texture, {
  x: 120, y: 80, width: 64, height: 64,
  origin: { x: 0.5, y: 0.5 }, rotation: degrees(15), flip_x: true,
  tint: rgba(1, 0.8, 0.8, 1), opacity: 0.9,
});

Scope and limitations

Selectable blend modes and implicit batching policy are outside Phase 2; order remains observable.