How do I create a 'reasonably' sized UI element in world space?

I was trying to emulate something in the first UI lesson (http://unity3d.com/learn/tutorials/modules/beginner/ui/ui-canvas), namely text floating above a GameObject in the world. But the lesson sadly skips right over the part where those components are added and set up. (At about 4:35)

If I add a world-space canvas to an object myself, then add a text object to that canvas, the text is massive. I want it at a more reasonable scale, like in the video. And if I reduce the font size, it gets more and more pixellated and blurry and yet still isn't small enough.

It's not clear what units the canvas width/height are in world mode (as they don't look like pixels) nor why a 14pt font renders at something like 20 units tall, so I'm not sure what I would need to change to get output like that seen in the video lesson.

Any ideas?

 

I believe you will want to scale the canvas to get it to the size you want, rather than reduce the font size.

 

Animal2: Nope - the text stays the same size in that case.

Tim C - 34 minute video. Is there anything in writing? (Or at least a shortcut to a point within the video?)

 

You might have to add the Canvas and child UI elements into the scene and then move it to the object to which you want it to be a child.

 

After playing a little more, it seems that newly added Canvas and UI elements to existing objects are affected by that objects current scaling. I was getting some stretch/squished text when adding objects to some scaled cubes. Adding the Canvas to the scene first and then dragging it to the object avoided the problem.

 

Right, so looking at the video, the key is in adjusting the Canvas scale - and then the Canvas width/height becomes almost arbitrary because it's only relevant relative to the fixed-size stuff inside it, such as text.

For the benefit of anybody else who comes across this thread, the process is something like:

1. Create canvas in the hierarchy
   
2. Set it to world space, add the main camera (or whichever) as the event camera
3. Move canvas into position, or into whichever object it'll be anchored to
4. Scale canvas until it appears to be roughly the correct size in Scene/Game view (x=y=z=0.01 seems a reasonable starting point if you don't want to have to use 72pt fonts everywhere)
   
5. Add some placeholder content to the canvas, ideally including text (change its color to white, or it's likely to be hard to see)
   
6. Balance canvas width/height against scale to get the placeholder content to the proportions that you're happy with. eg. Increase scale to make fonts bigger but then reduce canvas dimensions to maintain a similar on-screen size. Or vice versa.

 

Thanks for posting those steps, been struggling with this issue for the past few days now.

 

This is exactly what I needed too. Thanks for saving me from a 30 minute video!

 

Thank you for this.

 

Yeah, thanks it does work. But it's annoying because all the size properties of the children of the scaled canvas now have to use values that compensate for the parent scaling. Seems like a poor design choice from Unity.

 

Yeah, I find that the Unity UI really requires that you get each element working correctly in terms of size, scale, and anchoring, before you add anything inside it.

 

Thank you for taking the time to share this. Saved me half an hour of watching the video!

 

Not to bump an old thread, this is a top google result and I wanted to add to the topic...

Unity's default pixel per unit is 100. If you have a sprite that is 100x100px and you place it in the scene, it will be 1x1 unity units.

Canvas and uGui don't work this way for some reason. The canvas width/height don't use "pixel per unit" and instead use "pixel = unit". Changing the reference pixels per unit on the canvas scalar wont offset this, just leave that value the same as the default pixel per unit or else the canvas children will be wrong.

This is why using a scale of 0.01 works, you're correcting "pixel = unit" back to "100 pixels per unit". I would set the scale to that and leave it exactly right there. If you do this, you'll notice that the width/height of your canvas corresponds perfectly to pixel dimensions and you can work from there.

 

@Kylotan: When my object (has child is a Canvas) be scaled and re-positioned, how can I scale the canvas?

 

Necro or not, thanks for the info. Just to add to it, do not touch canvas Width/Height and Canvas Scaler. Instead use scaling. For my use case this worked out:
Canvas: (0.0015, 0.0015, 1)
Text: (2.4, 2.4,1), Font Size= 20

 

Thanks my friend, this was really driving me nuts. Now things work perfectly.

 

Posting for posterity.

If you're using a pixels per unit of anything that isn't 100, instead of 0.01 you need to do 1 divided by your pixels per unit. If you're sticking to a project-wide standard like 32 pixels per unit for instance, it's 1 / 32 = 0.03125. Now setting width and height to your pixel art resolutions should match perfectly as well.

As a small tip, if you're having trouble lining up your sprites after the fact, change your grid and snap settings to the same number. This means every 1 snapped movement of your sprite is 1 pixel. Setting it to half of the number (0.015625 for 32 pixels per unit) can also be very useful if your pixel art resolutions aren't even.

 

Man... just... thanks!! How can something that should be simple be so difficult....

 

Thanks all for this awesome post. I spent the last 3 hours messing with this insanity. Should have searched on it. Summarizing what other have said, it seems like the key thing is just setting the canvas scale to .01 for x,y,z and making it a child of an un-transformed object or the scene. From there everything just seems to work like expected. You can resize it, use normal sized fonts, show it properly in 2d view.