UI Canvas related questions

Why is the canvas so big when using Screen Space - Overlay? It is like 50x bigger than the game view. When switching to Screen Space - Camera and selecting main camera, it scales to the game view. Being so large when in Overlay view is very confusing, and as it makes it difficult to visualize with game elements as the size is so different.

Why would you ever want Screen Space - Overlay over just using Screen Space - Camera. It seems you can accomplish the same thing using Screen Space - Camera (and more) plus it lines up properly with the real game view.

What exactly does Pixel Perfect do? Is there any reason you wouldn’t want to use it? I am using just a simple text label and Pixel Perfect makes a huge difference on the text quality. Without it, it feels as if I need glasses. When would you not use Pixel Perfect setting?

5 Likes

I would like to join to Canvas related questions and ask mine
how to add to “Event” → “Graphyc Reycaster” component?
I manage to create canvas from empty GO, but unfortunatly stack with last component “Graphyc Reycaster”

canvas = new GameObject("MyCanvas");
canvas.layer = 5; //5 is UI layer
canvas.AddComponent<RectTransform>();
canvas.transform.position = new Vector3();
canvas.AddComponent<Canvas>();
//now need to add "Graphyc Reycaster" but cant find how

Not sure I understand. In Screen Space - Overlay mode the Canvas size should exactly fit the Game View.

The Canvas may appear big in the Scene View though. That’s because by default 1 unit corresponds to 1 pixel in the Canvas, while in your scene, 1 unit typically corresponds to a meter or something.

If you want to hide the Canvas and UI while editing your scene, you can hide the UI layer from the Layers dropdown in the top right corner of the Editor.

Screen Space - Overlay is rendered on top of everything else, while Screen Space - Camera can be obscured by objects in the scene if they are closer to the camera than the plane of the UI.

The Pixel Perfect option can make UI elements clearer, but it can also have a performance overhead, especially if you have a lot of moving UI elements.

2 Likes

I know what he means - in screen space overlay, if you’re using sprites, for example, and you’ve set their pixels to units to be 100, all your game will be in the bottom corner. I don’t think it matters particularly.

Thanks for the explanation.

For Screen Space - Overlay I meant Scene view, it’s very disproportionate to the actual game size. So much it is kind of silly. It doesn’t hurt anything, just seemed odd being so huge.

Outside of the UI being obscured if you put something in front of the UI, would there be any other reason not to use Screen Space - Camera? I think the fact it is sized in scene view more like the game view, I prefer that a lot more so I can get an idea by looking at Scene view. The other way is just so huge it becomes more difficult to visualize.

Performance is only reason you wouldn’t use Pixel Perfect? The different seems very noticeable, would performance issues be limited to some rare cases, or would it be something I would need to worry about often? This looks like something I would want to have set all the time.

Well, you wouldn’t want Pixel Perfect if you’re doing a more graphically-intensive UI with images and animations and such (fancy title screen), at which point you’d rather have normal antialiasing and such like any other 2D/3D screen. Pixel Perfect is more suited to “traditional” UIs that are all about standard text and standard controls and there’s no visual concern besides crispness.

Thanks! I understand that!

Its also a performance thing. When the canvas is Screen Space - Camera or World Space the UI geometry get put into the main render queue to be picked up by the camera rendering path. (i.e. it does culling check, sorting, ect) where Screen Space - Overlay gets draw directly to screen so it avoids all the extra stuff the main render queue does.

That being said the overall performance difference should not be noticeable.

1 Like

Any chance future builds of Unity the Screen Space Overlay won’t be so crazy big or is that going to stay?

It will stay crazy big for the first release but we are not happy with how it is currently and want to address it.

5 Likes

Awesome

Ya that would be great, cause right now I’m seeing this:

It’s kinda comical, but also feels a bit like a sad joke… I actually scaled the game world up 3x just so you could see it in this screenshot. We’re doing pixelArt based game, at GameBoy resolution (160x144px) which is probably why it’s so extreme for us.

If I add use camera mode it sizes correctly, but is also jumping around, unable to stay in perfect position with my camera. Using LateUpdate in my camera code doesn’t seem to help…

Is the GUI positioned on FixedUpdate? I wonder if this is caused by the size of our game? Typically our camera will move < .01 units / frame

1 Like

