I’m using Unity 4.6 (I know, I know, upgrading to 5 is on my to-do list), and trying out the new UI system seriously for the first time in a new project. I want to make sure I correctly understand the intent and limitations of the new system.
I have several GUI boxes on the screen. On the right is a score box, consisting of a background image and three texts. On the left there is a turn/move counter: background image plus two texts. And there are a couple more like this.
I’m building this with a Canvas for each box, and within the Canvas, an Image and however many Texts I need. Makes sense, right?
But I was surprised to find that I can’t (apparently) move or scale the Canvas. If I decide I need to move, say, my score box from one place to another, I have to independently move each of the children of that Canvas. I thought I’d be able to just grab the Canvas and manipulate it, but while it does show Transform and Scale widgets in the scene view, they appear to do nothing. There is a Rect Transform on the canvas, but all the values are disabled (not editable).
This is probably either because my canvas is set to Screen Space - Overlay (because I want to be sure it draws on top of everything else), or because my UI Scale Mode is set to Scale With Screen Size (because I want it to adjust to different screen sizes). But even so… having to move the children individually is a pain. I don’t see why the canvas can’t move/scale in design mode, and then adjust itself to the screen at runtime mode. Am I missing something?
You could just use a single Canvas. Inside that, you’d use Panels with layout groups (either horizontal or vertical.) You can specify where those panels would sit inside the canvas. The canvas itself is not supposed to be moved.
As an example: If I want to have my score display in the top right with a margin, I’d add a panel, set it to be at the top right, then set the margins so that it would have them at the right and top, and then add any content as children of the panel.
And you can use any GameObject for this kind of grouping, not even necessarily a “panel” (which is itself really only a GameObject with an Image component on it). Just parent your groups of things that should be moved together to a common GameObject, and then move that around.
Right. I tend to always use “Panel” because the name fits, then immediately remove the Image component and add the layout group component
I should probably go and make some editor scripts to make it easier and quicker.
Here here on that one! Nice comment @Claytonious
You are completely right. For most situations you only need one canvas (unless it’s a world space canvas).
For ScreenSpace Canvases you cannot resize the parent / top level canvas, however you can resize child canvases (but you should only use those if you intend to use different Canvas Scaling modes)
For everything else, just use child empty gameObjects which work almost exactly like the “Grouping/Area” behaviours of the Legacy GUI.
Thanks, everyone. I see my mental model wasn’t quite in sync with reality here. And indeed for my purposes, each conceptual panel (in my mental model) really does have a background image, so Panel might be exactly what I want.
Yeah, an image is just a component (like everything else in the new UI system), just add to a GO and off you go
(just can’t have multiple graphical elements on the same GO, for that use several GO’s either as siblings or parent/child)
A Panel UI Control is just a GO with an Image component added, with it’s Anchors Set to Stretch. (actually panel isn’t a control at all, just a template )
An Image UI control is a GO with an image component added, with it’s anchors set to Center.
Just to follow up, for posterity: this morning I reworked everything as described above. I created one Canvas object called “UICanvas”, and then used either an empty GameObject or the Panel prefab (a GameObject with an image) for each conceptual panel that I had previously implemented with a separate Canvas.
After adjusting the size and anchors of each of these grouping objects the way I wanted them, I just grabbed all the UI objects that were previously in their own canvas, and dragged them into the new grouper. It was quite painless, and I feel my UI organization is a lot cleaner now.
