Making script to Adjust Rect Transform to fit within camera "screen" after rotating UI rect transform

Question

Background

So I am attempting to make a small prototype that the UI screen will rotate and adjust the its borders based on the camera rectangle. However, I am having some problems in implementing that correctly.

The best approach I have is setting the rotatable UI element to stretch the whole screen and having at least one layout group, horizontal or vertical since I can contain the entire user interface within the screen boundaries. The only missing part is finding a way to force the main UI layout group to fit within the screen, after rotation, through scripting.

Attempted Approach

I tried the following so far and it did not work:

 public void rotateUIScreen(float degrees)
 {
     rotatableUI.localRotation = Quaternion.Euler(0,0,degrees);

     var cameraLeft = mainCamera.rect.xMin;
     var cameraRight = mainCamera.rect.xMax;
     var cameraBottom = mainCamera.rect.yMin;
     var cameraTop = mainCamera.rect.yMax;

     bool isUiRotated = (int)(degrees / 90f) % 2 == 1;


     if (isUiRotated)
     {
         rotatableUI.offsetMin = new Vector2(cameraTop, cameraLeft);
         rotatableUI.offsetMax = new Vector2(cameraBottom, cameraRight);
     }
     else
     {
         rotatableUI.offsetMin = new Vector2(cameraLeft, cameraBottom);
         rotatableUI.offsetMax = new Vector2(cameraRight, cameraTop);
     }
     
 }

Screenshots

^^^
If you notice on the last screenshot, it has all the values from left to right being at an equal distance away. I want all of the rotated blue dots to be attached to the anchor points, not set the anchor points to the blue dots.

Is there a better way to make a script that adjusts a stretched rect transform after it has been rotated?

Answer 1

Thanks to asking a few colleagues for help, I eventually found the answer: Here is how to rotate the main parent rotatable UI element that will work with any aspect ratio, and all UI elements will conform accordingly.
It will only work if you assign that script to a UI button through "OnClick" event.

 public void rotateUIScreen(float degrees)
     {
 
         Vector2 canvasDimensions = parentRectTransform.rect.size;
         
         Debug.Log("Canvas dimensions:" + canvasDimensions);
         Debug.Log("Rotatable UI dimensions:" + rotatableUI.rect.size);
 
         float rotationDifferenceAnchorOffset = (canvasDimensions.y - canvasDimensions.x) / 2;
 
         Debug.Log("Expected anchor offset: " + Mathf.Abs(rotationDifferenceAnchorOffset));
 
         rotatableUI.localRotation = Quaternion.Euler(0, 0, degrees);
         bool isUiRotated = (int)(degrees / 90f) % 2 == 1;
 
         if (isUiRotated)
         {
             // Remember, this configuration is a must
             // for screen rotation to work:
             // offset min (- , +) and offset max (+ , -) 
             rotatableUI.offsetMin = new Vector2(-rotationDifferenceAnchorOffset, rotationDifferenceAnchorOffset);
             rotatableUI.offsetMax = new Vector2(rotationDifferenceAnchorOffset, -rotationDifferenceAnchorOffset);
         }
         else
         {
             rotatableUI.offsetMin = new Vector2(0, 0);
             rotatableUI.offsetMax = new Vector2(0, 0);
         }
     }

Video Demonstration: UI Screen rotation in action

Making script to Adjust Rect Transform to fit within camera "screen" after rotating UI rect transform

Background

Attempted Approach

Screenshots

Normal camera and default UI orientation:

Normal Camera and 90° UI orientation - No Adjustment

Manually adjusted UI corners after rotation

1 Reply

Your answer

Follow this Question

Related Questions