Unity 3D Editor Workflow for UI-Heavy Games

Working on Startup Freak game has been a unique challenge in terms of the amount of UI it requires. As I have previously mentioned, the new Unity UI really does make life a lot easier than the previous alternatives. I have also started to find a better workflow which works for me, though to be fair I haven’t tested this long enough to know if I’ll hit some limitations.

For this game I am keen to use the camera-space UI canvases heavily, in order to take advantage of some interesting rotation and animation. I began with having multiple canvases, one for each of the major UI areas. These are things like:

  • Employees – where you can hire and view your employees
  • Product backlog – where you can decide what actions you are going to take on during a sprint
  • Mailbox
  • Shopping store

All of these were using the same camera for rendering. That works perfectly fine, however it makes the editing experience a bit of a nightmare. Here is what the Unity editor looked like:


All the canvases are laid out on top of each other making it very hard to design anything. I constantly needed to disable/enable the canvases.

The easy alternative is to use a separate camera for each of the canvases. Since the canvases are not rendered in world-space, you can move the cameras anywhere in the scene:


Ahhhh, much better. Now I can focus on each canvas and edit it separately with messing with visibility.

Note that the above really only makes sense for camera-space canvases.

A Note About the Camera Setup

These hints probably goes without saying but in case you’re new to Unity:

  • Ensure you have assigned all Canvases to the UI layer
  • Ensure the cameras’ Culling Mask is set to UI
  • Ensure the cameras’ Clear Flags is set to Depth Only
  • Remove all unwanted scripts like the Audio Listener and Flare Layer from your UI cameras as they only really make sense for your main game camera.

That should allow correct rendering of the UI on top of your game content

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s