9. Render Target and Overlays - Tutorial

By default Vortex2D put all drawing output into back-buffer. After all drawing is complete back-buffer content moves to game window surface. Render target texture is mediator drawing buffer which could be used as target for drawing output and also as texture to be drawn into another buffer. This effect gives life for lots of cool graphics effects like post-processing, smooth edge masking, multiple drawing of once prepared content etc. Overlay is special image which is blended with drawing image mixing colors and alpha channel of both.

renderTargetAndOverlays_50x50.jpg

In this tutorial we'll prepare some art in render target and then draw it multiple times also using overlay to apply stencil.

Render Target

In Vortex2D you can create render target from type Vortex.Drawing.RenderTarget. Creating of render target is pretty simple like most of other things in Vortex2D. You need specify size, pixel format. If size is not specified backbuffer size will be taken automatically. The same also for pixel format. Third option is which z-buffer to use with render target: own, shared with back-buffer (only for size equals back-buffer) or do not use at all.

//create render target as tile less then window size in SPLIT_COUNT, pixel format = PixelFormat.X8R8G8B8
_RenderTarget = new RenderTarget((uint)Window.Width / SPLIT_COUNT, (uint)Window.Height / SPLIT_COUNT, PixelFormat.X8R8G8B8);

After render target object is created lets fill it with some art. First thing we need to do ask canvas to use render target for a some scope:

using (canvas <= _RenderTarget) {
    ... all code inside is rendered into render target
}

In example we'll draw flower texture as background and moving drops around over:

using (canvas <= _RenderTarget) {
    //draw flower background
    canvas.DrawSprite(canvas.Region, _BackgroundTexture.ToSprite(), ColorU.White);

    //draw drops
    float radiusX = (float)canvas.Width * 0.35f, radiusY = (float)canvas.Height * 0.35f;
    float step = (float)Math.PI / 10;
    float offset = Time.TotalGameTime;
    for (float n = 0; n < Math.PI * 2; n += step) {
        Vector position = new Vector(canvas.Width * 0.5f + radiusX * (float)Math.Cos(n + offset), canvas.Height * 0.5f + radiusY * (float)Math.Sin(n + offset));
        canvas.DrawSprite(position, new Vector(_DropTexture.Size) / SPLIT_COUNT, _DropTexture.ToSprite(), ColorU.White);
    }
}

You can also use Canvas2D.Clear to clear render target surface. If render target has alpha channel support you should take care about clearing it.

After target is populated you can draw it using as simple texture... create sprites from it etc...

//clear main target background
canvas.Clear(ColorU.Black);

//draw render target on entire background with 25% opacity
canvas.DrawSprite(canvas.Region, _RenderTarget.ToSprite(), ColorU.White.SemiTransparent(0.25f));

Overlays

In Vortex2D overlays are implemented with multi-texturing occupying sampler stage with index 1 (index 0 is reserved for sprite drawing). Default pixel shader uses per-channel multiplication between pixels from main sprite and overlay. It is the same as color is blended with sprite texture.

By default overlaying is disabled (Overlay.None). To start working with it we need to create Vortex.Drawing.Overlay object, specifying texture, region on texture or sprite as overlayed image. Each overlayed image is warpped on whole sprite drawed with DrawSprite method.

In tutorial example we use some stencil to draw render target content.

//apply stencil via overlay for all sprite output
using (canvas <= new Overlay(_StencilTexture)) {
    //make loop and draw many render target sprites, all of them will be stenciled
    for (int n = 0; n < SPLIT_COUNT; ++n) {
        for (int m = 0; m < SPLIT_COUNT; ++m) {
            Rect target = Rect.FromBox(m * cellSize.X, n * cellSize.Y, cellSize.X, cellSize.Y);
            canvas.DrawSprite(target, _RenderTarget.ToSprite(), ColorU.White);
        }
    }
}
In this case overlay is using as more powerful alternative to Z-Effect/AlphaTest technique covered in previous tutorial. Another purposes for using overlays: adding color gradients, procedural overlaying of some image modification/status to avoid preparation separate images or two pass drawing etc.

Conclusion

Vortex2D provides great tools for creating cool effects like render target and overlay texturing. With default pixel shader overlay uses per-channel color multiplication which limits its application. Creating custom pixel shaders dramatically increases specter of usage for this technique.

Last edited Aug 26, 2010 at 5:30 AM by AlexKhomich, version 10

Comments

No comments yet.