Scaling world space UI (e.g. health bars) to be consistent screen space size

It could be that with later versions of Unity (i.e. ones with TMPro) that the semantics around Canvas and Scale have completely changed. Here is my mental model of what I perceive Canvas width and height to mean.

  • If Render Mode is set to World Space they are in meters.
  • If Render Mode is set to Space Space they are in pixels.

Sam’s explanation of what width and height meant didn’t make any sense to me, though perhaps it might have been accurate in the pre-Text Mesh Pro era.

Anyway - I thought these two lectures (Health Bar UI and Health Bar Scale) would be about a UI element that exists in world space (like our health bar and damage text) but that we want to render in the same (or similar) screen space size regardless of how close or far they are. I would figure this is important because it’s just plain hard to read health bars and text of enemies that are really far away.

Canvas’s scale parameters I think could be used to create that effect I describe above (assuming you buy my definition of width and height above). e.g. I have a 1 meter wide health bar that I need to scale it by 200% because the character is farther away than my reference position. Reference position of 100% scale would be something up close (like around where the player is). An upper bound on scale would probably be appropriate if you end up with scenes that have hordes of enemies that are far away.

Anyone try anything like that? Am I thinking about this straight? I will give it a go after I’m done with this course unless someone posts a great solution here.

You are thinking of it somewhat correctly.

The way he described is the official way - even using TextMesh Pro.

You are partially correct in your render modes:

  • If Render Mode is set to World Space they are your CANVAS RESOLUTION
  • If Render Mode is set to Space Space they are in pixels.

Unity Documentation On World Space Canvas

So in World Space, you are setting the Resolution of your Canvas. Depending on what the canvas is being used for, will depend on what resolution you like it to be. For instance, Text may not need that high of a resolution to still be readable, but you may need a higher resolution for an Image to see it clearly.

Look at the pictures below… exact same image, but 1 has a 100x100 resolution canvas, and the other has a 1920x1920 (Full HD resolution) both with a 1 meter wide canvas. Notice how the 1920 looks sharper - because of the resolution. Now the picture itself is not that
100x100 at 2 meters wide
image

1920x1920 at 2 meters wide
image

It’s funny this answer just came now as I was just working on a new feature which had a similar effect so I was literally just looking at my prior work with health bars.

To be honest I don’t see the difference in your images but it could be due to image compression. What component are you setting to 100x100 vs 1920x1080? When in world space, it’s the underlying image you place on the canvas and how close you are to it that should impact the sharpness.

I changed the picture so maybe it can be seen a little better. Trying to use a Low Res pic to kinda show the difference

Think of it this way,

In World space, you are thinking of how much resolution do I what my under lying text / image to have. At a 100x100 resolution, you may not see a large difference in your image, but for instance text you will… Notice a difference?

The only thing I changed was the canvas width / height. The font size remained the same at 36. So similar to your monitor going from say 1024x768 to 1920x1080 , you noticed you text quite a bit smaller, and the icons probably looked a bit different due to their being more pixels on the screen.

So in world space, you are setting a resolution, and then you scale it down to how big you want the canvas to be in the x,y,z (in meters… meters / width)

100x100 - 2 meters

image

1920x1920 - 2 meters
image

Thanks for the detailed response. I can see how doing it that way can be useful but it seems like an extra step. I will play around with doing the settings like the way Sam described it if I ever run into an issue where the appearance of my world space objects seems off.

Privacy & Terms