Attaching a canvas for each UI composition is ok? (144546)

[BigChoTrain]

I think there is no way to manage depth at runtime except for chaning sorting order at Canvas.

so I make each ui composition attached a canvas for it and also make it into prefab for instantiating as I want.

is it ok to use canvas like it?

[Immanuel-Scholz]

The canvas is ONE way of sorting your UI. The other is, to manipulate the order of the objects in your Hierarchy window (use Transform.SetSiblingIndex from scripts, e.g. when creating new UI elements on the fly). The canvas gets rendered from top to bottom, so any object in the hierarchy window that comes after any other will be drawn in front.

In your example screenshot, “Panel” will be behind “Image” and “Text”. While “Image” will be behind “Text”. “Text” is in the front, because its the one in the bottom of the Hierarchy view. If you would want, say… “Text” to be behind “Image”, you need to move it above “Image”.

There is another impact of having a seperate canvas to consider: Each canvas will be a separate draw call to the graphics card. But on the other hand, a canvas only needs to be rebuild its vertices if anything within this very canvas changes.

So when should you use which method?

• If you cannot re-order the hierarchy to achieve your sorting, e.g. because you want parent/child relationships to have UI elements move/scale with others, then you are stuck with using multiple canvas. In your example, its quite hard to get “Text” rendered behind “Panel”, as it probably NEEDS to be a child of “Panel”. Hence, you cannot use Hierarchy sorting for this.
• If some part of your UI changes very frequently and they need to be before/behind some other cluster of UI controls anyway, put these into its own canvas (e.g. overhead health bars whose position is set every frame) and adjust before/behind stuff with the sorting layer.
• Other than that, use the same canvas and reorder by hierarchy to save batch calls.