How would you organize UI in editor?

Unity Engine
1

Supposing you are developing a 3d game with these systems:

  • inventory - with organizer buttons, like “All”, “Weapons”, “Crafting Materials”, “Food”, then different items appearing based on context

  • crafting - showing recipes and their requirements, and showing messages like “not enough wood”

  • pause menu - containing buttons like save, quit, preferences

  • preferences submenu - as in, below the pause menu

  • map

  • minimap

When I tried developing UI in the editor for my game, it got EXTREMELY messy, and bugs just started popping up as the complexity increased.

How would you organize your UI to reduce complexity and bugs, yet enable multiple pop-up screens that partially cover your game screen. Would you use something from the asset store?

2

There are really no “right way to do it” since it depends on the project you’re doing.

Personally, I made a framework for handling UI, I arrange everything into MainView objects and the view objects are then positioned along side each other in edit mode. Each MainView represents a screen in the game, I use that for overall stuff like menu’s, loading settings and so forth, that comes to around 10 - 15 main views all together.

in order to not mix and make a mess of the code, I replicated the way Mobile SDK’s (iOS & Android) that way I can push and pop views of different types into a stack. I also tie that into a small statemachine framework to ensure that no views gets displayed that isn’t allowed. That eliminates some errors that sometimes could occur while developing.

I also make one class called a MainViewController that each mainview, that will help to not mix the code for the different views- I try not to mix the code and the references because that allows me to easily control which information flows between the views. I send information between the views using SendMessage with a parameter object.

When it comes to the stuff being shown on the view i group them together in groups that makes sense. I make sure that the scale to fit as many funky resolutions as possible by tweaking the layout , i made some tools to setup layout for these objects in a more specific matter than unity provides.

For the widgets I make specific Widget classes like, MiniMap, that would have its own widget class. Often I make a testcase for that single widget and put it into a prefab so that I can share it between the Testcase Scene and the main scene that contains all the UI.

All of this is mainly for mobile games, but I would still use the same approach for other types of projects.

Cheers Crispy.

1 Like