Please add a "constrain aspect ratio" setting similar to UE4

Feature requests
1

In UE4, there is a setting called “constrain aspect ratio” for the camera, which makes it so that the aspect ratio (16x9, 4x3, etc) of your rendered viewport is preserved no matter what ratio the device is using. It will display black bars on either top/bottom or left/right if the device’s ratio and viewport ratio don’t match up. Here is a video showing how it works (video starts at 2:46):

I see the fovMode on the camera has FOVMODE_VERTICAL_FIXED and FOVMODE_HORIZONTAL_FIXED, but I think it needs a third option, FOVMODE_BOTH_FIXED.

If I use the vertical mode and width is smaller than height, then the left or right sides get cut off. If I use the horizontal mode and height is smaller than width, then the top or bottom will get cut off.

I’d like an option where no matter what width and height device the user may be playing on, the bounds of the game will always look the same.

2

Yep this is not something we support so far. Interestingly we were discussing that with @bghgary and @PatrickRyan as glTF also defines a constraint for camera on aspect ratio.

4 Likes
3

In the meantime I made a function that works for my needs. I just resize the canvas based on window size:

    function resize() {
      let winWidth = window.innerWidth;
      let winHeight = window.innerHeight;

      let aspectRatio = 1.777777777778; // 16:9
      let heightTimesAspect = Math.round(winHeight * aspectRatio);

      if (winWidth <= heightTimesAspect) {
        canvas.width = winWidth;
        canvas.height = Math.round(winWidth / aspectRatio);
      } else {
        canvas.width = heightTimesAspect;
        canvas.height = winHeight;
      }
    }
3 Likes