- Home /
Set aspect ratio in fullscreen WebGL?
Hi,
I have a WebGL build which is set up in a standard 16:9 aspect ratio. is there any way to retain that ratio when entering fullscreen mode?
For example if someone has a wide 21:9 monitor the build doesn't really feel right even if I set up the UI to adjust correctly. Is there a way to keep it at 16:9 in fullscreen no matter how the monitors aspect ratio is?
Thanks in advance! :)
Answer by MSachs · Jul 06, 2020 at 07:47 AM
If someone needs a solution for this I got it to work this way:
Add a second Camera to the scene with a solid color background set to black and its depth lower than your main camera.
Add an Aspect Ratio Fitter component to any of your canvases and set it to "Height Controls Width" and 16/9.
And add the following script I found online to your mainCamera to keep its aspect ratio always at 16/9.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class KeepAspectRatio : MonoBehaviour
{
void Update()
{
// set the desired aspect ratio (the values in this example are
// hard-coded for 16:9, but you could make them into public
// variables instead so you can set them at design time)
float targetaspect = 16.0f / 9.0f;
// determine the game window's current aspect ratio
float windowaspect = (float)Screen.width / (float)Screen.height;
// current viewport height should be scaled by this amount
float scaleheight = windowaspect / targetaspect;
// obtain camera component so we can modify its viewport
Camera camera = GetComponent<Camera>();
// if scaled height is less than current height, add letterbox
if (scaleheight < 1.0f)
{
Rect rect = camera.rect;
rect.width = 1.0f;
rect.height = scaleheight;
rect.x = 0;
rect.y = (1.0f - scaleheight) / 2.0f;
camera.rect = rect;
}
else // add pillarbox
{
float scalewidth = 1.0f / scaleheight;
Rect rect = camera.rect;
rect.width = scalewidth;
rect.height = 1.0f;
rect.x = (1.0f - scalewidth) / 2.0f;
rect.y = 0;
camera.rect = rect;
}
}
}
if you are not looking to change the aspect ratio once the game is running you could obviously put that code into void Start()
I'm having trouble with the Aspect Ratio Fitter. It says I "cannot use this Aspect Mode because this Component is attached to a Canvas with a fixed width and height". Isn't this Canvas set to scale with screen size? What should I do?
You need 2 Canvases. The parent canvas without Aspect Ratio Fitter and the child canvas with Aspect Ratio Fitter.
Like this
Answer by kimbaudi · Jul 16, 2021 at 01:50 PM
I think adding an Aspect Ratio Fitter to you Canvas is causing your Scene to be marked as dirty. Instead of add Aspect Ratio Fitter to your Canvas, create a new empty Game object below the canvas group and move the Aspect Ratio Fitter to the new empty Game object.
Your answer
Follow this Question
Related Questions
Is it possible to avoid having the escape key exit fullscreen in a WebGl build? 1 Answer
No response of UI after webgl full screen on Android 0 Answers
Change aspect ratio on fullscreen WebGL 0 Answers
Upscaling in fullscreen mode in WebGL build. How to disable it? 0 Answers
Fullscreen stretching 0 Answers