Game Canvas extending outside of the game screen

[SamMurphy727]

Hey! Loved this tutorial, on the final build I had the canvas scaler initially set to Width which ended up causing the score/health UI to cover the bottom half of the screen. When I change this to Height it covers the whole bottom of the game window, even going outside the bounds of the actual game itself. Is there anything I should be looking at here to keep the game canvas elements scaled with the actual game window? Appreciate any help here!

[Nina]

Hi,

What kind of build is this? WebGL? Standalone?

The problem is that the canvas automatically adjusts itself to the game window. And we designed this game for a fixed resolution. If you need a responsive UI following your own rules, you will have to do some maths in your code to calculate the correct position for your UI elements. This is a bit challenging because you’ll have to do some research in the API.

Alternatively, you could test the “World Space” mode of the Canvas, and also the CanvasScaler.

I hope this helped.

---

See also:

• Forum User Guides : How to mark a topic as solved

[SamMurphy727]

Appreciate the help here! This is a standalone build on mac, it’s unusual because all other elements are fitting within the game but this UI element seems to scale with the actual window of the application. Apologies if this doesn’t make sense but have attached some more screenshots below. In the first two the panel element under the canvas is set to stretch in its rectangular transform:

#1 - Canvas set to match width
#2 - Canvas set to match height
#3 - Panel element in the canvas no longer set to stretch

Based on your response would it make the most sense to make the canvas UI in question to just stick to a fixed resolution? I could have missed it in the lecture but curious how it was handled as it didn’t seem t be an issue there.

Thanks for the help here!

[Nina]

In a standalone build, you could simply set the resolution of the game window at Start(). See this example in the Unity API: Unity - Scripting API: Screen.SetResolution

Based on your response would it make the most sense to make the canvas UI in question to just stick to a fixed resolution? I could have missed it in the lecture but curious how it was handled as it didn’t seem t be an issue there.

As you probably noticed, the height of your game adjusts itself to the game window. You could exploit this face if you define a minimum width in your mind. Let’s say the minimum width is 300 px.

Your last screenshot is what you could achieve this way (if you haven’t tried that already):

• Create a new game object: BottomContainer. Make it a child of the Canvas game object.
• Set the anchor and pivot point to the bottom centre of the Canvas. (No stretch mode!)
• Set the height to, for example, 40 and the width to 300 in the Inspector.
• Add two child game object to the BottomContainer: HealthBar and Score.
• The anchor and the pivot point of HealthBar is supposed to be on the left.
• The anchor and the pivot point of HealthBar is supposed to be on the right.

Theoretically, that should solve the problem.

Last but not least, if you are unhappy with the blue background, you could change the Color of the Camera component to black or a dark grey.