Hệ thống tọa độ nào để sử dụng để xử lý UI 2D?

Tiếp theo từ câu hỏi về tỷ lệ khung hình , tôi rất muốn nghe những gì người khác đang sử dụng khi làm việc trên các hệ thống UI 2D (rất có thể là các giải pháp tự trồng tại nhà của họ). Cụ thể, làm thế nào để bạn xử lý các hệ thống tọa độ. Theo tôi, có ba lựa chọn:

1. Các tọa độ được mã hóa cứng (ví dụ: 0 -> 720, 0 -> 576)
2. Tọa độ chuẩn hóa (0,0 -> 1,0, 0,0 -> 1,0), được ánh xạ vào tọa độ thực trước khi kết xuất
3. Các tọa độ ảo (ví dụ: 0 -> 1600, 0 -> 1000), được ánh xạ vào tọa độ thực trước khi kết xuất

Mã hóa cứng rõ ràng chỉ hữu ích nếu bạn đang ở trên một nền tảng cố định và biết trước tọa độ không gian màn hình của bạn hoặc nếu bạn chuẩn bị bố trí màn hình cho mọi bộ kích thước màn hình có thể.

Các tọa độ chuẩn hóa là tốt, nhưng bị mơ hồ khi tỷ lệ khung hình của màn hình không cố định (ví dụ: 0,75 ánh xạ tới tọa độ vật lý khác khi chạy trên màn hình rộng so với tỷ lệ 4: 3). Ngoài ra, đối với các tác giả, việc khai báo một phần tử UI là (0,2 x 0,2) thực sự không trực quan, chỉ để thấy nó không thực sự vuông khi được hiển thị.

Các tọa độ ảo không rõ ràng, nhưng gặp phải các vấn đề tương tự như tọa độ chuẩn hóa ở giai đoạn ánh xạ lại: sự khác biệt thập phân nhỏ có thể dẫn đến các lỗi khác nhau có nghĩa là các thành phần UI hiện có một đường nối giữa chúng.

Tương tự, khi bạn có màn hình độ phân giải cố định, cả tọa độ chuẩn và ảo đều có nghĩa là rất khó để đảm bảo ánh xạ 1: 1 giữa các pixel được tạo thủ công tinh xảo của bạn trong hình ảnh UI và pixel trên màn hình, nghĩa là bạn có nguy cơ đồ tạo tỷ lệ khó chịu (giả sử bạn đang hiển thị dưới dạng hình tứ giác trên màn hình).

Chúng tôi đã thực hiện với phương pháp phối hợp ảo, đặc biệt để tránh sự mơ hồ về tỷ lệ khung hình. Vì vậy, khi hiển thị lên màn hình 16:10, không gian UI là (0,0) -> (1600,1000), nhưng khi kết xuất thành 4: 3, không gian UI có thể sử dụng thực sự là (133,0) -> (1467 , 0).

Có giải pháp nào tốt hơn mà tôi không biết? Có chiến lược tốt nào để giảm thiểu các vấn đề mà 3 phương pháp này có không?

Tôi nghĩ rằng tôi đồng ý rằng các tọa độ chuẩn hóa không thực sự ánh xạ tốt đến các công cụ UI.

Những gì tôi thường làm cho bố cục 2D, về cơ bản là không gian phối hợp "ảo" của bạn, nhưng tôi chọn một không gian ánh xạ 1: 1 với độ phân giải mục tiêu ưa thích của tôi (ví dụ: 1280x720). Nó không được sửa, nhưng nó trực quan để xử lý và tôi biết rằng trong 90% trường hợp nó sẽ trông vừa phải. Rõ ràng điều quan trọng là không được tự mãn và thường xuyên kiểm tra các độ phân giải khác nhau.

Để rõ nét hơn khi ánh xạ lại độ phân giải, tôi mượn một số mẹo từ kết xuất phông chữ và cung cấp thông tin gợi ý. Vì vậy, hãy đảm bảo rằng những thứ cần được liên tục được gắn thẻ theo một cách nào đó, đồng thời thực hiện làm tròn đến các pixel chính xác trong đó việc căn chỉnh sắc nét là cần thiết.

