Làm thế nào bạn sẽ xử lý các tỷ lệ khung hình khác nhau trong một nền tảng 2d?

Cách đây rất lâu, 4: 3 là tỷ lệ xin lỗi duy nhất bạn tìm thấy trên PC. Ngày nay, phổ biến nhất là 16:10, nhưng hầu hết các màn hình mới (đặc biệt là máy tính xách tay) là 16: 9

Tôi đang viết một nền tảng 2D và tôi không thể quyết định cách xử lý tất cả các tỷ lệ khác nhau.

Đây là một số ý tưởng:

1. 4: 3 có nhiều nội dung hơn, màn hình rộng được cắt ở trên và dưới
2. 16: 9 có nhiều nội dung hơn, các nội dung khác được cắt trái và phải
3. Trò chơi có tỷ lệ 16: 9 với các thanh ngang màu đen cho các AR khác
4. Trò chơi có tỷ lệ 4: 3 với các thanh dọc màu đen cho các AR khác

Nếu bạn không có lý do thuyết phục nào để làm cho trò chơi của bạn "rộng" (trong trường hợp đó sử dụng cách tiếp cận 3) hoặc thu hẹp (trong trường hợp đó sử dụng cách tiếp cận 4), hãy kết hợp với 1 và 2 (hoặc có thể là 3 và 4 nếu bạn muốn giấu những thứ ngoài màn hình).

Chọn tỷ lệ khung hình thỏa hiệp (16:10 là tỷ lệ tốt hoặc thậm chí 16:11). Nếu người dùng ở trên 16: 9, hãy cung cấp cho họ nhiều nội dung hơn và nếu họ ở trên 4: 3, hãy cung cấp cho họ nhiều nội dung hơn ở trên cùng và dưới cùng.

Trong mọi trường hợp - tôi thấy tốt nhất là thực hiện nó với một cái gì đó như thế này trong lớp máy ảnh của bạn:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

Tại thời điểm đó, bạn có thể chỉ cần thử nghiệm với các kích thước thế giới danh nghĩa khác nhau (nghĩa là: kích thước của máy ảnh theo đơn vị thế giới) và chỉ cần chọn một kích thước tốt nhất.

Vâng, như một lời khuyên cơ bản, trên PC tôi sẽ nói "đừng cho rằng người dùng của bạn muốn chạy toàn màn hình". Và trong chế độ cửa sổ, chọn tỷ lệ lý tưởng của bạn và chỉ cần sử dụng trực tiếp.

Người dùng tôi nghĩ thường chấp nhận các thanh màu đen khi được trình bày với nội dung toàn màn hình. Vì vậy, chiến lược 3 và 4 được chấp nhận, nếu không lý tưởng. Chúng có lợi thế là bạn luôn biết bạn đang hiển thị bao nhiêu nội dung: tức là không có lỗi lén lút nào chỉ xảy ra khi chạy trên màn hình rộng.

Nếu bạn đang cố gắng thích nghi và phát hiện tỷ lệ người dùng thông qua độ phân giải màn hình và hiển thị càng nhiều nội dung càng tốt, thì bạn phải tính đến nội dung ưu tiên cao và thấp khác nhau. Nội dung ưu tiên cao là nội dung mà người dùng hoàn toàn phải xem trên màn hình, nếu nó bị tắt màn hình thì trò chơi bị lỗi. Vì vậy, đây là những thứ như các yếu tố HUD và UI, và hình đại diện của người chơi và bất cứ thứ gì họ đang tương tác. Nội dung ưu tiên thấp là nội dung mà nếu trên màn hình thì tốt, nhưng nếu là ngoài màn hình thì không có vấn đề gì lớn. Ví dụ: Đồ họa nền và những thứ ở xa avatar.

Giả sử bạn có UI / HUD đang được đặt chồng lên trên đỉnh của thế giới 2D 'vật lý', thì điều này là đủ đơn giản. Các mục ưu tiên thấp rất dễ dàng, bạn chỉ cần đảm bảo rằng chế độ xem 4: 3 được tập trung vào những điều thú vị, sau đó vẽ càng nhiều thứ ưu tiên thấp càng tốt sang bên trái hoặc bên phải. Những thứ có mức độ ưu tiên cao trong thế giới 2D (ví dụ: nhân vật của bạn, kẻ thù mà nhân vật của bạn đang trực tiếp chiến đấu) phải luôn được giữ trong chế độ xem 4: 3. Tức là không có mã trò chơi của bạn phóng to máy ảnh để tận dụng lợi thế của bất động sản màn hình phụ, bởi vì sau đó bạn sẽ có mã trò chơi hoạt động khác nhau trên màn hình rộng so với không. Có mã trò chơi giả định rằng thế giới đang được hiển thị trong 4: 3 và chỉ để mã kết xuất của bạn nhận thức được rằng thực sự có nhiều hơn thế.

