Is it possible to work with multiple Canvas elements?

UI UGUI
1

Hey all,

In our game, we have a popup system and code infrastructure to support that.

Currently, we are using a single Canvas to render all popup windows. Whenever a new popup window is shown, we take its root element and move that into the “master” Canvas element that always exists in the game scene (on top of all other elements there).

This works, but when there are many UI elements displayed, it looks like we’re paying for a canvas “rebuild” operation on every new popup launch, even though these popups are self contained and are not related to one another.

I’d like to know, whether it’s possible to use multiple Canvas elements ? we’ve seen issues with touch handling when using this approach (e.g: popups that are in the background still receive input even though they are overlaid by other popups).

Is such a scenario possible? and if so, should it give us a performance increase ?

2

Yeah, there’s no issue using multiple Canvases. Although from your solution, not sure why your not just using multiple panels (empty GO’s), rather than rebuilding the main canvas all the time (like how it’s done in the Unity UI Examples asset).

From experience though, the only real reason to have multiple canvases is if you use different canvas scalars or have different canvas rendering types (overlay / ss / worldspace).

You can also nest canvases but I’ve not experimented much with that pattern so far.

Best option is the multiple panel route, especially since you can animate the whole panel in however you like.

1 Like
3

We actually tried to use multiple canvases but it doesn’t seem to give the performance improvement i was hoping for.

When using a single canvas, every additional popup will force the canvas to rebuild itself, right? at least that’s what i thought.

Splitting into multiple canvases (or panels, as you suggest) should give a performance improvement from what i understand.

4

Yes having multiple sub panels means you only redraw for what you are displaying, so you only get 1 complete redraw cost if you deactivate one panel and activate another, unless you use animation, then the cost is balanced until the animation is finished.

You can optimise further by segmenting within the panels themselves as well, as I’ve found the redraw only occurs for the area within a RectTransform that has changed and not the entire canvas. But your own experiments will tell true. Haven’t tested the 5.4 improvements properly yet though which are meant to improve this further.

5

Could you elaborate on the panel approach? how would that work out exactly ?

6

Just download Unity’s sample UI asset pack, check the Menu Sample in there, should explain it all:

Oh and the game jam template also has some other patterns:

1 Like