Aspect Ratios

[Tony Li]

No problem! Like in the image above, create an empty GameObject that's a direct child of the Dialogue Manager's Canvas. In the image above, I called it "Panel Covers Whole Screen". Feel free to call it something that makes more sense, maybe like "Aspect Ratio Panel".

Edit its Rect Transform so that it uses the blue arrows in all 4 directions and set Left/Top/Right/Bottom to zero.

Then add an Aspect Ratio Fitter component to it. Set the Aspect Mode dropdown to Fit In Parent. Set the Aspect Ratio to the same value as in the AC Game Editor window's Settings > Aspect Ratio. (In the example image above, it's 1.7778.)

Then move your Dialogue System UIs so they're children of this GameObject. So instead of this:

Code: Select all

Dialogue Manager
    Canvas
        Dialogue UI

It will look similar to this:

Code: Select all

Dialogue Manager
    Canvas
        Panel Covers Whole Screen
            Dialogue UI

If you use an Instantiate Prefabs component on the Dialogue Manager to add the UIs at runtime, inspect the Instantiate Prefabs component. Assign your new GameObject (the one with the Aspect Ratio Fitter) as the Parent. This will instantiate them as children of this GameObject instead of children of the Canvas.

[Escara]

Thanks Tony.

Will this apply to the build as it still looks odd when running in Unity?

[Tony Li]

Hmm, then it probably won't apply to the build either. I'll put together a little example that you can test to see if it works correctly. Maybe I'm missing something with Aspect Ratio Fitter.

[Escara]

Thank you.

I'm wondering if I've got my UI set up correctly to be honest.

I have two lots of PC, NPC and Response panels. One at the bottom of the screen and the other at the top. I just can't seem to get them to appear in the correct positions when switching the aspect ratios.

[Escara]

Or should I not do that in Unity and just test it with the builds?

[Tony Li]

Maybe it has to do with the way they're anchored.

Here's the example scene: AC_Test_AspectRatioFitter_2019-06-28.unitypackage

It's based on AC's 2D demo scene. To play it, you'll need to inspect AdventureCreator / 2D Demo / ManagerPackage and click Assign Managers.

Since the 2D demo scene uses an aspect ratio of 1.5, I set the Aspect Ratio Fitter component to 1.5 also:



AC adds black bars to enforce the aspect ratio. When the screen is wider than 1.5, it looks like this:



When the screen is narrower than 1.5, it looks like this:



Without the Aspect Ratio Fitter, it would look like this:



In the image above, the dialogue UI stretches all the way across the screen. Then the left and right sides are blacked out by AC's aspect ratio enforcement.

The NPC subtitle panel (there's only one in this example) is anchored from the top of the screen:



It's possible that your UI elements are anchored elsewhere, such as the center of the screen:



As the screen changes size or aspect ratio, this could place the UI elements not exactly where you want them.

Note also that the NPC subtitle panel in the example doesn't do any scaling. It just sticks to the top of the screen. It's always something like 80 pixels high. If the screen is only 160 pixels high, then the panel will take up half the screen vertically. If the screen is 800 pixels high, then the panel will only take up 1/10th of the screen vertically. If you don't want this behavior, try adding a Canvas Scaler to the Canvas. This adds a whole new dimension to the whole positioning thing, though, just FYI. I still go to Unity's Designing UI for Multiple Resolutions page for guidance on that whole topic even after years of working with Unity UI.

[Escara]

Right.

I think I figured it out but not 100% sure. I've positioned the dialogue UIs so they appear in the Display using all different aspect ratios in Unity. There are some differences but it doesn't cover heads or overlap the side of the display. I used the Canvas Scaler too. I'm not sure how to test it without asking other people so I'm hoping that should be all I need to do?

I've done a build of one scene and tested all screen resolutions and the dialogue appears the same in each one.

Thanks for the link, I'll swot up on it now to ensure I've done it correctly.

Many thanks as always!

Caroline

[Tony Li]

Hi Caroline,

I think you can get a good idea of how different aspects will appear by changing the size of the Unity editor's Game view. In the small menu bar at the top of the Game view, there's a dropdown where you can select Free Aspect, 5:4, 4:3, 16:9, etc. The "+" button at the bottom of the menu lets you enter a specific resolution. You can look up the resolutions of different devices and set them up in this dropdown.

[Escara]

Great, yes that's what I've been testing with. The bit that really helped was setting the Canvas Scaler to width. Think I'm understanding this a bit better now and it's less daunting to try things that seem logical and also illogical! It was all a jump into the unknown for me.

Thanks, I realise this wasn't a DS but a Unity issue so for that I really appreciate you taking the time to help. The next step is to try and do a Windows build without my other laptop marking the game application as a threat and then creating an installer for it. Thank goodness for YT tutorial videos!

[Tony Li]

Always glad to help!