Đặt ra các yếu tố UI / HUD có thể được tiếp cận theo một trong hai cách:

1. Định vị động: Chỉ định tất cả các yếu tố của bạn liên quan đến các cạnh màn hình (nghĩa là không phải tất cả đều liên quan đến 0,0). Tùy thuộc vào tỷ lệ khung hình của bạn, các yếu tố sẽ ở gần hoặc xa hơn từ trung tâm của màn hình. Ưu điểm: Cho phép bạn móc mọi thứ vào các góc và để chúng 'chỉ hoạt động'. Nhược điểm: Khó có được bố cục làm việc độc đáo ở trung tâm và nguy cơ các yếu tố chồng chéo
2. Định vị tĩnh bảo thủ: Bố trí tất cả các yếu tố của bạn trong 4: 3 và chỉ cần bù chúng khi chạy trên màn hình rộng. Ưu điểm: đơn giản, bố cục logic / tọa độ rõ ràng. Nhược điểm: để lại không gian chết trực quan ở bên trái và bên phải của các điều khiển UI của bạn, nơi bạn sẽ thấy thế giới 2D ở chế độ nền nhưng không có UI.

Cái nào thích hợp nhất cho trò chơi của bạn? Nếu bạn đang tạo Canabalt (tức là một trò chơi phụ thuộc vào tốc độ ngang), tỷ lệ khung hình rộng với các thanh màu đen (# 3) trên các khía cạnh hẹp hơn sẽ là lý tưởng để làm nổi bật chuyển động bên. Mặt khác, nếu bạn có một trò chơi trên không như Super Smash Brothers, màn hình cao hơn (# 2 hoặc # 4) sẽ là tốt nhất. Tôi quyết định dựa trên những gì hoạt động tốt nhất cho trò chơi.

Tôi đồng ý với những người trả lời khác rằng cần quan tâm đến các yếu tố có thể hiển thị trên một màn hình nhưng không hiển thị trên màn hình khác.

Castle Crashers dường như sử dụng một chút số 2 và một chút số 3 - bạn có các thanh màu đen trên màn hình 4: 3, và cũng có một vùng nhìn thấy nhỏ hơn một chút - nhưng bạn phải luôn có "vùng an toàn" xung quanh các cạnh dù sao bạn cũng không đặt bất cứ thứ gì quan trọng (đối với màn hình như TV CRT cắt cạnh)

Có một lựa chọn khác. Bạn có thể tạo khung cho tỷ lệ trung gian và thực hiện cả cắt xén và mở rộng (hoặc giáp) trên cả độ phân giải bình thường.

Tôi tin rằng việc quay phim trên TV được đóng khung theo cách này, sao cho màn hình rộng trông ổn (mọi người không bị dồn vào giữa cảnh), trong khi cắt xén cho 4: 3 không quá quyết liệt và có sự lia máy tối thiểu.

Đây là một bài đăng trên blog về việc xử lý nhiều kích thước màn hình trên thiết bị di động và đây là phần thứ hai về cách tiếp cận này được mã hóa trong Java bằng libgdx . Nó hơi giống câu trả lời của Andrew nhưng có thể giúp đỡ người khác.

Bài đăng trên blog bao gồm ba cách tiếp cận chính:

1. Sống với các thanh màu đen trên đầu hoặc ở hai bên.
2. Sử dụng chế độ xem ảo.
3. Sử dụng các yếu tố nổi, giống như bạn tìm thấy trong bố cục flexbox của trang web.

Số 1 là khá tự giải thích.

Để minh họa không. 2, giả sử bạn muốn hỗ trợ ba thiết bị khác nhau với ba tỷ lệ khung hình khác nhau. Mở hình ảnh trong một trình chỉnh sửa hình ảnh. Đối với thiết bị đầu tiên, hãy vẽ hình chữ nhật lớn nhất theo tỷ lệ khung hình của thiết bị đó sẽ vừa với hình ảnh của bạn. Làm tương tự cho thiết bị thứ hai và thiết bị thứ ba. Khu vực có thể sử dụng của bạn, hoặc khung nhìn ảo, là giao điểm của cả ba hình chữ nhật đó. Bất cứ điều gì bên ngoài khung nhìn đó không thể được đảm bảo để có thể nhìn thấy.

Số 3 liên quan đến việc đặt các đối tượng trên màn hình tương tự như cách bạn sẽ đặt các yếu tố trên trang web bằng flexbox hoặc float. Ví dụ: bạn sẽ đặt nút tạm dừng 5 pixel từ trên xuống và 5 pixel từ bên phải. Cho dù thiết bị có tỷ lệ khung hình nào, nút tạm dừng sẽ luôn ở góc trên bên phải.