Let me provide an image to illustrate what I mean. It is from a game called Runescape.

enter image description here

  • 1
    \$\begingroup\$ I feel this question may have a few issues that render it off-topic for game dev. Asking for the most efficient is not as bad as asking for the best, but you still might find that the answer comes down to opinion (including opinion of what is easier, and what looks better). You also have the massive "what are you actually asking" problem. Runescape is an MMO. It has a very unique UI that represents its very unique mechanics. To understand the most efficient way, we need to know what we are including in the UI; and that is an entirely different ballpark, all together. \$\endgroup\$
    – Gnemlock
    Jan 27, 2017 at 22:50
  • \$\begingroup\$ In contrast, we could answer this directly with "use a canvas"; have you looked into UI with Unity, before? \$\endgroup\$
    – Gnemlock
    Jan 27, 2017 at 22:52

2 Answers 2


Like most things in Unity, there are many ways to skin this cat depending on your game's needs and your preferred workflows.

So, to narrow things down, I'm going to focus on one specific issue: rendering efficiency.

In the example you've presented, the 3D game view occupies only about 2/3 of the frame's width or height, with the rest occupied by opaque UI. If we were to render the game across the whole window, then layer the UI on top, we'd end up covering over half those pixels - so we would waste a lot of our frame time (and battery, on mobile) rendering content the player will never see.

To fix this, we can set up our 3D camera so it renders into only the screen pixels we want. We can do this using the Rect property of a camera (called "Viewport Rect" in the inspector), which lets us specify the horizontal and vertical fractions of the viewport the camera should render into. That way we skip rendering to areas of the screen that will be covered over (and the camera's center of projection will automatically align with the middle of the viewport, as expected, rather than the center of the screen, making the viewport appear subtly skewed)

Then we can layer UI over the whole screen using a canvas set to screenspace overlay.

As examples, you can see this answer about multiple projections or this answer's animations, which were accomplished using this viewport trick to render each view to its own designated rectangle of the game window.

If you need to do something a bit fancier - say, having the game viewport in a window element that can float around your UI, or cropping the game view to an unusual shape, you can accomplish this by creating a RenderTexture of your desired resolution for your camera to render into (using its targetTexture property), and then referencing that RenderTexture in a UI RawImage component, to be able to manipulate or animate the rendered view similar to how you would with any other UI widget.


I would suggest to have two cameras :

The first one to render only the game view by modifying the rect of the camera : https://docs.unity3d.com/ScriptReference/Camera-rect.html

Set it to something like :

camera.rect = Rect (0, 0.2f, 0.8f, 0.8f);

Then, create an other camera used to render an overlay canvas, and make sure all your elements are outside the rect given above.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .