This element buffers the rendered content of it's children into a buffer (RenderToTexture).

Use this in one of the two cases:

  1. You like to compose a complex effect on UI content as if it was a single texture (like reducing layers or smart layers in photo-software).

  2. The content is super (duper) expensive to render and you like to cache it.

In both situations keep in mind that a LUIBufferedElement always breaks batching and increares draw-counts. Use with care and especially case (2) should be benchmarked before jumping into it.

DON'T use it when:

  1. You simply want to cut overlaping content (clipping). Use element.setClippingMode(LUIClipBehavior.ElementBox) instead.

  • Example:
const bufferElement = new LUIBufferedElement({
drawBuffer(context:LUIBufferedElement, gfx:FatRenderer, buffer:RenderTarget, bufferTex:ManagedTexture, pixelSize:number) {
// see BufferRenderer for details
}).enabledBuffering(500, 500);

NOTE: It's super important to call disableBuffering() when the element is not used anymore (e.g. during onDecativate() on a Component). Otherwise GPU memory is leaked.


  • BufferRenderer
  • RenderTarget
  • FatMaterial
  • FatRenderer




buffer: RenderTarget = null
bufferDrawer: BufferRenderer
bufferEnabled: boolean = false
bufferHeight: number
bufferTexture: ManagedTexture = null
bufferWidth: number


Generated using TypeDoc