Currently my game occupies 100% of the screen, and HUD elements are scattered around the corners. Some of top-right, some on bottom-left, and some on bottom-right. Is there a way using which I can push the HUD elements to occupy right 10%(say) part of the screen, and remaining 90% left part be used to render the game? Something like the example below?
I could move the HUD to the right part, but then it will hide the game screen below it. Is there any way, I could reserve the right part for HUD only?
So, this may not be the Best way to do it, but you can render a Camera to a UI Object on a canvas, similar to a Minimap, Instead of just filling the players view with it. To do this, you need to make a new camera, as well as an object in your assets folder called the Render Texture, that will allow the new Camera to cast to it.
You then want to go into the new Cameras Inspector and Set that Render Texture asset to be its Target Texture
Finally, you want to create a UI “RawImage” Element in the scene. You can then set its Texture To also be the Minimap Render Texture. What You should now have is a scene that has a Texture on the canvas Showing the Camera View of the Minimap Cam. Eg:
Now you should be able to just mess with the Camera, Render Texture and RawImage Settings to get it to cover a sufficient area of the screen. (Probably set the Canvas to Scale with screen Size)
Actually, cameras have a rect struct on them to determine the portion of the viewport to render on. Measured from 0f to 1f (percentages). So you can do something like this:
Rect camRect = Camera.main.rect;
camRect.xMax = 0.9f; // 90% of viewport
Camera.main.rect = camRect;
Doing this though means that you need a second camera set up to only look at your UI with the xMin starting at 0.9f
