Ảnh bitmap hoặc SVG


7

Tôi muốn tạo GUI trong trò chơi Unity (2D) đầu tiên của mình. Tôi muốn GUI của tôi xuất hiện sắc nét ở tất cả các độ phân giải (ví dụ: 1920x1200 hoặc 3840x2160).

Vấn đề tôi gặp phải bây giờ là tôi không biết mình nên lưu hình ảnh bitmap của GUI ở độ phân giải cao nhất (để nó giảm xuống khi trò chơi của tôi được chơi với độ phân giải thấp hơn) hoặc thay vào đó tôi nên sử dụng SVG .

Đây có thể là một câu hỏi ngu ngốc nhưng đây là lần đầu tiên tôi tạo GUI trong Unity và tôi thực sự phải vật lộn với loại vấn đề này ...

Câu trả lời:


8

Không có đề xuất nào của bạn là giải pháp cho đồ họa 2D sắc nét ở mọi độ phân giải. Các SVG rất tuyệt vời và có khả năng mở rộng vô hạn, nhưng vì bạn không biết ranh giới pixel sẽ nằm ở đâu trong kết xuất cuối cùng, nên bạn không thể có được các cạnh sắc nét ở mọi độ phân giải. Ví dụ: giả sử GUI của bạn là một hộp màu đỏ trên nền màu xanh lá cây. Nếu cạnh giữa màu đỏ và màu xanh lá cây rơi vào giữa pixel và trình kết xuất SVG không khử răng cưa, bạn sẽ nhận được một hàng hoặc cột các pixel nửa đỏ, nửa xanh lục, trông sẽ giống như bột nhão. Nếu trình kết xuất không chống bí danh, thay vào đó, bạn đặt cạnh sai vị trí, điều này có thể tốt cho một hình chữ nhật duy nhất, nhưng đối với một mẫu lặp lại, mỗi phiên bản của mẫu có thể có chiều rộng khác nhau, giống như đáng chú ý.

Việc hạ thấp một bitmap xuống độ phân giải màn hình cũng tệ như vậy. Một lần nữa, hãy tưởng tượng cạnh màu xanh lục đỏ của bạn nằm trên một ranh giới pixel sẽ không phải là một ranh giới pixel trong bitmap được thu nhỏ. Một lần nữa, bạn sẽ nhận được một hàng hoặc cột pixel là hỗn hợp màu đỏ-xanh lá cây. Độ phân giải thấp nhất là quan trọng nhất để có các cạnh sắc nét, nhưng chúng sẽ bị ảnh hưởng xấu nhất.

Bạn có thể làm cho một trong hai kỹ thuật này hoạt động, nếu bạn có thể chấp nhận một hạn chế: thay vì xử lý bất kỳ độ phân giải nào , bạn sẵn sàng xử lý một bộ độ phân giải, sức mạnh lý tưởng của hai loại (ví dụ: kích thước biểu tượng 512x512, 256x256, 128x128 , v.v.) Khi bạn đang thiết kế giao diện người dùng của mình, hãy vẽ một bitmap lớn (512x512) hoặc hình ảnh vector, nhưng sử dụng các hướng dẫn trong trình chỉnh sửa của bạn để hiển thị kích thước tối thiểu (ví dụ 64x64). Đảm bảo rằng tất cả các cạnh quan trọng của bạn thẳng hàng với các hướng dẫn đó, nhưng bạn vẫn có thể sử dụng các đường cong, độ dốc, v.v ... Bằng cách đó, bạn biết rằng bạn sẽ không bị nhòe ở độ phân giải thấp, nhưng bạn vẫn có thể nhận được lợi ích của các đường chéo trơn tru và đường cong ở độ phân giải cao. Đây là một cách nhanh chóng để thiết kế giao diện người dùng có thể mở rộng.

Hệ điều hành di động (được thiết kế cho một loạt các màn hình) sử dụng một kỹ thuật tương tự, nhưng có hai điểm khác biệt. Đầu tiên, họ "xô" dpi thực tế của màn hình đến dpi "tiêu chuẩn" gần nhất. Điều này có nghĩa là một giao diện người dùng có thể hiển thị lớn hơn hoặc nhỏ hơn một chút trên các màn hình khác nhau, nhưng bạn biết chính xác có bao nhiêu pixel trong mỗi biểu tượng hoặc tiện ích. Để giải quyết vấn đề này, họ không giới hạn nghị quyết đối với quyền hạn của hai người, nhưng cũng có một số nghị quyết trung gian.

Thứ hai, họ cho phép các nhà thiết kế chỉ định một bitmap khác nhau cho mỗi độ phân giải. Điều này có nghĩa là bạn có thể tạo ra một thiết kế chi tiết cao hơn cho màn hình có độ phân giải cao hơn mà không quá bận rộn trên màn hình có độ phân giải thấp. (Ví dụ: bạn có thể sử dụng mẫu kẻ ô hoặc thước kẻ mịn và hiển thị chính xác ở mỗi độ phân giải.) Bạn cũng có thể xem xét việc này, nhưng nó khiến việc thiết kế và quản lý tài sản bitmap tốn thời gian hơn một chút.

Nếu các nhóm của bạn cách nhau hai lần, bạn có thể sử dụng mipmap để lưu trữ hình ảnh (thay vì sử dụng thế hệ mipmap tích hợp), cho dù bạn đang tạo các hình ảnh khác nhau cho mỗi độ phân giải hay chỉ thu nhỏ. Bằng cách đó, bạn sẽ tránh được chi phí băng thông bộ nhớ thời gian chạy.


1
Ồ Đó là một câu trả lời. :) Điều này giúp rất nhiều. Cảm ơn bạn rất nhiều bạn của tôi !: D
drpelz 11/12/18
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.