Làm thế nào tôi có thể thực hiện một hiệu ứng quét?


8

Tôi đang làm việc trên một nền tảng trường học cũ trong libgdx và tôi muốn nó có hiệu ứng "scanline", như thế này:

maldita castilla hiệu ứng quét

Nỗ lực đầu tiên của tôi là tạo ra một kết cấu nhỏ và vẽ nó trên một màn hình toàn màn hình. Tôi đã sử dụng hai chế độ máy ảnh chỉnh hình khác nhau (một cho sơ đồ chính của trò chơi và một để hiển thị kết cấu đường quét). Đôi khi kết cấu bị kẹt trên tilemap và đôi khi nó quá lớn và bao phủ toàn bộ màn hình màu đen.

Là cách tiếp cận của tôi bằng cách sử dụng hai máy ảnh và một kết cấu hợp lý? Một giải pháp tốt để đạt được hiệu ứng này là gì?

Câu trả lời:


4

Vấn đề với ngây thơ render texture scanline nhỏ lên một quad toàn màn hình lớn là kết cấu sẽ mở rộng quy mô, làm gì một tập hợp các scanlines single-pixel trong kết cấu dày hơn nhiều, blurrier (tùy thuộc vào phương pháp nội suy của bạn), và nói chung là xấu hơn.

Bạn nên thay gạchkết cấu trên hình tứ giác theo cách để duy trì tỷ lệ pixel-to-texel 1: 1. Điều này liên quan đến việc điều chỉnh tọa độ kết cấu của hình tứ giác sao cho chúng lớn hơn 1 ở mức xa nhất và cũng đặt tham số bọc kết cấu của bạn để lặp lại thay vì kẹp. Nếu kết cấu của bạn là 64x64 pixel và màn hình của bạn là 1024x768 pixel, bạn có thể hình rằng trong trục X, bạn phải xếp kết cấu 16 lần (1024/64). Tương tự, trên trục Y, bạn phải xếp nó 12 lần (768/64). Bạn có thể điều chỉnh toán học này cho giới hạn thực tế của kết cấu và màn hình của bạn. Sử dụng các số đó (16 và 12) làm phạm vi tối đa của tọa độ kết cấu của hình tứ giác của bạn và bạn sẽ nhận được kết quả tốt hơn nhiều. Tùy thuộc vào cách trình chiếu chính tả của bạn hiện được thiết lập cho các ô, bạn thậm chí có thể không cần thay đổi nó để hiển thị hình này.

Ngoài ra, bạn có thể thực hiện một cách tiếp cận đổ bóng: kết xuất cảnh thông thường của bạn thành một kết cấu, sau đó kết xuất kết cấu đó dưới dạng một hình tứ giác toàn màn hình, nhưng bỏ qua từng dòng pixel lẻ. Nếu bạn biết giới hạn của màn hình trong trình đổ bóng, bạn có thể thực hiện việc này khá dễ dàng (đây là mã giả , mơ hồ là HLSL-ish, nhưng nên dịch dễ dàng):

float2    screenSize;
sampler2D textureSampler;
float2    textureCoordinate;

float4 main () { 
   // Interpolation of texture coordinates means that we don't get nice
   // integer boundaries we could take the modulus of.
   float half_y = textureCoordinate.y * screenSize.y * 0.5;
   float delta = round(half_y) - half_y;
   float delta_squared = delta * delta;
   if (delta_squared < 0.1) {
      return texture2D(textureSampler, textureCoordinate);
   } 

   return float4(0,0,0,0);
}

0

Vấn đề với việc sử dụng máy ảnh là nó sẽ thu nhỏ hình ảnh. Những gì bạn về cơ bản muốn là luôn luôn vẽ cùng một hình ảnh ở cùng kích thước (100%). Tôi cho rằng nó đủ lớn để luôn bao phủ toàn bộ màn hình.

Nếu đây là trường hợp, một giải pháp sẽ là áp dụng chuyển đổi nghịch đảo của máy ảnh trên hình ảnh để nó có kích thước "pixel perfect".

Tùy chọn dễ dàng hơn sẽ là tự mở rộng quy mô. Ví dụ. nếu máy ảnh của bạn được phóng to lên 75%, hình ảnh của bạn sẽ được thu nhỏ lại thành 133% ( 1/0.75).


bạn nói rằng hình ảnh phải đủ lớn để bao phủ toàn bộ màn hình, không thể lấp đầy một chút chỉnh lưu với một kết cấu nhỏ?
Alexandre GUIDET

@AlexandreGUIDET Tôi không chắc chắn. Tôi sử dụng một kết cấu để mờ dần trong và ngoài, và đó là pixel 1x1 được chia tỷ lệ. Đối với đường quét, bạn muốn nó lặp lại. Bạn nên kiểm tra xem libGDX có tùy chọn này không.
tro999

@AlexandreGUIDET bạn đã thử điều này?
tro999

Tôi chọn một cách tiếp cận khác bằng cách sử dụng máy ảnh khác và vẽ hiệu ứng đường quét phía trên cảnh. Tôi vẫn chưa hài lòng với kết quả này vì cảnh dường như bị trượt phía sau đường quét. Bạn nghĩ gì về việc sử dụng một shader thay thế?
HƯỚNG DẪN Alexandre 6/12/13
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.