I created a game that, when I play it in Unity, looks like this:

enter image description here

But when I build it in WebGL, the rightmost part of the screen (with the red player character in it) is truncated:

enter image description here

Play it in-browser on itch.io to confirm. It looks the same when I open the HTML file locally, so the problem is with the WebGL version and not with itch.

Only when I click the "full screen" button, the rightmost part is shown.

What am I doing wrong?


1 Answer 1


Your WebGL export is using a different aspect ratio than the one you're using in your editor.

The WebGL viewport is 960x600, an 8:5 aspect ratio, where the width is 1.6 times the height.

Your editor viewport is 650x366, so the width is 1.776 times the height.

By default, Unity scales the view to preserve the vertical axis, so you see the same height of your scene in both views. But because your editor view is wider, you're able to see more off to both the left & right sides.

So, some possible fixes you can use:

  • Change your export aspect ratio / target resolution to reflect your intended cropping.

  • In the Resolution drop-down at the top-left of your Game window in the editor, choose the resolution or aspect ratio you intend to build for, so you can design your scene with the final cropping in mind.

  • Add a script to your camera to adjust the vertical extents, rather than the horizontal extents, or add letterboxing/pillarboxing to match to your desired aspect ratio even when the screen/browser window is a different shape.

  • \$\begingroup\$ Indeed, when I open Build Settins and click on Player Settings, I can see under Resolution and Presentation that the default canvas width is 960 and height is 600. I can change it manually, but is there a way to make these settings automatically adapt to what I see in the editor? \$\endgroup\$ Commented Jun 15, 2020 at 8:57
  • \$\begingroup\$ What you see in the Editor can change every time you nudge a window around, so I would not consider that to be a good way to indicate your target resolution. \$\endgroup\$
    – DMGregory
    Commented Jun 15, 2020 at 10:10

You must log in to answer this question.

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