Làm cách nào để tạo một shader pixel retro retro cho các sprite 2D được chuyển đổi để duy trì độ trung thực của pixel?


10

Hình ảnh bên dưới hiển thị hai họa tiết được hiển thị với lấy mẫu điểm trên nền:

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

  • Hộp sọ bên trái không có xoay / chia tỷ lệ được áp dụng cho nó, vì vậy mọi pixel đều khớp hoàn hảo với nền.
  • Hộp sọ bên phải được xoay / thu nhỏ và điều này dẫn đến các pixel lớn hơn không còn được căn chỉnh theo trục .

Làm cách nào tôi có thể phát triển trình đổ bóng pixel sẽ hiển thị sprite được chuyển đổi ở bên phải với các pixel được căn chỉnh theo trục có cùng kích thước với phần còn lại của cảnh?

Điều này có thể liên quan đến cách mở rộng quy mô sprite trong các trò chơi cũ như Đảo Khỉ, bởi vì đó là hiệu ứng tôi đang cố gắng đạt được, nhưng có thêm xoay vòng.


Biên tập

Theo đề xuất của kaoD, tôi đã cố gắng giải quyết vấn đề như một quá trình hậu kỳ. Cách tiếp cận đơn giản nhất là kết xuất đến một mục tiêu kết xuất riêng biệt trước tiên (được ghép xuống để phù hợp với kích thước pixel mong muốn) và sau đó nâng cấp nó khi hiển thị lần thứ hai. Nó đã giải quyết các yêu cầu của tôi ở trên.

Đầu tiên tôi đã thử làm nó Linear -> Pointvà kết quả là thế này:

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

Không có biến dạng nhưng kết quả trông mờ và nó mất hầu hết các màu nổi bật. Theo ý kiến ​​của tôi, nó phá vỡ cái nhìn retro tôi cần.

Lần thứ hai tôi đã thử Point -> Pointvà kết quả là thế này:

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

Mặc dù méo mó, tôi nghĩ rằng nó có thể đủ tốt cho nhu cầu của tôi, mặc dù nó trông đẹp hơn như một hình ảnh tĩnh hơn là trong chuyển động.

Để chứng minh, đây là video về hiệu ứng, mặc dù YouTube đã lọc các pixel ra khỏi nó:

http://youtu.be/hqokk58KFmI

Tuy nhiên, tôi sẽ để câu hỏi mở thêm vài ngày nữa trong trường hợp ai đó đưa ra giải pháp lấy mẫu tốt hơn để duy trì vẻ ngoài sắc nét trong khi giảm số lượng biến dạng khi di chuyển.


Đó được cho là một hộp sọ ...?
DeadMG

@DeadMG Một hộp sọ bò, tôi đoán vậy?
David Gouveia

Hiệu ứng đẹp, trông đẹp hơn tôi nghĩ (tôi đã thử nó trên EXTREMELY độ phân giải thấp và bảng màu, 40x30 EGA.) BTW, tôi nghi ngờ có một giải pháp lấy mẫu tốt hơn mà vẫn giữ được hiệu quả như bạn dự định. NN là khá nhiều những gì mang lại cái nhìn rõ nét đó, bất kỳ mẫu nào khác sẽ làm mờ hình ảnh cuối cùng (chỉ cần đoán dù sao đi nữa.)
kaoD

@kaoD Nhưng hãy nhớ rằng tôi đang áp dụng hai lượt. Đèo thứ hai làm đảo lộn hình ảnh sẽ vẫn là hàng xóm gần nhất để duy trì cảm giác retro. Nhưng tôi nghĩ rằng có thể có một số lợi ích trong việc thử các kỹ thuật lấy mẫu khác nhau cho lần đầu tiên. Tôi hiện đang xem xét Scale2x!
David Gouveia

@kaoD Nah, tôi bỏ cuộc. Thay đổi tham số shader giữa mỗi cuộc gọi sprite với SpriteBatchyêu cầu tôi sử dụng chế độ Ngay lập tức, vì vậy nó không đáng để gặp rắc rối. Tôi sẽ đi với điều này :)
David Gouveia

Câu trả lời:


3

Bạn nên áp dụng shader SAU KHI sprite của bạn đã được xoay.

Nếu toàn bộ cảnh chưa được tô bóng và các họa tiết của bạn thực sự bị pixel, thì thứ bạn cần là một loại bộ lọc hậu FX cho toàn bộ cảnh của bạn. Các vùng trung bình của pixel sẽ hoạt động tốt. Đó không phải là chính xác những gì bạn dự định (nó sẽ trông có vẻ được phối màu khi di chuyển / xoay) nhưng nó có thể thực hiện các mẹo.

Cách duy nhất để giữ cho vẻ ngoài retro đó trung thực với những gì bạn muốn là thực sự tự vẽ các góc quay sprite của mình. Nó không liên quan gì đến việc mở rộng quy mô như thế nào: độ phân giải thực sự kém, nói về điều đó, bạn đã thử với độ phân giải cực thấp chưa? Nó cũng có thể thực hiện các mẹo và sẽ trông tự nhiên hơn vì, thực sự, đó là nguyên nhân gây ra hiệu ứng bạn đang chăm sóc. Và nó rẻ! Rất rẻ! Trong thực tế, nó sẽ rẻ hơn so với những gì bạn đã có (thực thi shader mảnh ít hơn.)

Hiệu ứng bị hủy hoại trong hình ảnh mẫu của bạn vì độ phân giải của bạn cao so với các họa tiết của bạn, vì vậy nó cho phép bạn nhìn thấy các pixel thực trên cảnh.


Có, tôi chưa sử dụng bất kỳ shader nào. Nó chỉ là các họa tiết thông thường với kết cấu có độ phân giải rất thấp, được hiển thị với mặc định của XNA SpriteBatchvới bật lấy mẫu điểm. Nhưng một hậu fx có thể thực sự làm việc ra. Để bắt đầu, tôi sẽ thử kết xuất với lấy mẫu tuyến tính thành mục tiêu kết xuất và sau đó kết xuất toàn bộ mục tiêu kết xuất cho bộ đệm ngược với lấy mẫu điểm.
David Gouveia

@DavidGouveia đừng bỏ lỡ cơ hội nâng cấp độ phân giải của bạn. Nếu bạn thực sự muốn đạt được hiệu quả ban đầu thì đó là bức ảnh đẹp nhất của bạn. Nếu bạn cần độ phân giải cao của bạn (nếu một phần GFX của bạn là độ phân giải cao hoặc bạn muốn khớp với độ phân giải gốc), bạn vẫn có thể kết xuất với bộ đệm ngoài màn hình độ phân giải thấp và sau đó vẽ nó trong bộ đệm khung độ phân giải cao của bạn dưới dạng đầy đủ màn hình quad với bộ lọc đã tắt. Tất nhiên, hãy nhớ rằng bạn cần phải khớp tỷ lệ khung hình để tránh các pixel hình chữ nhật, tất nhiên.
kaoD

Kiểm tra chỉnh sửa của tôi :) Tôi nghĩ rằng nó đã giải quyết được hầu hết vấn đề, mặc dù tôi vẫn tò mò liệu có giải pháp lấy mẫu nào tốt hơn mà người hàng xóm gần nhất cho vấn đề này. Tôi sẽ để câu hỏi chạy một lúc lâu hơn.
David Gouveia
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.