Có lẽ cũng xem xét làm cho mọi thứ tương đối hơn. Vì vậy, thay vì tất cả mọi thứ là "vị trí đối tượng 1 ở X, Y" tuyệt đối, bạn có thể chỉ định "vị trí dưới cùng bên trái của đối tượng 2 ở phần bù từ phía dưới bên phải của đối tượng 1". Sau đó, dễ dàng hơn để giải cứu và / hoặc di chuyển mọi thứ, mà không mất các mối quan hệ quan trọng.

Hệ thống tọa độ của CEGUI dường như thực sự được cân nhắc kỹ lưỡng . Đó là hệ thống tọa độ thống nhất pha trộn định vị tuyệt đối với định vị tương đối. Bạn có thể chỉ định các vị trí như:

• ở giữa màn hình
  UDim(0.5,0)
• năm pixel ở bên trái của cạnh phải
  UDim(1.0,-5)
• hai vật dụng ở giữa nhưng cách nhau 10 pixel
  HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

Nếu nghi ngờ, tại sao không đi với mô hình hộp CSS, hoặc đơn giản hóa nó?

Bạn có thể chỉ định vị trí theo tỷ lệ phần trăm hoặc pixel. Ví dụ, bạn có thể định vị các thùng chứa với tỷ lệ phần trăm nhưng định vị các mục trong chúng theo pixel.

Tôi thích sử dụng tọa độ ảo, nhưng dựa trên độ phân giải mục tiêu chung (tốt nhất là một trong những độ phân giải cao nhất mà bạn mong đợi trò chơi sẽ chạy.

Những ngày này, một lựa chọn tốt có thể là 1920x1080.

Tất cả các tác phẩm nghệ thuật và mô phỏng màn hình có thể được tạo ở độ phân giải đó và giúp dễ dàng đo vị trí / khoảng cách bằng pixel.

Nếu chạy ở một tỷ lệ khung hình khác với tọa độ ảo, bạn có thể chọn cách điều chỉnh nó phù hợp với màn hình (hộp thư, cắt xén hai bên hoặc một chút của cả hai)

Khi mã hóa, tôi thấy 'suy nghĩ theo pixel' dễ dàng hơn nhiều so với suy nghĩ theo tọa độ chuẩn hóa! - Tôi muốn văn bản có chiều cao '50 (ảo) chiều cao 'thay vì' 0,0463 đơn vị cao '

Điều này hoàn toàn phụ thuộc vào loại GUI bạn có, nhưng thường các trò chơi có những thứ được neo dọc theo các cạnh của màn hình và ở các góc, và sau đó chúng có thể có một hộp ở giữa màn hình cho hộp thoại phương thức hoặc thứ gì đó.

Nếu đó là trường hợp của bạn, thì tôi có thể đề xuất sử dụng lược đồ trong đó bạn chỉ định neo và offset (x, y) không? Điều này sẽ tương tự như BorderLayout của Java (nhưng có thể với bốn góc, bốn góc cạnh và một trung tâm của màn hình). Vì vậy, ví dụ, bạn có thể chỉ định độ lệch (0,0) từ góc trên bên trái; sau đó phần tử sẽ được neo chính xác vào góc màn hình. Và sau đó, bất kể độ phân giải, tỷ lệ khung hình, v.v., bạn sẽ có chỉ báo sức khỏe ở góc màn hình. Nhưng sau đó, nếu bạn neo một phần tử vào góc trên bên phải, phần tử đó sẽ tự nhiên được neo tương đối với điểm trên cùng bên phải của nó (thay vì trên cùng bên trái), do đó, một lần nữa nó sẽ được neo tự động vào góc của màn hình bất kể độ phân giải.

Tôi chắc chắn đề nghị chống lại tọa độ 0,0-1,0 bình thường; chúng có thể thay đổi dựa trên độ chính xác của dấu phẩy động. GUI nên được ánh xạ tới pixel, trừ khi bạn có GUI 3D.

Rất nhiều phụ thuộc vào loại trò chơi và tình hình. Đối với các nguyên mẫu nhanh và bẩn, tôi thích lập kế hoạch cho giao diện người dùng trên giấy biểu đồ, viết ra một danh sách các tọa độ số cho kích thước cửa sổ cố định và mã hóa mọi thứ - nó dễ dàng và nhanh hơn đối với tôi. Nhưng đối với một dự án "thực tế" nơi bạn muốn thay đổi kích thước cửa sổ hoặc độ phân giải màn hình thay thế, điều đó rõ ràng không lý tưởng, và một số giải pháp cho phép mở rộng theo cả hai hướng sẽ tốt hơn.