너비 또는 높이를 채우는 Unity UI 스퀘어

이 요구 사항으로 보드를 만들려고합니다.

• 정사각형이어야한다.
• 사용 가능한 너비 또는 높이에 맞아야합니다.
• 캔버스 중앙에 위치해야합니다.
• 필요한만큼 추가 중간 캔버스에 싸일 수 있습니다.

나는 닻을 가지고 놀고 있지만 그렇게 할 조합을 찾지 못했습니다. 내가 생각할 수있는 유일한 해결책은 컨테이너의 일종의 "OnResize"를 스크립트로 작성하고 보드의 크기를 프로그래밍 방식으로 설정하는 것입니다.

이것이 원래 레이아웃입니다. (1)은 BoardCanvas입니다. (2)는 이사회입니다.

화면이 커지면 사각형이 커지지 만 여전히 사각형이기를 원합니다.

또는 다음을 줄입니다.

그러나 이전 예제가 위쪽 및 아래쪽 가장자리에 스냅되지만 수직 공간이 사용 가능한 너비보다 커지면 사각형이 왼쪽 및 오른쪽 테두리에 따라 크기를 제한하기를 원합니다.

Q1 : 앵커 / 피벗으로이 작업을 수행하는 방법이 있습니까? BoardCanvas와 Board 자체 사이에 중간 캔버스를 만드는 것이 좋습니다.

Q2 : 그렇다면 앵커를 어디에 배치해야합니까? 중간 물체가 필요합니까?

Q3 : 그렇지 않은 경우 솔루션을 스크립팅합니까? 캔버스에 처리 할 OnResize가 있습니까? 목록에서 크기 조정 이벤트를 볼 수 없지만 어디서 찾아야할지 모르겠습니다. 모든 프레임에서 테스트하는 것은 약간 과잉이며 이벤트 중심의 이벤트가 더 나은 것 같습니다.

감사!

마지막으로 다음과 같은 방법으로 (v5.0.0에서 테스트) 방법을 찾았습니다.

• 방향을 확인하기 위해 코드 또는 조건이 필요하지 않습니다.
• 스케일로 해킹하지 않으며 참조 해상도가 필요하지 않습니다.

UI 비디오 자습서에는 텍스트 문서 "자동 레이아웃"시스템에 잘 설명되어 있지만 많은 부분이 빠져 있습니다.

자동 레이아웃은 "레이아웃"및 "레이아웃 컨트롤러"로 만들어진 메커니즘입니다. 레이아웃 컨트롤러는 UI Game Object에 연결할 수있는 구성 요소입니다. 컨트롤러는 Rect Transform지능적으로 크기를 조정할 수 있습니다 .

특정 컨트롤러는 구성 요소가 적용되는 객체의 크기를 조정할 수 있지만 다른 컨트롤러는 해당 객체의 자식 크기를 조정할 수 있습니다.

내장 컨트롤러가 몇 개 있습니다. 그 중 하나는 Aspect Ratio Fitter입니다.

먼저 Board패널을 선택 하고 새 Aspect Ratio Fitter구성 요소를 첨부합니다 .

Aspect Ratio Fitter객체의 원하는 종횡비를 "유지"하는 것을 목표로 하는 것 같습니다. 그렇게하기 위해, 객체는 (종횡비를 유지하면서) 자식 객체를 "랩핑"하도록 설정하거나 (종횡비를 유지하면서) 컨테이너를 확장하고 맞도록 설정할 수 있습니다.

그런 다음 Fit In Parent옵션 을 선택 하고 원하는 종횡비를 1로 설정하여 완벽한 정사각형을 원한다고 지정합니다.

이것은 내가 원하는 것과 매우 유사한 레이아웃을 생성하지만 보드의 크기를 말할 필요는 없습니다. 그러나 여전히 묘사 된 것처럼 정사각형이어야한다는 것을 알고 있습니다.

세로로 축소하거나 확장하면 사각형이 가로 세로 비율을 유지하면서 부모를 따릅니다.

마술처럼, 너비를 줄임으로써 변화가 줄어드는 경우, "Aspect Ratio Fitter"는 자동적으로 다음과 같이 첨부 할 스크립트가없고 변경할 속성이 없습니다 :

마지막으로 약간의 여백을 원했기 때문에 스페이서 역할을하는 컨테이너 rect 변환을 배치하고 Board를에서 BoardCanvas로 이동 합니다 MarginCanvas.

이것은 가능하지만 화면이 가로 또는 세로인지 여부를 정의하고 몇 가지 값을 변경하기 위해 작은 코드 줄 또는 두 줄로 가능합니다.

Canvas에서 Canvas Scaler의 "Ui Scale Mode"를 "Scale with Screen Size"로 설정하고 "Screen Match Mode"를 "Match Width 또는 Height"로 만들어야합니다.

800x600의 기본 참조 해상도를 사용하고 화면의 뷰포트가 가로 (예 : Screen.width보다 큼 Screen.height) 라고 가정 하면 일치 슬라이더를 높이쪽으로 설정해야합니다 1.

그런 다음 중간 / 중앙 앵커 사전 설정을 사용하여 캔버스에 이미지를 원합니다. 또한 이미지의 너비와 높이가 캔버스 스케일러의 참조 해상도의 Y 값과 일치하도록하려고합니다.

그런 다음 카메라의 뷰포트 크기를 조정하고 뷰포트의 높이와 일치하도록 높이를 늘리면서 이미지의 모양이 유지되는지 확인할 수 있습니다.

화면이 세로 인 경우 (필요한 경우 확인 및 / 또는 변경하기 위해 코딩해야 할 경우) 스케일러의 일치 값을로 설정 0하고 이미지의 높이와 너비를 참조 해상도와 일치하도록 변경해야합니다 X 값. (아래 그림에서 이미지의 너비와 높이는 모두 800)

더 작은 이미지를 내부에 맞추려는 경우 참조 해상도의 X 또는 Y 값 (가로 또는 세로에 따라)에 대해 너비와 높이를 조정하여 이미지를 "스케일"할 수 있습니다. 예를 들어, 참조 해상도 X 값의 절반 (뷰포트가 세로이므로)을 사용하는 파란색 정사각형을 만들었습니다.

또한 바둑판 또는 무언가를 원한다면 각 이미지의 X 및 Y 위치와 높이 및 너비는 Canvas Scaler의 해상도에 따라 원하는대로 할 수 있습니다.