How to make a responsive project

Hello all

I'm working on a project where one of your main requirements is to run on mobile devices and pc screens.

Is there any way to make the screen components adjust as much as possible to the screen resolution?

 

Refer to the Tiny Arms Revenge Project. Its design is perfect to fit on any screen resolution with a little bit of scripting.

 

First, make sure your project has the “Auto-Resize Canvas” option checked.

Your in-game canvas setting should then also be set to "ScaleWithScreenSize".

Then you will indeed need some components and a script to make your project truly responsive.
This script is (adapted) from Tiny Arms Revenge and is all the code you need, unless you want to dynamically change whether the project is in Portrait orientation or in Landscape orientation during runtime.
[NOTE: I added a boolean "PORTRAIT_MODE" in my Global class for either portrait or landscape mode]

Code (CSharp):

1. /**
2.      * [ADAPTED FROM UNITY'S "Tiny Arms Revenge" / "Match Three" GAME]
3.      * Adjust screen layout to fit any aspect ratio.
4.      */
5.     export class FitScreenLayoutSystem extends ut.ComponentSystem {
6.  
7.         OnUpdate(): void {
8.             let displayInfo = this.world.getConfigData(ut.Core2D.DisplayInfo);
9.             let aspectRatio = displayInfo.frameHeight / displayInfo.frameWidth;
10.             let referenceRatio = Global.PORTRAIT_MODE ? 16 / 9 : 9 / 16;
11.             let isTallDisplay = aspectRatio > referenceRatio + 0.01;
12.             let matchWidthOrHeight = isTallDisplay ? 0 : 1;
13.  
14.             // If resolution is taller than 9/16, make UI canvas match the width.
15.             this.world.forEach([CanvasResolutionFitter, ut.UILayout.UICanvas], (resolutionFitter, canvas) => {
16.                 let camera = this.world.getComponentData(canvas.camera, ut.Core2D.Camera2D);
17.                 if (resolutionFitter.DefaultHalfVerticalSize == 0) {
18.                     resolutionFitter.DefaultHalfVerticalSize = camera.halfVerticalSize;
19.                 }
20.  
21.                 canvas.matchWidthOrHeight = matchWidthOrHeight;
22.  
23.                 let referenceHalfSize = resolutionFitter.DefaultHalfVerticalSize;
24.                 let halfVerticalSize = isTallDisplay ? referenceHalfSize : referenceHalfSize;
25.                 camera.halfVerticalSize = halfVerticalSize;
26.             });
27.  
28.             // If resolution is taller than 9/16, zoom out the camera.
29.             this.world.forEach([CameraResolutionFitter, ut.Core2D.Camera2D], (resolutionFitter, camera) => {
30.                 if (resolutionFitter.DefaultHalfVerticalSize == 0) {
31.                     resolutionFitter.DefaultHalfVerticalSize = camera.halfVerticalSize;
32.                 }
33.  
34.                 let referenceHalfSize = resolutionFitter.DefaultHalfVerticalSize;
35.                 let halfVerticalSize = isTallDisplay ? aspectRatio * referenceHalfSize / referenceRatio : referenceHalfSize;
36.                 camera.halfVerticalSize = halfVerticalSize;
37.             });
38.         }
39.     }

After adding these components and this script, you will have to set some values in your cameras and canvas.
You can experiment with them yourself, but these values worked for me:

Portrait
Camera:
HalfVerticalSize: 10.5

CanvasCamera:
HalfVerticalSize: 10.5

Canvas:
uiScaleMode: ScaleWithScreen
referenceResolution: x225 y400
matchWidthOrHeight: 1

Landscape
Camera:
HalfVerticalSize: 5.9

CanvasCamera:
HalfVerticalSize: 5.9

Canvas:
uiScaleMode: ScaleWithScreen
referenceResolution: x400 y225
matchWidthOrHeight: 1


I hope this helps

 

thank you guys this helps a lot!!!!