How would I keep the same ratio for all devices for cutscenes?

Hello, as you might know, devices come in all different shapes/ratios. iPads are 4:3, computers are 16:9, and so on. Most cutscenes are either 2.4:1 or 16:9. Like this:

If I wanted to make a 16:9 cutscene, how would I go about making all devices like iPads have the exact 16:9 look? Because again, iPads are 4:3, like this shape:

So basically, how would I make sure it’s 16:9 for all devices, without affecting the shots? I feel like using gui would make the shots look different.

1 Like

Just made this for you:

How it works: Basically an invisible frame has an aspect ratio, then I surrounded it with four black frames that will be visible depending on the device’s aspect ratio. To test in Studio, just adjust the app’s window dimensions with your cursor and see how it automatically adjusts the bars.

3 Likes

Hey, thanks. I’m testing it right now. I’ll get back to you.

Sorry it took a while to answer.

2 Likes

Alright, I’ll be here to help

No worries!

3 Likes

Hello. Sorry it took long to answer AGAIN.

It works wonderfully. The only problem is it still has the problem that I stated in the original post; having a different “field of view”. Here is what it looks like:


1 Like

Oh, sorry about the late reply, I’ve been a bit busy today

So what caused the difference between image 1 and 2? It was different screen sizes right?

1 Like

Yes. It was the different screen sizes.

And no problem about the late reply. I guess we’re kind of even now? :sweat_smile:

2 Likes

So this is something I’ve tried to achieve in my game as well: Consistent visibility of the game scene through different screen sizes. I sort of gave up because the way to solve the issue is by adjusting FOV based on screen size, and Roblox has a limitation for FOV at 120. However, a while back I discovered how to bypass this limitation when I saw this post.

In fact, it is referenced to in this other post regarding trying to achieve what you’re wanting. I’m not great with math, but when I have spare time this week I can trying messing around with the two resources to see if I can fix this issue by combining them.

Basically the goal is to have a script that adjusts the FOV(without any limit) to match the screen size every frame.

Haha, I suppose

2 Likes

I know if it is a bit late now, I assume OP @BlueBloxBlast has already found a solution but…

I think I have resolved the issue of certain aspect ratios/screen resolutions being limited by the FOV.

I discovered from the FOV post that the camera FOV does not start to change until the distort value is below 1. Assuming that the Camera’s FieldOfView angle is set to 70, If we set the distort value to 0.5 the resulting FOV angle would be around 105 (wild guess)

Now take these results with a grain of bricks, I too am not good at maths, Instead, I just created a flat test pattern and counted the black squares. The camera is set at a fixed position.

Test Pattern


(the coloured lines tell me the target aspect ratio. They must be outside the camera’s view otherwise the aspect ratio does not match with the key provided on the test pattern.)

Also the camera’s FieldOfView mode must be set to Vertical, other FOV modes produced very different results.

I will use this post to compare my implementation with the method of modifying the Camera’s FOV directly. I have set the Target aspect ratio to 4:3, a common aspect ratio for CRT and SXGA monitors

Changing the Camera's FOV directly

LICEcap_37
You notice we lost the top and bottom screen as the FOV reaches past 120.

Changing the FOV using CFrame

LICEcap_39
We now retain the top and bottom areas even at silly resolutions and/or aspect ratios

Now i am going to use the test pattern (to see what is really going on). Because I set the aspect ratio to 4:3 if I ever see the red lines or the amount of black squares visible changes then the final FOV for the target aspect ratio is incorrect.

Using the test pattern (Direct FOV)

LICEcap_40

You can see when I whack the window size to the smallest width the FOV has reached the limit and we end up losing screen space.
RobloxStudioBeta_rOXztBF4Rh

Using the test Pattern (CFrame method)

LICEcap_35
Now the visible space can be seen even with the most weirdest resolutions or aspect ratios.

Here is the script and GUI i made. Currently, it is UNUSABLE for cutscenes requiring you to change a CFrame value called TargetCameraCFrame which the script will use to position the camera. Changing the camera CFrame directly while this script is running would cause a literal black hole. I wouldn’t reccommend this for deployed work either, its only a proof of concept.

RobloxStudioBeta_xZjhgoJ3pe

(the script also contains explanations on how it basically works)

Aspect ratio GUI Demo.rbxm (6.4 KB)

Someday, If i ever need this script again, I’ll make a new thread with a more refined and final version of this. (with better documentation of course)

1 Like

Thanks! I’ll save this for later!

1 Like

UIAspectRatioConstraint
Try adjusting AspectRatio property to your need
Edit:
Also put anchor point to center (0.5,0.5) or else it may behave weirdly