Bitmap caching (RenderToTexture)

TypeSpriteJS supports cache and advanced shader effects via the UI library.

It's possible to put a RenderElement into a LUIElement using LUITreeRenderer. Within LUI it's possible to create a LUIBufferedElement. That way we have a RenderElemenet that gets cached into a buffered texture.

In the drawBuffer(...) callback we get full access to the cached image (bufferTex). That way we can render the cached texture to the screen.

export class BufferedLayer extends Component {

    @link('GraphicsEngine:typesprite')
    private gfx: GraphicsEngine;
    
    public bufferedLayer:RenderElement;
    
    onInit() {
        const cachedTree = new LUITreeRenderer();
        const bufferElement = new LUIBufferedElement({
            drawBuffer(target:LUIBufferedElement, gfx:FatRenderer, buffer:RenderTarget, bufferTex:ManagedTexture, pixelSize:number) {
                // draw the result into the LUIElement target
                gfx.directDraw(
                    bufferTex,
                    0, 0, bufferTex.width, buffer.height, // source
                    context.getLeft(), context.getTop(), context.getWidth(), context.getHeight(), // target
                );
            }
        }).enabledBuffering(500, 500);
        bufferElement.addStyleElement(cachedTree);
        this.bufferedLayer = new RenderElement();
        cachedTree.root.addChild(this.bufferedLayer);
        this.gfx.guiBehind.addChild(bufferElement);
    }
}

Bitmap caching (RenderToTexture) ​

Bitmap caching (RenderToTexture)