UI Canvas – Unity Official Tutorials

UI Canvas – Unity Official Tutorials


The canvas is a component that controls how a group of UI elements will be rendered. All UI elements must be children of a canvas. It is possible to have more than one canvas in a scene. But to use a UI element there needs to be at least one available canvas. If a new UI element is created and no canvas exists a new canvas will be created and the new UI element will be attached to that canvas as a child. Each canvas has a number of different possible render modes. The render mode can be set by using the Render Mode pop-up menu. Scene Space – Overlay is the most common render mode and it is the default render mode setting for a canvas. With Screen Space – Overlay selected the UI will overlay the scene. And all of the UI elements will be drawn on top of
everything else rendered in that scene. In this mode the canvas will fill the screen automatically and will resize automatically if the screen settings change. It is worth noting that in Screen Space – Overlay mode the canvas will drive the Rect Transform component. And the entire rect transform component is uneditable. The canvas will set all of the values in the rect transform to fill the screen automatically. For more information on the rect transform component please see the information linked below. This render mode has the option of Pixel Perfect. When Pixel Perfect is selected UI elements will be adjusted to the nearest pixel when they are rendered. Which can, in some cases, sharpen the look of the UI element. Screen Space – Camera is very similar to Screen Space – Overlay. It is, however, rendered by a specific camera in the scene. This will allow camera-specific settings to be applied to a screen space UI. The most common being the use of a perspective camera to give the UI a feeling of depth. In this mode the canvas will fill the camera’s viewport automatically and will resize automatically if the camera’s viewport settings change. In this render mode the rect transform is also being driven entirely by the canvas. This render mode has several options, including Pixel Perfect, which acts just the same as in screen space – overlay. Render Camera is for setting the camera that will render the UI elements on this canvas. If this is none, the canvas component will use the screen space – overlay settings to render this canvas. When Screen Space – Camera is selected and a camera is assigned to the canvas component the UI elements will be moved in to the camera’s frustum and resized to fit. This allows for the UI to be rendered relative to game object in the scene view. To control where in the scene the UI elements will be rendered use Plane Distance to move the canvas closer to, or further away from, the camera. The canvas and it’s UI elements will be automatically resized to fit the frustum based on their position in front of the camera. It is worth noting that the plane distance must be within the rendering camera’s near and far clipping planes to be rendered. When using Screen Space – Camera the canvas can be rendered by any camera in the scene. To isolate a canvas and it’s contents from any other cameras rendering the scene use the camera’s clear flags culling mask and depth properties. For more information on how to use these camera properties please see the information on cameras linked below. Render Mode World Space renders UI elements in the scene volume. These UI elements could be static objects in the scene or mobile objects like speech bubbles or player tags that follow game objects in the scene. The first thing to note about a canvas in world space mode is that the canvas no longer drives the rect transform and the canvas can be set anywhere in world space. With the understanding that there can be more than one canvas in the scene it is not uncommon to go create new world space canvas’ as necessary for world space UI elements. Event Camera is required to received events and determine which camera will be used to detect events like clicking on a UI element. In most cases, with screen space world selected this event camera will be the camera rendering the scene. Receives Events indicates whether the UI elements on this canvas will receive events like clicks and hovers. Disable this property to ignore events on all UI elements that are children of this canvas. Sorting Order and Order in Layer are for controlling the render order of the canvas when compared to other renderers in the scene. Sorting Order and Order in Layer are exposed on the canvas component and are available for canvas’ set to either screen space – camera or world space. For more information on Sorting Layers and Order in Layer please see the information linked below. UI elements on a canvas will be rendered in a top-down order, where the first items are rendered at the back and lower items are rendered later and appear on top. To change the order in which a UI element renders simply change it’s order in the hierarchy

37 thoughts on “UI Canvas – Unity Official Tutorials”

  1. When I right-click on hierarchy I dont have that many options :S

    EDIT: I guess it will come out with 4.6 version, yes? So why the heck you upload a tutorial series and put it in your website if it cant be used yet?

  2. This sounds like Adam Buckner from Unity's Live Training sessions, however the dry delivery of this scripted content has led me to believe that he has in fact been turned into a zombie.

  3. How to change order of UI elements in hierarchy during runtime without having to play with parenting? (eg: you have 2 windows overlapping each other and you want the last selected window to stay on top) 

  4. Pannel scales when changing screen size but button won't do, why? (Button is correctly placed as child of pannel so I don't understand)

  5. Maybe this isnt meant for those of us without the money to go pro.  I cannot get anything to work the way it is explained in the video.  The canvas does not snap to the camera view. I have not been able to replicate some things explained.  My canvas does not line up with the main camera and does not rescale.  I;ve been at this for a few hours now and am very frustrated. I can create a scene fine, but this tutorial does not work for me. v4.6.of3

  6. Wow!! I can't believe people do not like the narration of this video 🙁 He is right on the point, never puts in extra words and sentences that would be confusing. He says what needs to be said in as few words as possible. For me, this is the best possible way to explain how to do something. You can not be confused by extra un needed speech. I am here to learn, not to be entertained or confused!
    You want the Opposite kind of narration of these videos, then search UMA Unity and watch Fernando Ribeiro videos. I can make little sense of any of them.
    Conclusion, if you are here to learn, I think the presentation in this video is about as good as it gets.

  7. Good information. Though I don't know if the tone of robotic disinterest and light condescension was intentional. Please update to HumanVoiceEmulation 2.0 please.

  8. Fuck you unity. Fuck your videos; Fucking make text version of official tutorials you lazy unprofessional bums.

  9. To be honest this video was helpful, but i wish they would make the commentary less boring. Im not insulting the guy narrarting, but like i said "i wish"

  10. I have a question.. Im trying to do the toturial 
    http://unity3d.com/learn/tutorials/projects/roll-a-ball/displaying-text      
    But when i try set up text, the canvas is so far away from everything. It doesnt have the same positions numbers as in the video, and here they say i cant change them.. What can I do to get it near the center, so I can use it..

  11. How do I instantiate the canvas? When I make the canvas into a prefab, I lost many components or script. How do I solve this?

  12. I can´t preserve the aspect ratio of my images…..   in example, in the minute 1:04 you change the aspect ratio and your images fit the view, that does not happen on mine, when i change de aspect ratio, my image gets out of bounds.. what could it be?..  (i´m using screen space overlay)  Thanks..

  13. Damn, listening to this tutorial makes me sleepy. Do you not like making this tutorial? You don't sound very enthusiastic about it

Leave a Reply

Your email address will not be published. Required fields are marked *