Giữ cho các họa tiết đẹp và pixelated


7

Làm cách nào để giữ cho các họa tiết trong trò chơi của tôi được hiển thị pixel độc đáo trên màn hình ở mọi kích cỡ và độ phân giải? Tôi sử dụng bộ lọc kết cấu lân cận gần nhất khi thay đổi kích thước pixel, nhưng điều này chỉ hoạt động tốt ở độ phóng đại thực sự cao, nếu không các pixel bị biến dạng và không đồng đều.

Jitter

Tôi hiểu các giới hạn của tỷ lệ lân cận gần nhất và tôi sẽ không hỏi điều này ngoại trừ có rất nhiều trò chơi sử dụng nghệ thuật pixel mà không gặp vấn đề này, vì vậy tôi nghĩ có một số mẹo tôi không biết.


3
Điều gì về việc sử dụng hàng xóm gần nhất để phóng đại, nhưng lọc tuyến tính để thu nhỏ?
János Turánszki

Tất cả ba biểu tượng trong hình ảnh được phóng to bằng cách sử dụng hàng xóm gần nhất, nhưng chỉ có 8 hình trông đúng.
TimSim

Có thể không phải là thuật ngữ phù hợp với người khác, nhưng nếu bạn ở C # với XNA, tôi cho rằng bạn đã quên thay đổi trạng thái lấy mẫu của mình thành PointClamp. Những gì bạn mô tả về lọc hàng xóm gần nhất khi thay đổi kích thước sẽ hoạt động tốt miễn là bạn thu nhỏ theo toàn bộ độ phóng đại giá trị (x1, x2, x3, v.v.)
Thần thoại

1
Vấn đề là ngay cả khi tôi phóng to bằng số nguyên, trên các thiết bị khác nhau sẽ dẫn đến các giá trị pixel khác nhau không phải là bội số chính xác của kích thước của sprite gốc, bởi vì khung nhìn của tôi có tỷ lệ phù hợp với màn hình. Tôi đoán tôi sẽ phải từ bỏ nghệ thuật pixel, việc sử dụng các tài sản nghệ thuật có độ phân giải cao có thể mở rộng thành bất cứ điều gì dễ dàng hơn.
TimSim

Câu trả lời:


5

Đối với một, hàng xóm gần nhất sẽ dẫn đến tỷ lệ pixel hoàn hảo chỉ khi nó được sử dụng để nâng cấp theo bội số nguyên. Ngoài ra, bạn không nên thực hiện bất kỳ thao tác chia tỷ lệ nào trên ma trận xem / chiếu của bạn. Nếu bạn đặt chế độ xem phù hợp với kích thước của màn hình và ma trận chiếu của bạn thành hình chính tả với kích thước phù hợp với chế độ xem, tọa độ "thế giới" của bạn sẽ là pixel trên màn hình. Chế độ xem của bạn có thể thay đổi kích thước để phù hợp với các màn hình khác nhau, nhưng thực tế không nên truyền đạt yếu tố tỷ lệ, bạn chỉ nên hiển thị ít nhiều thế giới trò chơi. Hơn nữa, có lẽ bạn nên vô hiệu hóa AA và nhớ rằng trong OpenGL, trung tâm của mỗi pixel nằm ở (.5, .5), chứ không phải (0, 0).

Hãy xem những câu hỏi liên quan sau:

/programming/10040961/opengl-pixel-perinf-2d-drawing

/programming/16511374/pixel-perinf-projection-matrix-in-opengl


1
Nox nói: "hãy nhớ rằng trong OpenGL, trung tâm của mỗi pixel nằm ở (.5, .5), chứ không phải (0, 0)." <== thông tin siêu quan trọng!
david van brink

2

Bạn cần lấy trung bình các pixel sprite hiển thị bên dưới mỗi pixel màn hình. Các pixel sprite có thể được lấy mẫu "gần nhất", nhưng để di chuyển mượt mà theo gia số pixel trên màn hình, bạn cần một số loại chồng chéo.

Nếu bạn đang sử dụng OpenGL, bạn có thể thực hiện điều này trong trình đổ bóng của mình bằng cách lấy trung bình 4 hoặc 9 mẫu sprite trở lên bù gần mỗi phân đoạn (được tính trong một pixel màn hình). Ngoài ra, hiển thị cảnh của bạn với kích thước màn hình gấp 4 hoặc 9 lần trở lên, sau đó giảm với mức trung bình. (Điều này có thể có sẵn trực tiếp trên nền tảng của bạn hoặc được triển khai dưới dạng trình đổ bóng, nhưng chỉ chạy một lần ở cuối thay vì mỗi sprite.)

Cái nào hiệu quả hơn phụ thuộc vào cảnh, số lượng sprite & c.

- EDIT: Thêm một cách tiếp cận - Làm cho các họa tiết của bạn được phóng to trước, pixelated nhưng đẹp và to, và sử dụng phép nội suy tuyến tính. Theo cách đó, khi "cạnh pixel" (lớn) nằm dưới một đoạn, bạn sẽ có được sự pha trộn.

