Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
13 Jun 22 - 14 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
2
Question by MSachs · Jun 12, 2020 at 08:31 AM · webglfullscreenaspect ratio

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! :)

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

2 Replies

· Add your reply
  • Sort: 
avatar image
4

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()


Comment
Add comment · Show 2 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image PeterDrake · May 05, 2021 at 05:20 PM 0
Share

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?

alt text

screen-shot-2021-05-05-at-101821-am.png (81.9 kB)
avatar image kakol20 PeterDrake · Jun 04 at 07:35 AM 0
Share

You need 2 Canvases. The parent canvas without Aspect Ratio Fitter and the child canvas with Aspect Ratio Fitter.

Like this alt text

screenshot-1.png (103.8 kB)
avatar image
0

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.

see https://support.unity.com/hc/en-us/articles/215620303-Using-an-Aspect-Ratio-Fitter-causes-my-Scene-to-be-marked-as-dirty

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

137 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Colour of borders after build full screen 0 Answers

How can a 4:3 aspect ratio be kept on any screen when switching to Full screen mode using Web player? 2 Answers

Program way to get fullscreen in WebGL 1 Answer

Unity 2018.2 webGL makes canvas fullscreen with any click 1 Answer

Is it possible to avoid having the escape key exit fullscreen in a WebGl build? 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges