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.
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:
Create canvas in the hierarchy
Set it to world space, add the main camera (or whichever) as the event camera
Move canvas into position, or into whichever object it’ll be anchored to
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)
Add some placeholder content to the canvas, ideally including text (change its color to white, or it’s likely to be hard to see)
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.
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.
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.
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
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.
Is there anything in writing? (Or at least a shortcut to a point within the video?)