Tất cả các phương pháp này đều có nguy cơ bị dồn nén, nếu các pixel sprite có kích thước gần với pixel màn hình hoặc nếu chúng khớp nhưng bù lại một phần. Tôi nghĩ rằng một quy tắc tốt sẽ là, nếu sprite và pixel màn hình khớp chính xác và được căn chỉnh: Có vẻ tốt. Khác, các họa tiết nên được thu nhỏ ít nhất 2.0+ và tính trung bình một phần, để đảm bảo ít nhất một pixel màn hình được tô màu đầy đủ trên mỗi pixel sprite.


1

Bạn sẽ muốn xem xét các thuật toán lọc nâng cao nghệ thuật pixel ( http://en.wikipedia.org/wiki/Image_scaling ). Chúng được thiết kế đặc biệt để nâng cấp nghệ thuật pixel, có các thuộc tính của (1) giữ lại bảng màu gốc (còn gọi là không làm mờ) và (2) loại bỏ răng cưa (răng cưa xảy ra do lấy mẫu neightbour gần nhất).

Một số tên của thuật toán là: Eagle, 2XSAI, Super Eagle, Super 2XSAI, Scale2X, Scale3X, HQ2X, HQ3X, HQ4X, 2XBR, 3XBR, 4XBRZ. Chúng ít nhiều được sắp xếp theo thứ tự từ đơn giản đến phức tạp, với 4XBRZ là hình thức ưa thích của tôi.

Tất cả đều hoạt động với các yếu tố phóng đại số nguyên (2, 3 và 4). Cách tiếp cận thông thường để thu được độ phóng đại không nguyên là lấy số nguyên gần nhất lớn hơn hệ số phóng đại mong muốn và thu nhỏ hình ảnh thu được (sử dụng phép nội suy neightbour hoặc tuyến tính gần nhất). Một cách khác là lấy số nguyên gần nhất nhỏ hơn độ phóng đại mong muốn của bạn và thêm viền xung quanh ảnh. Sự lựa chọn giữa hai cách tiếp cận này tùy thuộc vào phong cách nghệ thuật pixel và sở thích cá nhân của bạn.

Chỉnh sửa: Tôi đã chạy hình ảnh của bạn thông qua việc triển khai Eagle, Scale2X và Scale3X tôi đã thực hiện một lúc trước. Dưới đây là các kết quả theo thứ tự (được phóng to bởi x2 để bạn có thể thấy rõ hơn thuật toán làm gì với các pixel). Scale3X là thuật toán phức tạp nhất, và theo tôi cũng có vẻ tốt nhất. Có nhiều thuật toán phức tạp hơn trong danh sách mà tôi đã đề cập ở trên, vì vậy bạn sẽ muốn thử nghiệm nhiều thuật toán hơn.

chim ưng Tỷ lệ2X Tỷ lệ3X


-1

Bạn cần áp dụng bộ lọc thông thấp trước khi lấy mẫu xuống (giảm tỷ lệ) xảy ra trên màn hình độ phân giải thấp.

Tôi đã sử dụng hiệu ứng làm mờ gaussian đơn giản (biến đổi tích chập) với kết quả tốt:

nhập mô tả hình ảnh ở đây

Điều này đã được thực hiện với bán kính mờ 1 pixel.


2
Xin lỗi, nhưng tôi sẽ không gọi những kết quả này là tốt
Kromster

1
Giải pháp lấy mẫu đường xuống mà bạn đề xuất hoạt động tuyệt vời cho hình ảnh tự nhiên có hầu hết các thành phần phổ tần số thấp. Một ví dụ về hình ảnh tự nhiên sẽ là hình ảnh. Trong trường hợp sử dụng TimSim, anh ta đang làm việc với hình ảnh tổng hợp. Chúng có các thành phần phổ cao do các cạnh sắc nét (gây ra bởi bảng màu hạn chế của nghệ thuật pixel). Đây là lý do tại sao hầu hết mọi người sẽ tranh luận giải pháp lọc thông thấp là không phù hợp ở đây.
Jelle van Campen

Phương pháp lọc thông thấp được sử dụng là ma trận tích chập đơn giản và hiệu suất cao hơn nhiều (và do đó phù hợp với chơi game) so với các thuật toán chia tỷ lệ khác (Eagle, v.v. đã đề cập). HDTV hiện đại sử dụng chính xác phương pháp này, đây là một giải pháp nghệ thuật hơn là kỹ thuật. So sánh hai kết quả ở trên, đó là vấn đề của hương vị mà bạn muốn nhìn chằm chằm lâu hơn. Hạ thấp một giải pháp hợp lệ và được chấp nhận là phản tác dụng. Giải pháp này đã thúc đẩy một giải pháp khác bao gồm các kết quả và cung cấp một cơ sở so sánh.
Đaminh Cerisano
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.