Tạo hiệu ứng trục trặc tương tự như Watch Dogs


8

Tôi hiện đang làm việc trên một trò chơi LibGDX. Khi người dùng làm điều gì đó sai, tôi muốn tất cả đồ họa trên màn hình bị xáo trộn rất giống với hiệu ứng trục trặc / bóp méo được thấy trong trò chơi Watch Dogs (Xem bên dưới).

Câu hỏi của tôi là: hiệu ứng này có thể đạt được trong thời gian thực bằng cách viết một shader không? Nếu vậy có bất kỳ tài liệu tham khảo trực tuyến về cách làm điều này? (Tôi đã có một Google nhanh chóng nhưng tất cả những gì tôi có thể tìm thấy là làm thế nào để đạt được hiệu ứng này trong Photoshop / After Effects).

Cảm ơn sự giúp đỡ của bạn.

Màn hình bị giật: https://www.youtube.com/watch?v=EYkqC9uI8Nc

Hiệu ứng trục trặc văn bản: https://www.youtube.com/watch?v=Wj26Wp2AH-U

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


Điều này có lẽ có thể đạt được bằng cách hiển thị hình ảnh thành một kết cấu và sau đó uốn cong bộ não của bạn để đưa ra đường ống xử lý đổ bóng để đạt được nó. Câu hỏi thực sự là: bạn sẽ sử dụng nó để làm gì? Nó trông giống các dòng của một dự án cảnh demo hơn là một kỹ năng mà một lập trình viên trò chơi nên có. Tất nhiên, không đau để thử nó. Một phỏng đoán có giáo dục cho tôi biết rằng WD đã đạt được điều đó bằng cách phát phim Flash thay vì sử dụng các shader tinh vi như bạn dự định. Vì vậy, nếu một AAA không làm điều đó, tại sao bạn?
teodron

1
@teodron "Câu hỏi thực sự là: bạn sẽ sử dụng nó để làm gì?" Tôi nghĩ rằng câu trả lời cho câu hỏi "thực sự" này có thể được tìm thấy trong câu hỏi ban đầu. "Một kỹ năng mà một lập trình viên trò chơi nên có" không phải ai cũng tự giới hạn mình với những kỹ năng mà họ "nên" có. "Vì vậy, nếu một AAA không làm điều đó, tại sao bạn?" Theo nhiều cách, cách suy nghĩ này làm chậm tiến độ. Tóm lại, thông tin liên quan duy nhất mà bình luận của bạn mang lại là "uốn cong bộ não của bạn để đưa ra đường ống xử lý đổ bóng để đạt được nó" mà không có thông tin nào cả.
rootl Focus

1
Tất nhiên hiệu quả có thể đạt được trong thời gian thực. Bản đồ bù họa tiết + lớp phủ, có thể ở nhiều lớp và / hoặc hoạt hình. Tất cả đều khá tầm thường, ngoài quy trình tạo tài sản nghệ thuật, có thể mất một thời gian.
rắn5

3
Có vẻ như "hiệu ứng" mà họ sử dụng trong hình ảnh cụ thể này là chọn ngẫu nhiên các hình chữ nhật dọc mỏng và lật (đảo ngược) các màu trong hình chữ nhật này khá đơn giản để thực hiện.
AturSams 23/12/14

1
Tôi nghĩ rằng câu hỏi quá rộng ở điểm này. Có nhiều ví dụ cho hiệu ứng "trục trặc", hai trong số đó trong các liên kết mà người hỏi cung cấp và mỗi cách thực hiện hoàn toàn khác nhau. Yêu cầu chính xác của bạn là gì? Bạn cần biết những gì bạn muốn làm trước khi bạn bắt đầu thực hiện hoặc câu trả lời bạn sẽ nhận được trong trường hợp này là viết một shader.
AturSams

Câu trả lời:


6

Tạo ra cái nhìn rối mắt có thể được thực hiện trong một loạt các cách. Về bản chất, những gì chúng ta đã quen thuộc về mặt văn hóa chấp nhận là một trục trặc là tất cả mọi thứ là một sự biến dạng đột ngột của những gì sẽ có nội dung mạch lạc. Một số trục trặc phù hợp với truyền dẫn tương tự (ví dụ nhiễu trắng) và một số khác phù hợp với màn hình kỹ thuật số, ký hiệu ascii ngẫu nhiên, văn bản nhấp nháy, tạo tác (như hình chữ nhật âm). Ném ba lớp màu ra khỏi tiêu điểm (được gọi là chảy máu và) gợi nhớ nhiều hơn đến màn hình CRT. Bạn cũng có thể thêm một số sóng dọc biên độ cao tạm thời.

Để làm cho các ký tự ascii ngẫu nhiên xuất hiện:

  1. Bạn có thể sao chép chuỗi văn bản gốc và nhanh chóng sửa đổi ngẫu nhiên một số ký tự.
  2. Bạn có thể sử dụng một spritesheet như thế này và chỉ cần sử dụng ngẫu nhiên các cụm ký tự, loại bỏ chúng ngay sau đó để làm cho chúng nhấp nháy trên màn hình một cách khó lường.
  3. Để làm điều hình ảnh tiêu cực, những gì bạn đề xuất sẽ làm việc. Nó thực chất là một XOR giữa văn bản và hình chữ nhật nhiễu (nếu màu trắng là đúng và màu đen là sai).

2
Giống như bạn đã nói điều chỉnh là chìa khóa ở đây vì nó là một hiệu ứng nghệ thuật và không thuộc danh mục "làm việc" / "không hoạt động".
AturSams
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.