Display a UI in an overlay

This page explains how to render a UI to a texture, then display it as an overlay.

These instructions assume you already have a UI that you want to display in the overlay. For information about creating UIs, see the UI section.

Note

You can't see overlays when you don't run your game in your VR device. This is because the VR device itself creates the overlay, not other hardware.

1. Create a render target texture

In the Asset View, click Add asset and select Texture > Render target.

Add render target

Game Studio adds a render target texture to your project assets.

Render texture

In the following steps, we'll render the UI to this texture, then display it in the overlay.

2. Add a VR overlay

  • In the Asset View (in the bottom pane by default), double-click the Graphics Compositor asset.

Graphics compositor asset

The graphics compositor editor opens. For more information about the graphics compositor, see the Graphics compositor page.

  • In the graphics compositor editor, select the forward renderer node.

Select forward renderer

  • In the Property Grid (on the right by default), expand VR Settings.

VR settings

  • Next to Overlays, click Green plus button (Add).

    Game Studio adds a new overlay to the list.

Add VR item

  • Next to Texture, click Hand icon (Select an asset).

    The Select an asset window opens.

Select render texture

  • Select the render texture you created and click OK.

3. Set up the UI render feature

  • In the graphics compositor editor, on the left, under Render Features, select the UIRenderFeature.

Select UI render feature

  • In the Property Grid, make sure SimpleGroupToRenderStageSelector is selected.

Select SimpleGroupToRenderStageSelector.png

  • Under Render Stage, make sure UIRenderStage is selected.

Select UIRenderStage.png

This makes sure the UI is rendered in the UI render stage, which we'll use in the next step.

4. Set up the renderers

To display an overlay, you need at least two renderers:

  • one to render your main camera
  • one to render the UI to the overlayThis page describes the simplest way to do this from scratch, using two cameras and two renderers. Depending on your pipeline, you might need to create a different setup.
Warning

These instructions involve deleting your existing renderers for the game entry point. You might want to make a backup of your project in case you want to restore your pipeline afterwards.

  • In the graphics compositor editor, select the Entry points node.

Entry points node

  • In the Property Grid on the right, next to Game renderer, click Blue arrow button (Replace) and select None to delete your existing renderers.

Cleared game renderers

  • Next to Game rendererer, click Blue arrow button (Replace) and select Camera Renderer.

Select camera renderer.png

Currently, all renderers must have a camera, or be a child of a renderer that has a camera. This applies even to renderers that don't necessarily use cameras, such as the single stage renderer, which renders the UI.

For this reason, in these instructions, we'll add a game renderer with a camera, then make the two renderers children of that renderer. This makes sure both renderers have a parent with a camera.

  • Next to Camera, click Blue arrow button (Replace) and select your main game camera.

Select main camera

  • Next to Child, click Blue arrow button (Replace) and select SceneRendererCollection.

Select scene renderer collection

  • Next to Children, Click Green plus button (Add) and select RenderTextureSceneRenderer.

Select RenderTextureSceneRenderer

  • Next to Child, click Blue arrow button (Replace) and select SingleStageRenderer.

Select single stage renderer

  • Next to Render Stage, click Blue arrow button (Replace) and select UIRenderStage. This is the renderer that renders the UI.

Select UI render stage

  • Next to Render Texture, click Hand icon (Select an asset).

    The Select an asset window opens.

  • Select the render texture and click OK.

Select render texture

Game Studio adds the render texture to the renderer.

  • Under Game renderer, next to Children, click Green plus button (Add) and select Forward renderer.

Select forward renderer

Your game is now ready to render the UI to an overlay in your VR device.

VR template

For an example of a UI overlay implemented in a VR game, see the VR template included with Xenko.

VR template

See also