Làm thế nào để thực hiện các khu vực cạnh mềm với các hạt

Trò chơi của tôi được tạo bằng Phaser, nhưng câu hỏi đặt ra là không tin tưởng vào động cơ.

Trong trò chơi của tôi, tôi có một số môi trường, về cơ bản là các khu vực đa giác mà nhân vật người chơi có thể di chuyển vào và bị ảnh hưởng. Ví dụ: băng, lửa, chất độc, v.v ... Yếu tố đồ họa của các khu vực này là chính khu vực đa giác đầy màu sắc và các hạt thuộc loại phù hợp (trong ví dụ này là các mảnh băng). Đây là cách tôi hiện đang thực hiện điều này - với mặt nạ đa giác bao phủ một lát gạch với mẫu hạt:

Các cạnh cứng trông xấu. Tôi muốn cải thiện bằng cách thực hiện hai điều: 1. Tạo vùng điền đa giác để có cạnh mềm mại và hòa trộn vào nền. 2. Có một số mảnh vỡ đi ra khỏi khu vực đa giác, để chúng không bị cắt ở giữa và khu vực không có một đường thẳng

ví dụ (mockup):

Tôi nghĩ rằng 1 có thể đạt được bằng cách làm mờ đa giác, nhưng tôi không chắc chắn cách thực hiện với 2.

Làm thế nào bạn sẽ đi về thực hiện điều này?

1.Nếu bạn muốn thứ gì đó gần với mockup của mình, tôi sẽ sử dụng các hạt (Nó không phải là một hệ thống hạt được thổi hoàn toàn).

