Placing UI Canvases in the 3D World - Lumberyard User Guide

Placing UI Canvases in the 3D World

You can place a UI canvas directly on an object in the 3D world, as opposed to showing it in screen space. To do this, you render a UI canvas to a texture, and then use that texture in a material on a 3D mesh.

You can use any material on any type of entity to display a texture rendered by a UI canvas. However, if players are to interact with the UI canvas in the 3D world—by clicking with the mouse, for example—you must use a component entity.

To see an example of a UI canvas on an object in a 3D world, open the UiIn3DWorld level in the Samples Project.

Follow all the steps in the following procedure if you need to create a canvas that players can interact with. If the canvas is not to be interactive, then you only need steps 1 through 5.

To place a UI canvas on an object in the 3D world

  1. Create your UI canvas file. In the canvas properties, select Render to texture and enter a name in the Render target text box. You can enter any name, but the convention is to prefix the name with the $ character to distinguish it from other texture assets.

  2. In the level, create a component entity.

  3. In the Entity Inspector, add to this component entity a UI Canvas Asset Ref to specify the UI canvas and optionally to load it automatically when the level loads.

  4. In the Material Editor, create a material that uses the render target texture that is rendered by your canvas. Under Texture Maps, for Diffuse, specify the texture file name.

  5. Add a Mesh component to the component entity and choose the mesh asset onto which you want to map your canvas. Use the Material override property to select the material that you created.

  6. Add a Mesh Collider and a Static Physics component. Physics is required on this entity because a ray cast is used to translate a mouse or touch input into a position on the UI canvas that is at that point in the world.

  7. Add a UI Canvas on Mesh component. Type a canvas name in the Render target override property if you want to load several instances of the UI canvas on different meshes and have them display different states. Otherwise, leave this property blank.