Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

UI Canvas related questions

Discussion in 'UGUI & TextMesh Pro' started by Saxi, Aug 28, 2014.

  1. Saxi

    Saxi

    Joined:
    Jun 28, 2013
    Posts:
    381
    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?
     
  2. Briksins

    Briksins

    Joined:
    Jul 15, 2012
    Posts:
    27
    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"

    Code (CSharp):
    1. canvas = new GameObject("MyCanvas");
    2. canvas.layer = 5; //5 is UI layer
    3. canvas.AddComponent<RectTransform>();
    4. canvas.transform.position = new Vector3();
    5. canvas.AddComponent<Canvas>();
    6. //now need to add "Graphyc Reycaster" but cant find how
     
  3. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    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.
     
    John3D likes this.
  4. Triggles

    Triggles

    Joined:
    Aug 23, 2014
    Posts:
    30
    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.
     
  5. Saxi

    Saxi

    Joined:
    Jun 28, 2013
    Posts:
    381
    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.
     
  6. JAKJ

    JAKJ

    Joined:
    Aug 17, 2014
    Posts:
    185
    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.
     
  7. Saxi

    Saxi

    Joined:
    Jun 28, 2013
    Posts:
    381
    Thanks! I understand that!
     
  8. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    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.
     
    vexe likes this.
  9. Saxi

    Saxi

    Joined:
    Jun 28, 2013
    Posts:
    381
    Any chance future builds of Unity the Screen Space Overlay won't be so crazy big or is that going to stay?
     
  10. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    It will stay crazy big for the first release but we are not happy with how it is currently and want to address it.
     
  11. Saxi

    Saxi

    Joined:
    Jun 28, 2013
    Posts:
    381
    Awesome
     
  12. gskinner

    gskinner

    Joined:
    Aug 28, 2014
    Posts:
    43
    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
     
    Last edited: Sep 3, 2014
    rakkarage likes this.
  13. Klepac

    Klepac

    Joined:
    Sep 17, 2012
    Posts:
    2
    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.
     
  14. Klepac

    Klepac

    Joined:
    Sep 17, 2012
    Posts:
    2
    Forgot an obvious step - the new UICamera has to be the Render Camera of the HUD Canvas.
     
  15. Steveyy

    Steveyy

    Joined:
    Oct 10, 2014
    Posts:
    1
    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
     
  16. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    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.
     
  17. gilley033

    gilley033

    Joined:
    Jul 10, 2012
    Posts:
    1,181
    @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!
     
  18. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    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.
     
  19. gilley033

    gilley033

    Joined:
    Jul 10, 2012
    Posts:
    1,181
    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.

    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:

    1. Add a Physics 2D Raycaster to my camera.
    2. Create Empty Game Objects and add 2D Box Colliders to them.
    3. Add an Event Trigger to each game object.
    4. Add the PointerClick event to the EventTrigger on the "Fire" control and hook up the method that will initiate the fire action.
    5. Add the PointerDown, PointerUp, and Drag events to the EventTrigger on the "Move" control and hook up the appropriate methods.
    6. Make sure the objects in Step 2 are using a layer which is found in the Event Mask of the Physics 2D Raycaster.
    7. 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!
     
  20. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    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?
     
  21. gilley033

    gilley033

    Joined:
    Jul 10, 2012
    Posts:
    1,181
    Yeah, the 3D version works a little better. Setting up the colliders in the proper place is still not very intuitive. Do you have any recommendations? I placed them about 2m from the camera. I still would rather use some type of canvas element, since it would make it easier to make sure there's no overlap between the element and other buttons/intractable elements.

    Perhaps some sort of 2D collider that could be set up in terms of screen space instead of world space? In any case, thanks for the help!

    And in case anyone is wondering, the collider method increased the FPS by ~4, and reduced the CPU-Player time by about 2ms according to the Android Internal Profiler.

    Also, it turns out the Event Trigger's are not needed, as long as you have a script which implements one of the correct interfaces (Supported Events). Of course, if you want to call some method on another object, you will need to either use the Event Trigger component, or add a script that implements one of the supported events but offloads the actual "behavior" to the script on the other object.
     
  22. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    Yea i need to fix the 2D version it seems. :( You should be able to put a blank graphics object (image) in the place and have it at the bottom of the hierarchy to have it receive the events

    And you are correct you dont need the EventTrigger unless you are trying to forward the event to someone else. Think of the case where you need to click a button to open a door across the level. You can use the event trigger on the button in that to send a message to the door to "open"
     
  23. gilley033

    gilley033

    Joined:
    Jul 10, 2012
    Posts:
    1,181
    On that note, when trying to implement the collider method via Event Triggers, I had trouble figuring out how to pass the PointerEventData into the methods. Is there any way to do that?
     
  24. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    The Event Trigger already passes along the eventData that it received.

    e.g.

    public virtual void OnPointerDown(PointerEventData eventData)
    {
    Execute(EventTriggerType.PointerDown, eventData);
    }
     
  25. gilley033

    gilley033

    Joined:
    Jul 10, 2012
    Posts:
    1,181
    Thanks, I've got it now. The issue I had was my method had PointerEventData as the parameter type. In that case, the method will not show up in the drop down list. You have to make sure the parameters type is BaseEventData.
     
  26. phil-Unity

    phil-Unity

    Unity UI Lead Developer

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    You are right i missed that :( (didnt look hard enough). Glad its working.
     
  27. sez

    sez

    Joined:
    Sep 12, 2013
    Posts:
    1
    I have the same issue as @gskinner above. Basically means the Scene view is useless for laying out the UI.
     
    Deeeds likes this.
  28. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,910
    Why does it matter the game is smaller? The UI has nothing to do with the game world unless you're using a world space UI (not screen overlay).

    You can press F to zoom to objects quickly.
     
  29. PseudoDev

    PseudoDev

    Joined:
    Dec 25, 2012
    Posts:
    2
    When in Screen Space Overlay, one pixel of your current resolution (as seen in your Game View window) is equal to one unit (one meter) in Unity world space.

    You could set the Canvas's Screen Space to Camera, which makes it the size of the user set camera's frustum at a set distance away from it (Plane Distance setting) , but then it would become a 'world' object that is locked to the camera and can be interfered with or covered by objects in the scene. You may be able to use LayerMasks to prevent world objects from interfering with the UI elements, but I'm not sure because I haven't needed to do it myself.

    If it's absolutely crucial for your UI to never be covered by world objects, then Screen Space Overlay is your only option at the moment. I use Screen Space Camera for the same reason of wanting to edit the UI within the 'game' scale.
     
  30. the_motionblur

    the_motionblur

    Joined:
    Mar 4, 2008
    Posts:
    1,774
    *bump*

    Dabbling with 2D stuff I find that the canvas blocking the game view is still a problem in the current release.
    Whatever is in the scene - selecting is blocked by the canvas unless it's deactivated.
    Even disabling it in the Gizmos Tab (like @runevision proposed last year) still selects the UI before anything else. Also no matter if it's somewhere else in Z. UI Canvas comes first - which makes selecting pretty tedious at times.
    Workarounds like enable scripts or dragging the Canvas off in X or Y and setting it back on game start feel rather hack-ish and clumsy.

    (edit) Using the layer drop down like runevision proposed works fine, though. ;) (/edit)

    I found threre is a unity feedback poll for it already:
    http://feedback.unity3d.com/suggestions/hide-slash-show-option-for-ui-elements-in-scene-editor
    Anyone still feeling the same way please vote for it to be seen. :)

    Or maybe I'm missing something that has been integrated in the meantime...?
     
    Last edited: Jun 29, 2015
  31. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    I don't believe I said that. Here's what I actually said earlier in this thread:

    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. (emphasis added)

    The Layers dropdown and the Gizmos tab (actually a dropdown too) is not the same thing. If you use the layers dropdown it should work fine.
     
    the_motionblur likes this.
  32. the_motionblur

    the_motionblur

    Joined:
    Mar 4, 2008
    Posts:
    1,774
    Darn - you are right. I completely missed that feature when it was introduced (or simply never used it until now), apparently!
    Sorry. My bad! (D'oh!)
     
  33. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    No worries. Actually the feature has always been there (or more than 6 years at least), but it's easy to miss! :)
     
  34. WTFG

    WTFG

    Joined:
    Dec 15, 2012
    Posts:
    3
    This also troubled me very much.
     
  35. John3D

    John3D

    Joined:
    Mar 7, 2014
    Posts:
    441
    Awesome tip! Thanks!
     
  36. Rebelinho

    Rebelinho

    Joined:
    Nov 22, 2013
    Posts:
    1
    Hi,

    i’m working on an interface that should support various display sizes to have the same look&feel on all target devices. I tried to use the Canvas Scaler Option “Scale With Screen Size“. But i realized that this option causes extreme poor performance. If I switch to „Constant Pixel Size“ instead, I get up to +30 frames more on the same device.

    Is there an approach without this performance loss?
     
  37. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    It's unclear why there would be a performance loss. Perhaps it causes your UI elements to be scaled larger and have a greater fill rate as a result? If that's the case, any equivalent solution for consistent looks would have the same problem. First step would be to profile what is causing the performance loss I think.
     
  38. Apolyon6k

    Apolyon6k

    Joined:
    May 5, 2013
    Posts:
    32
    Hello, I have kinda the opposite problem as the OP. My scene has a big terrain on it with big mountains and the UI is obscured by those mountains and everything else in the scene:
    UIProblem.jpg

    If I move the UI Canvas away from the origin (0,0,0), it will not show up ingame anymore.
    If I move the scene content away from the origin, I get nasty flickering and depth failures.

    But the way it is at the moment, I cannot work on UI changes without hiding the rest of the content...
    Am I doing anything wrong here? The Canvas is set to "Screen Space Overlay" and the size to 1080p for better layout.
     
  39. eses

    eses

    Joined:
    Feb 26, 2013
    Posts:
    2,637
    @Apolyon6k

    EDIT: seems like you are doing this already, and these seem to be the solutions available. I don't think there are any other solutions.

    A. Change it to Screen Space Camera and parent it to a GameObject and temporarily move it elsewhere.

    B. Use layer that already exist -> check out the "Layers" button in top right corner of your Unity Window, second button from right. Click "Nothing" then "UI" and you have hidden all other layers (like GameObjects).
     
  40. UDN_20c66104-c94e-4d45-a9b1-4eee18bde0b1

    UDN_20c66104-c94e-4d45-a9b1-4eee18bde0b1

    Joined:
    Aug 17, 2017
    Posts:
    1
    So, I have an issue with the Canvas Scaler that I'm not sure how to address.

    I want to build a grid of images and I want a 1 pixel border around each image. I also want Text labels.

    If I set the Canvas Scaler to Scale with Screen Size, then I sometimes lose my 1 pxl border (it is scaled out on some devices). But if I set it to Constant Pixel Size, my font sizes are not properly scaled. The region of the font is nice and dynamic, but the fontSize itself does not adjust with the Canvas Scaler.

    My first thought was to derive my own Text component that scales the font size. That seemed to work for a second, but then I realized that fontSize is not a float, which makes it very imprecise.

    What's also sad is that it looks great while I'm resizing the window by dragging the corner around, but then it recalculates the text with the font size.

    Any help would be appreciated, not sure what to do.
     
  41. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    Any solution that uses the regular Text component will have this issue. You could perhaps try using Text Mesh Pro instead; I believe is has float text size, and it's compatible with RectTransforms etc.
     
  42. Gubendran_Vins

    Gubendran_Vins

    Joined:
    Mar 20, 2018
    Posts:
    62
    Hi,

    i have an issue with my world space canvas. it is hiding by Point cloud System.I mean Point cloud system model overlay-ed on the canvas, even there is space between model and canvas.

    Please help us.

    Thanks in advance.
     
  43. OrderOfOut

    OrderOfOut

    Joined:
    Sep 21, 2018
    Posts:
    37
    I'm designing for a screen size of 2148 x 1636 (the size of my backdrop), I set the reference resolution on my canvas to that, I'm using Screen Space (Overlay), and my fields are completely off the screen somewhere. Yet they were mostly on target when the reference resolution was set to 800 by 600, for some reason. The X and Y are 1024 and 818, but it *will not let me edit the positions*. What am I doing wrong?

    I have to say, the UI Canvas is what I consider to be the weak link in modern Unity. It's confusing, seemingly buggy, and flat out unintuitive. I hope they plan on scrapping and redoing it in future iterations.
     
    Last edited: Oct 4, 2018