Combine Canvas Screen Space Overlay with Screen Space Camera

[mrCharli3]

I want to create an inventory with a character preview like this:

The only way (as far as I know) to put a prefab of your character in the UI is to have the canvas be ‘Screen Space Camera’. However, all of my other UI is built on ‘Screen Space Overlay’. Is there some way I can combine the 2 to create a UI like in the image? Or do I somehow have to rework my UI to make all of it work with ‘Screen Space Camera’?

[dadude123]

You can keep the SSO canvas as it is.
In unity you have extremely little control over how the UI is rendered, but it’s still possible to do this.

The setup might be a little complicated but it is still pretty efficient:

You have another camera rendering a separate layer (in this example only Link + some items).
Let this camera render to a render-texture you dynamically create (should be the exact size you need).
The create a simple UI Image and assign the rendertexture in a material to it.

Play around with the clear flags, camera fov etc until you get what you’re looking for.
IIRC there are a few unity games that use this exact technique as well.

[mrCharli3]

@dadude123

You can keep the SSO canvas as it is.
In unity you have extremely little control over how the UI is rendered, but it’s still possible to do this.

The setup might be a little complicated but it is still pretty efficient:

You have another camera rendering a separate layer (in this example only Link + some items).
Let this camera render to a render-texture you dynamically create (should be the exact size you need).
The create a simple UI Image and assign the rendertexture in a material to it.

Play around with the clear flags, camera fov etc until you get what you’re looking for.
IIRC there are a few unity games that use this exact technique as well.

Thanks, do you know of any documentation that could help me get started with this?

EDIT: Might have found something https://unity3d.com/learn/tutorials/topics/graphics/render-textures-and-ui

[dadude123]

@mrCharli3

Thanks, do you know of any documentation that could help me get started with this?

EDIT: Might have found something https://unity3d.com/learn/tutorials/topics/graphics/render-textures-and-ui

Yes that’s exactly the method I meant.
Having a transparent background might be a little more difficult in some cases but it’s definitely possible.
If all fails you can GL.Clear manually.

[mrCharli3]

@dadude123

Yes that’s exactly the method I meant.
Having a transparent background might be a little more difficult in some cases but it’s definitely possible.
If all fails you can GL.Clear manually.

Already have it working just the way I want thanks for your help!

I guess the only issue is that I have to change the characters direction now when I open inventory, so that he faces the camera (working in 2D).

[umaradil]

hi i am using another canvas with (screen size camera) for inventory but it is not getting fit for every screen size resolution
how can i set canvas with (screen size camera) for every screen size ?

[a436t4ataf]

@mrCharli3

Thanks, do you know of any documentation that could help me get started with this?

EDIT: Might have found something https://unity3d.com/learn/tutorials/topics/graphics/render-textures-and-ui

Top hit on Google. And Unity’s web team being the lovely people they are decided to delete that URL and replace it with a redirector to their front page. It hurts. I wish they would grow up and stop doing this.

I’m trying (and failing) to get Overlay canvas’s onto a render-texture, without breaking Unity’s EventSystem - could someone who’s done this provide some guidance? (I can get camera-canvases to render fine, but that breaks ES and means I’d have to change every canvas everywhere. I can get overlay-canvases to work on their own, and I can grab them in OnRenderImage, but OnRenderImage has its own bugs that makes it problematic. Finding the combination of all this - to do the core stuff that the API’s are supposed to do - is proving elusive).