Laser Defender - Scene bigger than viewable window

[Scott77]

In both the standalone build and WebGL build, the game scene is bigger than the viewport (or framed window). This happened regardless of wether I’d set the resolution to prefer the width or the height of the 9x16 aspect ratio.

For the Canvas of both builds, I had resolution set to 1080x1920…

…For build settings, I used X 1080 Y 1920 in the standalone and X 540 Y 960 for the WebGL…as instructed in the lecture.

The standalone, I was able to “fix” by switching to full screen then switching back to window, but when I try this with the WebGL version, the scene stays huge and goes outside the viewable area.

Are there other settings I need to adjust?

When I initially built the standalone version, this Low Resolutions Aspect Ratios box was checked. When it was the scale size was 2x. Does this affect anything?

I have since built the WebGL version without this box checked, but it doesn’t seem to help the build any, even though it does seem to affect the scaling in Unity.

Anyway, any help would be appreciated.

[Nina]

Hi Scott,

The resolution in the Game window does not have anything to do with your browser. You have to set a reasonable resolution in File > Build Settings > Player Settings, which you did. 960 might be too high for your screen. What resolution does your screen have?

And which version of Unity do you use?

[Scott77]

My computer’s resolution is 2560 × 1600, but yeah, looks like the browser takes up some of that vertical real estate.

I got better results with 480 x 854…but I might play around with it more.

I’m curious, though, how will my settings affect others that I share this with? Will they be restricted to the low resolution I set it at, or will it scale up for them?

I thought the reason we set the Canvas to favor width or height (as well as set anchors) was so that scene would accommodate various screen sizes. Or does that only work if all the screens can meet a minimum resolution?

Thank you your help, Nina!

Oh, and I’m using Unity 2021.3.3f1 LTS. There are more recent updates, so I could get a more recent version.

[Nina]

@Scott77

Will they be restricted to the low resolution I set it at, or will it scale up for them?

The resolution is fixed. If you want to allow a lot of people to play your game, you’ll also have to take smaller screens into consideration. My resolution is 1920 x 1200 but I have devices with smaller screens.

I thought the reason we set the Canvas to favor width or height (as well as set anchors) was so that scene would accommodate various screen sizes.

You are right. However, that does not affect the container of the webpage in which your game is running. The default WebGL template, which can be selected in File > Build Settings > Player Settings, comes with the blue button you can also see in your screenshot. It adjusts the container to the window size of the browser. The game scales automatically.

Test that and play your game. I’m sure you will notice a problem after a few seconds. If you want to challenge yourself, you could try to solve it. It’s not that difficult.

Hint: The clamp values must not refer to the edges of the screen/window but to the edges of the background image. Look the SpriteRenderer up in the API to figure out how to get information on the position or dimension of the bounding box.

[Scott77]

I see. Thank you, Nina!