How I dealt with this (although I’m sure it’s not a great solution for everyone):

  1. Create a new camera, call it UICamera
  2. Set it’s Y position to something like 1000
  3. Make it Orthographic, and change its clipping planes to something reasonable (like near 1 far 20)
  4. Create a new Canvas called “HUDCanvas” or the like
  5. Set it to Screen Space - Camera and put the plane distance at about 10
  6. Set UICamera’s Clear Flags to Don’t Clear, its Culling Mask to UI, and itd Depth to something higher than your game’s Main Camera (which defaults to 0 so 1 should be fine)

Now you have a camera + UI “box” that is easily previewed and manipulated in Scene view, and doesn’t intersect with your gameplay objects. Since nothing will ever get to Y = 1000, you don’t need to worry about sorting issues. I’m sure there are drawbacks to doing it this way, but it’s worked for me so far.

Forgot an obvious step - the new UICamera has to be the Render Camera of the HUD Canvas.

I’ve been checking out the new ui stuff, and found that pixel perfect is a huge performance killer, when you have moving stuff.
I have setup a test scene: scroll rect, with a vertical layout group that has just simple texts in them
With pixel perfect it’s unacceptable, without it, it’s fine.

Tested on asus memopad hd7:

Pixel perfect On, with scrolling list, 10 items, 30fps
Pixel perfect Off, with scrolling list, 10 items, 60+fps

Pixel perfect On, with scrolling list, 50 items, 15fps
Pixel perfect Off, with scrolling list, 50 items, 60+fps

Pixel perfect On, with scrolling list, 300 items, <1fps
Pixel perfect Off, with scrolling list, 300 items, 60+fps

Pixel perfect On, without any movement, 60+fps
Pixel perfect Off, without any movement, 60+fps

yes it is because it does alot of calculation all the way down the hierarchy to make sure everything is still pixel perfect. I think we are looking at improving this later on.

@phil-Unity - I am hoping you can help me with something.

I have a view port adjuster script which adjust the Viewport Rect size of the game camera so the same amount of the level is shown regardless of aspect ratio. Black bars are rendered to fill the top/bottom or left/right portion of the screen that is not used.

When using Screen Space - Camera, the UI “just works” since the canvas is automatically adjusted to fit inside the new viewport rect. However, this also brings my FPS down by 5 on Android vs using Screen Space - Overlay, so I’d really rather use Overlay mode.

Unfortunately I cannot figure out how to reproduce this effect with Overlay Mode. Is there any way to adjust the Canvas so it only is displayed over a specific range of the screen rather than the entire screen?

Thanks!

unfortunately no, there is nothing on the canvas that would allow you to change its drawing region. i wonder why you’re losing 5 with camera vs overlay. they should be similar enough it wouldn’t affect anything.

I believe it mostly has to do with my touch controls. I am using two Image components that each cover about half of the screen. The one on the left has a custom Joystick script which controls the player movement while the one on the right is configured with a Button that initiates a firing mechanism when clicked/touched.

1910480--123231--Move Area Control.png

I doubt this is the best way to do this, so if you have any ideas on a better way please let me know.

I have tried setting up 2D colliders to detect the input, but can’t get things to function properly. My setup is as follows:

  • Add a Physics 2D Raycaster to my camera.
  • Create Empty Game Objects and add 2D Box Colliders to them.
  • Add an Event Trigger to each game object.
  • Add the PointerClick event to the EventTrigger on the “Fire” control and hook up the method that will initiate the fire action.
  • Add the PointerDown, PointerUp, and Drag events to the EventTrigger on the “Move” control and hook up the appropriate methods.
  • Make sure the objects in Step 2 are using a layer which is found in the Event Mask of the Physics 2D Raycaster.
  • Setup the 2D colliders in 2D Mode so they line up with half of the camera’s view frustrum (at its farthest point).

Result: In the editor and on Android, my mouse clicks/screen touches are detected properly by the Fire control, but only near the center of the screen. The Move Control is unresponsive. I’ve tried expanding the fire control so there can be no doubt it is covering the entire game view, but it makes no difference.

What would be great is a button like component that does not have/require an image component. Something to define an Input Area in terms of screen space like all the other GUI controls, but which has no rendering overhead.

Any advice is greatly appreciated, and thanks for the help!

i think there is a bug in the 2D raycaster. I havn’t looked into it yet though… What happens if you do it with a the 3D versions of those classes?