koobas.hobune.stream
How do I get black bars top and bottom in webGL fullscreen ?
TL;DR version: I want fullscreen mode in webGL on a 4:3 monitor to NOT CROP the sides of the game, but instead put black bars top and bottom.
Longer post: My project's main size is 1620 x 1080 and I export to webGL.
The webGL default size is set to be a smaller window in the web page, 1024 x 633.
Camera is orthographic. Size 5.4. View rect x0, y0, w1.1, h1
When I go to FullScreen mode (using the default template's button below the game window) if I am on a 1920 x 1080 monitor, the game displays maximized to the height of the screen, and there are black bars on the left and right. This is OK. I want this to happen.
Now the problem: When I test on my 4:3 monitor which is 1280 x 1024 and go full screen, the game maximizes height to 1024, and the width is then CROPPED out, so parts of the game are not visible.
In both examples, the screen height appears to be what the game uses. I want the the screen WIDTH to be used, so that there are black bars above and below the game on the 4:3 monitor, instead of cropping. It should never crop!
In summary, the game is scaling based on HEIGHT rather than WIDTH. Is there a simple way to edit this fullscreen behaviour? Is there somewhere I can set "use width" instead of "use height"?
I've seen some out-dated hacks on controlling the camera aspect ratio, but I'm not sure that's the solution.
TL;DR version: I want fullscreen mode in webGL on a 4:3 monitor to NOT CROP the sides of the game, but ins$$anonymous$$d put black bars top and bottom. On a 16:9 monitor, it is already correctly putting black bars on the left and right by default. The issue is that the game is scaling based on HEIGHT rather than WIDTH.
The solution is to detect that fullscreen mode has been activated, and then resize the camera to fit the width rather than height, based on aspect ratio.
Detect fullscreen, then call your method for setting a new camera size:
void Update()
{
if(Screen.fullScreen != lastFullscreenState)
SetNewSize();
}
