Forum rules - please read before posting.

"Auto Correct UI Dimensions" and letterboxes

edited February 2020 in Technical Q&A

First of all, thank you for adding new "Auto Correct UI Dimensions" component to AC. I've been using it lately on Unity UI buttons and menus.

I was wondering about something. In the Version 1.70 post it reads it can account for enforced aspect-ratios (which I'm using).

Does it also account for screen areas with letterboxes? Unity UI menus are appearing behind them.

Some details on setup:
"Force aspect ratio?" is checked under Camera Settings to have the game display in 16:9 aspect ratio (1.7778).
I followed the tutorial here to add a "Screen Resolution Option".
It works great to get available resolutions and change them according to the monitor. Things get tricky though as it also has non 16:9 aspect ratios, like 640 x 480 (4:3).

Letterboxes appear for 4:3 aspect ratios like 640 x 480 -- though a Unity UI button/menu anchored to the bottom left corner, for example, will vanish. My understanding is because it's anchored to the corner and moved downwards (further than a 16:9 resolution would be) to account for the 4:3 resolution (slightly taller/deeper than 16:9):
https://imgur.com/a/0jgKhSV
(Note: image shows the very left-hand side of each screen)

Along with my own UI icon in the top-left, I tested AC's included UI prefab "InGameUI" (the small black button anchored to the lower-left corner -- which also vanishes when switching to 640 x 480. They both have the "Auto Correct UI Dimensions" component, and I've attempted to set my own UI up based on these included UI prefab examples.

Based on my understanding so far, here's an illustration of what it appears to be doing in 640 x 480. The dotted lines are where Unity appears to view the corners to be, and the red boxes are the UI buttons being anchored there:
https://imgur.com/a/cwRkgTZ

I can provide more details on my Unity UI, though first just wanted to understand if the "Auto Correct UI Dimensions" component currently accounts for letterboxes, or not. Also wanted to provide an example from AC's UI prefabs that can potentially be replicated if needed.

Thank for you any assistance that can be provided. It is appreciated.

Comments

  • Does it also account for screen areas with letterboxes?

    Yes - if letterboxes are being drawn as a result of an enforced aspect ratio in the Settings Manager, then the component should rely on the "visible" portion of the screen, and not the whole window.

    It's best to just look at the default InGame menu first, since we both have access to that, to make comparison easier.

    The default UI prefabs have been updated to work with this, but these are separate to the Demo game's set. Try creating a new set of Managers/UI prefabs using the New Game Wizard. Enforce an aspect ratio in the Settings Manager, and run a fresh "AC" scene. You should find that the InGame Menu (and Inventory) react correctly to the letterboxing/pillarboxing.

    If not, what Unity version did you download from, as that will affect which AC package you got. Let's also see screenshots of your AC-generated InGame canvas prefab's full InGameUI and Panel GameObject Inspectors.

  • edited February 2020

    Thank you for the information. It helps me understand how the "Auto Correct UI Dimensions" works.

    Using Unity 2019.2.1f1, with AC 7.20.4.
    I've been attempting to keep up to date by first seeing if a new AC release is available, then downloading the newest Unity release (if one's available), then updating AC to the newest version.

    Yes, the UI prefabs I was looking at and were using are the default ones in their own "UI" folder -- not the ones from the demos. The ones I used in my previous post all had the "Auto Correct UI Dimensions" component attached.

    As you mentioned doing, I created a new project, and added the "InGameUI" to test it.
    I checked "Force aspect ratio?" under Camera Settings with a 16:9 aspect ratio (1.7778).

    Also re-created the Screen Resolution option using the AC tutorial:
    https://adventurecreator.org/tutorials/adding-screen-resolution-option

    And as you mentioned, "InGameUI" does re-position to each screen size ratio correctly.

    However, I'm still attempting to understand what I may have done any differently in my game that it displays Unity UI elements differently.
    I remember starting out by creating a new game following the AC 2D game tutorial video.

    I also tested the Camera settings by setting them to be the same in each project (same in both my existing game project, and the fresh new-game project just created to test the "InGameUI" prefab).

    The only difference I can think of (from the AC "Screen Resolution" tutorial) is that I'm using a custom created Unity UI "Options" menu (and an added "Resolutions" button), instead of an AC source menu like the "Adding a Screen Resolution option" tutorial used.

    Though I recreated this Unity UI menu button too, and got the same result where the "InGameUI" prefab vanishes at a 640 x 480 (4:3) resolutions, etc.

    Since the "InGameUI" test worked, unsure if screenshots showing that are needed at this point as I didn't change anything with the prefab. It may be best to solve that mystery with the " "InGameUI" first -- though I can supply more from my own game's UI as needed.

    Any extra advice is greatly appreciated!

  • edited February 2020

    Correction: it is Unity 2019.3.1f1

  • edited February 2020

    I was a little confused about how the "Auto Correct UI Dimensions" script works. I had a little trouble getting to do what I needed.

    Making sure the UI is always in place whether the window is either wider or narrower than my forced aspect ratio.

    I ended up using the Unity's "Aspect Ratio Fitter" component and modified AC's "Auto Correct UI Dimensions" script.

    Maybe you could find it useful. Just attach the script on your menu's canvas and set your aspect ratio inside the script under aspectRatio variable. Default is 16:9. Leave that "Aspect Ratio Fitter" component as it is.

    I'm not sure if I can share it here publicly as it contains part of the original AC's script. I'll send it to you via PM.

    Edit: You could modify the script so it's uses AC.SettingsManager.AspectRatio instead, so it takes data from just one place.

  • Thank you @Keks . I appreciate that. Will give it a shot soon here.

  • @Keks: If you've found an issue with the component, please share details so that I can look into it.

    @heyitsjayy: The method by which the resolution / aspect ratio is set should be unimportant. If your own Menu doesn't re-position, but the default InGame menu does, it sounds like the issue is with the Menu.

    Your first screenshot above suggests that you're still using the InGame menu though. If you place both this prefab, and a fresh one created with the NGW, into the scene, is there any discernable difference between their root Canvas and RectTransform boundary Inspectors?

  • edited February 2020

    Thank you for the tips!

    Let me help clarify a bit:
    I added the "InGameUI button" button prefab from AC just to test an official prefab -- and see how it resized with the new "Auto-correct" component in different dimensions. My game isn't actually using the "InGame Menu" button.

    I created the Inventory "bag" button at the top-left of the screen in Unity UI (which I'm actually using in my game). Attempted to set it up similarly to the "InGameUI button" button prefab ("Auto-correct" component, anchors, Canvas, RectTransform, etc.). By "similiarly", I mean that I anchored it to the top-left, instead of bottom-left.

    Interestingly, I added both of these to the new, fresh game test. It did work to resize both my custom Inventory icon, and "InGameUI" prefab.
    Here's a screenshot of these in the new, fresh game at 640 x 480:
    https://imgur.com/a/YJpcEhJ

    I realize it is just down to something with my game (when it switches to 4:3 resolutions only). Just haven't been able to find out what yet..

    All my Unity UI menus, buttons, etc. at 16:9 resolutions display fine. Also UI elements anchored to the center point.
    They seem to just partly vanish in 4:3, when anchored to corners:
    https://imgur.com/a/0jgKhSV

    Regarding your question about comparing the existing prefab from my game, and a fresh one created with the NGW, into the scene -- I'm not entirely sure I understand, though I believe I do: Drag them physically into the scene so they're local to it, in order to compare Inspectors.
    I exported the prefab from my game as a package, and imported into the fresh, new one. They appeared to be both exactly the same (except for the Constant ID number of course):
    https://imgur.com/a/wPoYe0m

    I'll continue to look into this further. Thank you for your assistance up to this point!

  • Thanks for the clarifications.

    If the same prefabs work in a new test game - is this test game in a fresh project, or a new "game" created by the wizard in the same project?

    Do note that the component does require that the Menu is registered in AC's Menu Manager for it to be able to reposition it - though I'll see about lifting this requirement.

    The key difference may come down to either your Settings Manager and/or Menu Manager. Try replacing both or either of these with your test equivalents.

  • edited February 2020

    Hello again,

    is this test game in a fresh project, or a new "game" created by the wizard in the same project?

    The test game is a new game created with the Wizard in a completely separate project (separate from my main game) with AC 1.70.4 in Unity 2019.3.1f1.

    Do note that the component does require that the Menu is registered in AC's Menu Manager for it to be able to reposition it

    Yes, each of the Unity UI buttons/menus shown in the screenshot have been given their own "menu item" created in the Menu Manager.

    As mentioned in the previous post, it did work to reposition both of the buttons in all of the resolutions correctly (though, only in the fresh, new game test so far):
    https://imgur.com/a/YJpcEhJ

    The key difference may come down to either your Settings Manager and/or Menu Manager. Try replacing both or either of these with your test equivalents.

    First, I looked further into the "Settings Manager" to compare them: (fresh, test game on left side in image -- and my existing game on right side):
    https://imgur.com/a/MbbMJ7O

    It didn't have any noticeable differences that I'd think would cause 4:3 ratios to affect the Unity UI elements.

    Also tried swapping in the "Menu Manager" from the fresh, new test game, into my existing game. Though after building and running it -- this didn't have an effect to correct the case of the vanishing Unity UI menu elements in 4:3.

    Thank you for your continued assistance!

  • Are you able to create a cut-down duplicate project that removes all but a test scene that demonstrates the problem? I think me seeing it for myself is going to be the only way that I can solve this, since what I'm seeing here all looks fine.

    If you're not using any Unity Packages, PMing me a .unitypackage file of the required assets (sans AC) should be enough.

  • edited February 2020

    @Keks: If you've found an issue with the component, please share details so that I can look into it.

    @ChrisIceBox: I'll try to explain.

    • The scaling works great, there's no problem.
    • The canvas though gets stretched over the whole window: 16:9 forced aspect ratio gets stretched horizontally on wider window (21:9) and vertically on narrower window (4:3)
    • I honestly don't understand the min and max anchor points properties. No matter what values I've tried the content of the canvas always gets repositioned to a wrong place. Often it can get off the visible screen.
    • Note that it might work well I just don't understand how to use it.

    So what I did was keeping the scaling part and removing everything else from the script. And instead I've added "Aspect Ratio Fitter" component next to it.

    The next step was to also update the aspect mode together with the scale
    Wider window = HeightControlsWidth
    Narrower window = WidthControlsHeight

    I think some similiar concept is missing in the original script to prevent the stretching.

    But I still don't understand the necessity of the anchor points.

  • The anchoring works by updating the anchor points of the Menu's RectTransform boundary - as opposed to altering its position values. Unlike Unity's own components (e.g. Aspect Ratio Fitter), this also accounts for an AC-limited game view due to either enforcing an aspect ratio in the Settings Manager, or (optionally) playing on a mobile device with a notched area.

    The RectTransform boundary's RectTransform component has Min and Max Anchors. When the AutoCorrectUIDimensions component is used to update it's position, these Anchors will be set accounting for this limited game view.

    For example, if the Menu is positioned in the lower-left corner, the RectTransform's "regular" Min/Max Anchor points will be (0,0) and (0,0). But let's say AC is enforcing an aspect ratio, so we have black borders either side of the screen that reduce the playable width by 10% - or 5% either side.

    So the "corrected" Anchor points should be set to (0.05, 0), (0.05, 0).

    Note that the RectTransform should be given an appropriate "Anchor Preset" first, so that changes to these Anchor Points results in it being correctly re-positioned.

    For exampes, see the default interface's InGameUI and InventoryUI prefabs. These are set to align with the lower-left corner, and across the top edge, respectively. Your existing UI prefabs (made before the update) won't be updated automatically, but you can generate a new set using the New Game Wizard.

    If you'd like more help with your specific Menu, can you share some screenshots? How is it supposed to align with the screen's edge?

  • Thanks fo the info, I'll look into it. I'll post more menu info info if needed.

  • edited March 2020

    Thank you both for adding to this conversation.

    Thank you @Keks for asking about the Min and Max anchor points properties in the "Auto Correct UI Dimensions" component.
    At first I also didn't quite get the purpose of those values in new "Auto Correct" component.

    Thank you @ChrisIceBox for giving the information on the component's Min and Max Anchor Point values. The example you provided is a good explanation and will come in handy.

    So the "corrected" Anchor points should be set to (0.05, 0), (0.05, 0).

    One question:
    Are these example values auto-set by the "Auto Correct UI" component; Or are they the values that we should type manually into those fields?

    I didn't end up needing to change these values for the buttons anchored in corners (just left them the same as what they originally were, and same as the RectTransform on the Panel -- e.g. 0,0,0,0 for all values)


    I did some more testing, and I found what was causing the issue. It was down to the size of the Panel -- It was too large. After making the Panel about the same size as the "Inventory" button / menu's graphic, it positioned correctly for all 4:3, and 16:9 aspect ratios, and accounts for letterboxes as you mentioned.
    https://imgur.com/a/YOrMPUG


    I also had another question about "Auto Correct UI Dimensions". Let me know if it's best to open a new thread for this (although it's related).
    For menus that animate into the screen starting from off to the sides, can the "Auto Correct UI" component account for those (Is it meant to)? If so, do you have any advice on how to set one up using the component?

    My Inventory menu starts left off-screen, then animates moving right in to the screen -- After the Inv. button is clicked).

    Was able to animate it correctly for 16:9 aspect ratios by anchoring the menu's top-right corner, to the top-left corner of the screen, following some tips from in the last posts of the threads here:
    https://forum.unity.com/threads/ui-panel-with-image-moving-from-off-screen-onto-screen-and-off-again.424153
    https://forum.unity.com/threads/ui-animate-fullscreen-panel-from-off-screen.271751

    Though it wasn't working in other aspect ratios (e.g. 4:3).

    Here's screenshots examples from my project showing the menu's Animation panel, anchors, and Inspector:
    https://imgur.com/a/3hHrhPF
    https://imgur.com/a/dZu2h7U

    I saw the "AnimatedMenu_Example.controller" example in the "UI" folder , though I didn't see any animated menu prefab examples to go along with it.

    So going back to the main question:
    Can the "Auto Correct UI" component account for menus that animate into the screen starting from off to the sides? Is it meant to? If so, do you have any advice on how to set one up using it?

  • Are these example values auto-set by the "Auto Correct UI" component; Or are they the values that we should type manually into those fields?

    Those are set by the component, since the exact values are based on the current screen dimensions / aspect ratio.

    Can the "Auto Correct UI" component account for menus that animate into the screen starting from off to the sides?

    The component updates the position of the Menu's "RectTransform boundary", which should typically be the only direct child of your UI Canvas root. This will remain in a fixed place (visually) at all times.

    To have something animate into view from off-screen, have that be a child of this RectTransform. While the "RectTransform boundary" will remain fixed, child objects can still be animated freely.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Welcome to the official forum for Adventure Creator.