Prevent UI text showing through images.

Unity Engine
,
1

Hello I am trying to make a simple book with pages you can flip though in Unity using the UI. It works by simply rotating an image of a page with a pivot at one corner. I have added a TextMeshProUGUI to it for page text, and it shows up fine… on both sides of the page. Any way to stop it bleeding through?

8708496--1176459--upload_2023-1-5_20-56-16.png

I’ve tried various things to make it so only shows up on one side, including:

  • Changing or hiding the text when it’s half way. This works, but I can’t get it quite right - the text vanishes at the right time, but appears a bit too late so you see it.

  • Adding two pages that turn at once. Unfortunately, the text acts oddly and always seems to be invisible and hidden between the two images - despite the images not previously stopping the text.

  • Adding an extra sandwich image. They just show through.

  • Increasing the z axis on the text. Nothing seems to happen.

  • Fiddling with the shader. I wouldn’t know what to do except swapping them. Which doesn’t work.

Any ideas what I can do?

EDIT

The fix is to go into the shader for your font, then under ‘Debug settings’ click ‘culling’ and set it to ‘back’.

2

Three (3) primary ways that Unity draws / stacks / sorts / layers / overlays stuff:

In short,

  1. The default 3D Renderers draw stuff according to Z depth - distance from camera.

  2. SpriteRenderers draw according to their Sorting Layer and Sorting Depth properties

  3. UI Canvas Renderers draw in linear transform sequence, like a stack of papers

If you find that you need to mix and match items using these different ways of rendering, and have them appear in ways they are not initially designed for, you need to:

  • identify what you are using
  • search online for the combination of things you are doing and how to to achieve what you want.

There may be more than one solution to try.

Additional reading in the official docs:

And SortingGroups can also be extremely helpful in certain circumstances:

3

Please don’t use the 2D forum for UI questions. There’s dedicated forums for the UI feature / team.

I’ll move your post for you.

4

sorry.

5

Turns out the simplest fix is to go into the shader for your font, then under ‘Debug settings’ click ‘culling’ and set it to ‘back’. Lol I just hope that works in the actual game.

1 Like