Giao diện người dùng Unity vuông lấp đầy chiều rộng HOẶC chiều cao

Tôi đang cố gắng tạo một bảng với yêu cầu này:

• Nó SALL là hình vuông.
• Nó SALL phù hợp với chiều rộng có sẵn HOẶC chiều cao.
• Nó SALL được tập trung vào khung vẽ.
• Nó có thể được bọc thành nhiều bức tranh trung gian bổ sung nếu cần.

Tôi đang chơi với neo nhưng tôi không tìm thấy sự kết hợp nào để làm điều đó. Giải pháp duy nhất tôi có thể nghĩ là kịch bản một số loại "OnResize" của container và đặt kích thước của bảng theo chương trình.

Đây là bố cục ban đầu. (1) là BoardCanvas. (2) là Hội đồng quản trị.

Tôi muốn rằng nếu màn hình trở nên cao hơn, hình vuông sẽ phát triển, nhưng vẫn là hình vuông:

Hoặc giảm:

Nhưng, mặc dù những ví dụ trước đó đang chụp ở cạnh trên và dưới, tôi cũng muốn rằng nếu không gian dọc trở nên cao hơn chiều rộng có sẵn, thì hình vuông sẽ giới hạn kích thước của nó tùy thuộc vào viền trái và phải:

Câu 1: Có cách nào để làm điều này với các neo / pivots không? Tôi có thể tạo các bức tranh trung gian ở giữa BoardCanvas và Board nếu nó hoạt động.

Câu 2: Nếu vậy, tôi nên đặt neo ở đâu? Tôi có cần các đối tượng trung gian không?

Câu 3: Nếu không, kịch bản có phải là giải pháp? Có bất kỳ OnResize trên canvas để xử lý? Tôi không thể thấy bất kỳ sự kiện thay đổi kích thước nào trong danh sách, nhưng có lẽ tôi không biết tìm nó ở đâu. Tôi cảm thấy việc thử nghiệm nó ở mọi khung hình có vẻ hơi quá mức, điều khiển sự kiện có vẻ tốt hơn.

Cảm ơn!

Cuối cùng tôi đã tìm thấy một cách để làm điều đó (được thử nghiệm trong phiên bản 5.0), theo cách:

• Không cần mã, hoặc điều kiện để kiểm tra định hướng.
• Không hack với quy mô và không cần độ phân giải tham chiếu.

Trong các hướng dẫn bằng video UI, có một phần lớn bị thiếu, mặc dù được ghi lại rõ ràng trong tài liệu văn bản: Hệ thống "tự động bố trí".

Bố cục tự động là các cơ chế được tạo thành từ "bố cục" và "bộ điều khiển bố cục". Bộ điều khiển bố cục là các thành phần mà người ta có thể đính kèm vào Đối tượng trò chơi UI. Bộ điều khiển có thể thay đổi kích thước Rect Transformmột cách thông minh.

Một số bộ điều khiển có thể thay đổi kích thước đối tượng nơi áp dụng thành phần, trong khi các bộ điều khiển khác có thể thay đổi kích thước con của đối tượng đó.

Có một vài bộ điều khiển tích hợp. Một trong số đó là Aspect Ratio Fitter.

Đầu tiên, tôi chọn Boardbảng điều khiển của mình và tôi đính kèm một Aspect Ratio Fitterthành phần mới :

Các Aspect Ratio Fitterdường như nhằm mục đích "duy trì" aspect ratio muốn của đối tượng. Để làm như vậy, đối tượng có thể được đặt thành "bọc" xung quanh đối tượng con (trong khi duy trì tỷ lệ khung hình) hoặc có thể được đặt để mở rộng và khớp với vùng chứa của nó (trong khi duy trì tỷ lệ khung hình).

Sau đó tôi chọn Fit In Parenttùy chọn và tôi xác định rằng tôi muốn một hình vuông hoàn hảo bằng cách đặt tỷ lệ khung hình mong muốn thành 1:

Điều này mang lại một bố cục rất giống với bố cục tôi muốn, nhưng tôi không phải nói với bảng kích thước của nó. Nhưng vẫn biết nó phải vuông, như mô tả:

Nếu tôi thu nhỏ theo chiều dọc hoặc mở rộng, hình vuông theo cha mẹ, trong khi duy trì tỷ lệ khung hình:

Thật kỳ diệu, khi thay đổi được giảm bằng cách giảm chiều rộng, không có tập lệnh nào được đính kèm và không có thuộc tính nào để thay đổi, vì "Aspect Ratio Fitter" thực hiện điều đó một cách tự động:

Cuối cùng, như tôi muốn có một chút lề ở đó, tôi chỉ cần đặt một biến đổi trực tiếp container hoạt động như miếng đệm và di chuyển Boardtừ BoardCanvasvào trong MarginCanvas:

Điều này là có thể, nhưng có lẽ chỉ cần một hoặc hai dòng mã nhỏ để xác định xem màn hình là ngang hay dọc và thay đổi một vài giá trị.

Trên Canvas, bạn cần đặt "Chế độ tỷ lệ Ui" của Bộ chia tỷ lệ thành "Tỷ lệ với kích thước màn hình" và đặt "Chế độ khớp màn hình" thành "Độ rộng hoặc chiều cao phù hợp":

Giả sử Độ phân giải tham chiếu mặc định là 800x600 được sử dụng và giả sử chế độ xem của màn hình là ngang (ví dụ: Screen.widthlớn hơn Screen.height), thanh trượt Khớp cần được đặt theo chiều cao theo chiều cao 1.

Sau đó, bạn sẽ muốn có một Hình ảnh trên Canvas bằng cách sử dụng cài đặt neo giữa / giữa. Bạn cũng muốn Chiều rộng và Chiều cao của Hình ảnh khớp với giá trị Y của Độ phân giải tham chiếu Canvas của bạn.

Sau đó, bạn có thể thay đổi kích thước chế độ xem của máy ảnh và thấy rằng hình ảnh vẫn giữ nguyên hình dạng của nó trong khi kéo dài chiều cao của nó để phù hợp với chiều cao của chế độ xem:

Nếu màn hình là dọc - và đây là nơi có thể bạn sẽ cần mã để kiểm tra và / hoặc thay đổi theo yêu cầu - bạn cần đặt giá trị Khớp của Scaler 0và thay đổi Chiều cao và Chiều rộng của Hình ảnh để khớp với Độ phân giải Tham chiếu Giá trị X. (trong các hình ảnh bên dưới, cả Chiều rộng và Chiều cao của Hình ảnh đều được 800)

Nếu bạn đang cố điều chỉnh hình ảnh nhỏ hơn bên trong, bạn có thể "chia tỷ lệ" hình ảnh bằng cách điều chỉnh chiều rộng và chiều cao của nó so với giá trị X hoặc Y của Độ phân giải tham chiếu (tùy thuộc vào phong cảnh hoặc chân dung). Vì vậy, ví dụ, tôi đã tạo một hình vuông màu xanh sử dụng một nửa giá trị X của Độ phân giải tham chiếu (vì chế độ xem là chân dung), và nó thu nhỏ và thu nhỏ độc đáo:

Và hơn nữa, nếu bạn muốn có một bàn cờ hoặc thứ gì đó, vị trí X và Y và Chiều cao và Chiều rộng của mỗi hình ảnh có thể dựa trên tỷ lệ phần trăm Độ phân giải của Canvas để làm bất cứ điều gì bạn muốn: