I’m currently developing a 2D tycoon/clicker/idle game in Unity. A key feature of the game is that players will frequently navigate between various “pages” in the UI. These pages will contain different gameplay elements, making fast and seamless transitions between them essential.
I’ve been exploring various ways to structure the UI and have narrowed it down to four possible approaches:
Single/Main Canvas with Multiple Panels
A single Canvas containing multiple Panels, where each Panel represents a page. Pages are shown or hidden by toggling the visibility of their respective Panels.
Multiple Canvases
Each page is assigned its own Canvas, and the active Canvas is toggled during navigation.
Single/Main UIDocument with Multiple Pages
Similar to the first option but using the new UIToolkit and a single UIDocument that contains multiple pages. Pages would be shown or hidden programmatically.
Multiple UIDocuments
Each page is implemented as its own UIDocument using UIToolkit, and pages are toggled during navigation.
My Considerations:
Performance: I want the pages to switch quickly without introducing noticeable delays.
Memory Usage: I’m mindful of how having multiple elements loaded simultaneously could impact memory.
Ease of Management: The UI structure should be easy to manage and scale as new pages are added in future updates.
Specific Questions:
Which of these approaches would you recommend for a game with many pages that require frequent and fast switching?
Are there significant differences in performance or memory usage between using Canvas and UIToolkit (with UIDocument) for these scenarios?
Are there other design patterns or best practices I should consider for handling a UI with multiple pages in Unity?
I’d greatly appreciate any insights, advice, or experiences you can share. Thanks in advance for your help!
I would DEFINITELY use the new UI Toolkit for a UI heavy game because it makes soooo many things so much easier to work with. Even if you never used it before and have lots of experience with UGUI it’s still worth trying out UITK for at least a couple days to see how much it can help your process.
Most importantly, UITK offers data binding so you can just hook up UI Elements with your data model and they’ll automatically show and modify the values in the data set.
This sounds like a use case for a tab view. Even if there are no tabs, just buttons to toggle next/prev it would be sound to explore how tab views work and use that. For UITK you can inspect the code of the TabView.
None of the options have a clear pro or con going for them, including memory usage. We’re talking about a few megabytes of memory at most.
Another reason to go with UITK because you can easily template UI documents and use them in other documents to hierarchically design your UI, from individual elements through panels up to the fullscreen UI it’s just a hierarchy of UI document assets.
With UGUI you’d have to do that using prefabs and we all know how cumbersome this can be when you forget to “apply overrides” and such. Also, UGUI prefabs in and of themselves commonly don’t represent their final looks when embedded in a canvas.
I always hate when developers don’t put in the extra effort to make UI stateful. Particularly when navigation with gamepad is intended. Most common example is with classic vertical menus where you have a navigation highlight that tells you that you’re “on” the settings menu item. Now if you enter settings and leave it, I want that highlight to be on “settings” again, not reset to be all the way at the top.
Same with paged navigation. Say you’re on page A and have textfield T highlighted and the UI is navigated with gamepad. Now when I switch forth to page B and back to A I want that highlight to remain where it was. Not necessarily for the mouse though since it’s inherently fast to navigate anywhere with the mouse.
Also any data change must be instant. If I enter a value in a text field without leaving the field or pressing a confirmation button but directly navigate to page B and back, I want the entered value to stick and not be reset to the previous value just because I didn’t hit “enter” (figuratively).
I can only talk from my experience with ugui (Canvas), I’ve been using it ever since it launched. In my case, I’ve used both single-Canvas and multi-Canvas
a single main Canvas and multiple panels has worked great for simple cases. it keeps everything in one place, and I can just toggle panels on and off depending on which “page” the player is on
in more recent years I tended to separate a project, even if it’s a small one, into more scenes (unity scenes) , like main menu, settings (loaded/unloaded as additive scene), lobby scene, game scene etc., and each of it will have its own canvas. it worked beautifully for me. you often also need multiple canvases in the same scene, for various reasons (layering, worldspace temporary ui etc.). I often also had a “global” canvas that had DontDestroyOnLoad called on its gameobject, with stuff that every scene will need, but even that can be easily replaced with an additive scene that you load/unload on-demand
I just like how ugui reuses the whole gameobject concept and almost everything that applies to gameobjects can apply to ui elements too (for example, using dotween to effortlessly animate both 3d objects and a text on a button)
Btw, if i use UITK like a UGUI (each button etc will be a separate document), will this work out or be worse for performance and no sense comparing to UGUI?