Kết xuất các hạt của bạn dưới dạng đa giác trên RenderTexture. Hãy chắc chắn để sử dụng hỗn hợp phụ gia trên các hạt. Các hạt bên trong đa giác sẽ hòa trộn với nhau một cách trơn tru trong khi các hạt ở bên ngoài sẽ tạo ra cạnh mềm mại mà bạn muốn. (Một ví dụ về hiệu ứng có thể được xem trong video youtube này: Video Hạt phụ Bây giờ kết xuất RenderTexture trên màn hình chính của bạn và bạn đã hoàn tất.

Bạn có thể thử đặt các hình tam giác trực tiếp lên kết cấu hạt và xem cách thức hoạt động của nó. Nếu không, hãy đặt chúng lên trên "súp hạt" của bạn dưới dạng một lớp riêng biệt.

Tạo một mockup nhanh trong một jsfiddle được cập nhật trông như thế này Bạn có thể tìm thấy bản demo được cập nhật ở đây

2.Mỗi hạt có vận tốc và nguồn gốc. Khi người chơi của bạn chạm vào đa giác, bạn thay đổi từng hạt vận tốc tỷ lệ với vận tốc của người chơi. Một hạt càng xa người chơi của bạn, nó càng ít bị ảnh hưởng bởi vận tốc của người chơi.

Công thức tính vận tốc của các hạt sẽ giống như thế này:

//player.velocity and particle.velocity are vectors 
//k is a factor to enhance or weaken the influence of players velocity
var distanceToPlayer = (player.position - particle.position).length();
particle.velocity = particle.velocity + ((k * player.velocity) + particle.velocity) * (1/distanceToPlayer);

Để tính toán vị trí của hạt bạn đặt điều này trong phương pháp cập nhật của bạn:

var speedY = -(springConstant * (particle.position.y - particle.origin.y)) - (dampingFactor * particle.velocity.y);
var speedX = -(springConstant * (particle.position.x - particle.origin.x)) - (dampingFactor * particle.velocity.x);

particle.position.y = particle.position.y + speedY;
particle.position.x = particle.position.x + speedX;

particle.velocity.x = particle.velocity.x + speedX;
particle.velocity.y = particle.velocity.y + speedY;

Điều này sẽ cung cấp cho bạn một "chất lỏng" trong đó mỗi hạt dao động xung quanh nguồn gốc của nó khi người chơi khuấy chất lỏng. SpringConstant thay đổi số lượng hạt bay ra khỏi nguồn gốc của nó và dampingFactor tốc độ của hạt đến mức nào. Bạn có thể phải điều chỉnh mã vì đây là phiên bản sửa đổi của mô phỏng 1d tôi sử dụng trong trò chơi của mình.

Bây giờ với bản demo: Bản trình diễn Chỉ cần tinh chỉnh 3 hằng số ở trên cùng cho đến khi chất lỏng hoạt động như bạn muốn.

Suy nghĩ của tôi về hai điểm này:

1. Bạn có thể sử dụng shader Blur, nhưng điều đó sẽ rất tốn kém. Thay vào đó, tôi sẽ vẽ thêm một đường viền hình tam giác mờ dần từ mờ ở trung tâm thành trong suốt ở các cạnh, để mô phỏng "mờ". Tôi đã làm điều đó trong một trò chơi của tôi và nó hoạt động khá tốt. Đây là hai ảnh chụp màn hình của một trợ thủ cầu vồng trong trò chơi của tôi.

   

   Đường viền bên ngoài có độ dốc. Trong tình huống của tôi, đường viền không bắt đầu ở cùng độ mờ như phần bên trong, nhưng nếu bạn đặt các độ mờ đó bằng nhau, bạn sẽ có một độ mờ đẹp.

2. Tôi sẽ lập trình một hệ thống hạt và làm cho các hạt theo đa giác. Bằng cách làm như vậy, bạn không phải lo lắng về những gì sẽ xảy ra ở các cạnh. Động lực học của hệ thống hạt của bạn sẽ đảm bảo rằng các hạt nằm bên trong đa giác và phân bố đều. Bạn có thể cố gắng làm cho các hạt gần nhất đẩy nhau ra xa, nhưng làm cho nó có nhiều "khối lượng" để bạn có quán tính và nó trông trơn tru. Để làm cho điều này nhanh chóng, có một số khả năng, nhưng vấn đề lớn sẽ là sự phức tạp thời gian của cơ chế đẩy nhau. Nếu bạn tạo từng hạt đẩy từng hạt khác, bạn sẽ có O (n ^ 2), điều này không tốt, nếu bạn có ví dụ 100 hạt trong hệ thống của mình. Đọc tốt về cách bạn có thể tối ưu hóa đây là bản trình bày này của PixelJunk:http://fumufumu.q-games.com/gdc2010/shooterGDC.pdf

   Một cách tiếp cận đơn giản hơn là kết nối mỗi hạt với ba hoặc bốn hạt khác khi xây dựng hệ thống hạt. Bây giờ mọi hạt sẽ chỉ phải đẩy bốn hạt khác mà nó được kết nối. Tuy nhiên, cách tiếp cận này làm cho nhiễu loạn trong hệ thống hạt của bạn là không thể. Nhưng điều này dường như không phải là một vấn đề, vì tình huống hiện tại của bạn sử dụng kết cấu tĩnh. Cách tiếp cận này sẽ là O (n) rất tuyệt vời.

Ý tưởng tôi có khi đọc bài viết của bạn là ý tưởng này:
• xây dựng một bộ gạch mà bạn sẽ sử dụng cho các khu vực của mình.
• hiển thị đa giác khu vực trên một khung vẽ tạm thời nhỏ ở độ phân giải lát (ví dụ: nếu các ô có kích thước 16X16, hiển thị ở độ phân giải thấp hơn (16X, 16X)).
• sử dụng khung vẽ tạm thời đó để quyết định thời tiết để kết xuất các ô hoặc không trên khung chính:
nếu một điểm được đặt trên khung có độ phân giải thấp, hãy vẽ một ô 'ngẫu nhiên' trên khung chính. nếu một điểm chỉ là lân cận của điểm đã đặt, hãy vẽ ô 'ngẫu nhiên' ở độ mờ thấp hơn (để thực hiện chuyển đổi) trên khung chính.

Tôi sợ rằng việc giảm độ phân giải sẽ tạo ra hiệu ứng khối, nhưng ngay cả với gạch 20X20, nó trông vẫn khá tốt:

Các bước cho việc này là: lấy đa giác của bạn:

Vẽ đa giác ở độ phân giải gạch của bạn: (!! vâng, đó là thứ màu đỏ trung tâm).

Sau đó, sử dụng imageData của khung vẽ có độ phân giải thấp để quyết định thời tiết để vẽ một ô hoặc ghi chú.
Nếu một pixel được đặt trên khung vẽ có độ phân giải thấp, điều đó có nghĩa là chúng ta nên vẽ ô: chọn chỉ số ô 'ngẫu nhiên' để chọn ô nào sẽ vẽ. Chỉ số ngẫu nhiên đó phải luôn giống nhau cho một khu vực / ô nhất định.
Nếu một điểm trống nhưng bên cạnh một điểm được lấp đầy, cũng vẽ một ô, nhưng với độ mờ một nửa.

Vì vậy, hãy vẽ gạch:

Đối với đa giác, tôi chỉ cần vẽ nhiều lần cho đa giác, thu nhỏ nó xuống và tăng độ mờ cho mỗi lần vẽ (người ta có thể sử dụng 'bật lửa' globalCompổngOperation ').

Khi bạn thêm mọi thứ, nó sẽ cung cấp:

Fiddle ở đây:

http://jsfiddle.net/gamealchemist/T7b4Y/

Hãy cho tôi biết nếu điều này sẽ giúp.

Chỉ là một ý tưởng:

Trong ô của bạn, "các mảnh" rộng nhất khoảng 80px. Tôi sẽ đề nghị, làm 2 khu vực. Bạn vẽ đa giác ban đầu của mình và bạn tạo ra một mô hình của nó khoảng 80 pixel từ mỗi cạnh. Sau đó, bạn vẽ gạch của bạn vào đa giác lớn hơn.

Sau đó, Tất cả các "mảnh" có pixel bên ngoài đa giác bên trong và không có giao điểm với đa giác bên trong, bạn có thể lấp đầy chúng với độ trong suốt.

Đây là cấp độ rất cao, nhưng tôi đoán tôi sẽ chia sẻ nó với bạn. Có rất nhiều chi tiết được xác định ở đây.

Một hình ảnh thô để chứng minh:

Nếu đa giác màu đen bên trong là bản gốc, bạn sẽ xóa tất cả các đa giác bằng dấu chấm màu đỏ.