Sprite phác thảo


9

Tôi hiện đang làm việc trên một trò chơi 2D và nhiệm vụ hiện tại của tôi là phác thảo đối tượng được chọn.

Tôi về cơ bản sử dụng một shader mờ để làm nó hoàn toàn thời gian chạy. Trước tiên tôi vẽ sprite của mình bằng cách sử dụng trình tạo bóng mờ gaussian dọc, sau đó tôi vẽ nó bằng trình tạo bóng mờ gaussian ngang, và sau đó tôi vẽ sprite bình thường.

Đây là shader mờ của tôi: sampler TextureSampler: register (s0);

#define SAMPLE_COUNT 15

float2 SampleOffsets[SAMPLE_COUNT];
float SampleWeights[SAMPLE_COUNT];


float4 PixelShaderFunction(float2 texCoord : TEXCOORD0) : COLOR0
{
    float4 c = 0;

    // Combine a number of weighted image filter taps.
    for (int i = 0; i < SAMPLE_COUNT; i++)
    {
        c += tex2D(TextureSampler, texCoord + SampleOffsets[i]) * SampleWeights[i];
    }

    return c;
}

SamplePackets là phần bù cho phép tôi kiểm tra các pixel làm tròn Số lượng mẫu là trọng số tính toán với hàm gaussian ( http://en.wikipedia.org/wiki/Gaussian_blur )

Đây là kết quả:

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

Nó không tệ, khá mượt mà, nhưng không đủ rõ ràng trong trò chơi ... Nhưng tôi muốn có thể kiểm soát độ dày (để làm cho nó lớn hơn) và thêm một phác thảo mờ đầu tiên trước khi mờ dần trong alpha (để thực hiện nó rõ hơn). Và tôi cảm thấy như gaussian mờ có lẽ không tốt như tôi nghĩ cho nhiệm vụ của mình :)

Một ý tưởng khác là tạo nó tự động từ .png (sử dụng tập lệnh photoshop để làm cho nó tự động). Tôi chỉ cần điền các pixel phác thảo bằng một màu tùy chỉnh, ví dụ lưu trữ giá trị alpha trong thành phần Red và đặt tất cả các thành phần khác thành 0. Sau đó, tôi chỉ cần áp dụng một shader thay thế các pixel trong suốt thành màu tôi muốn

float4 PixelShaderFunction2(float2 texCoord : TEXCOORD0) : COLOR0
{
    float4 color = tex2D(TextureSampler, texCoord);
    float4 newColor = 0;
    if (color.a == 0 && color.r != 0)
    {
        color.a = color.r;
        // Blue outline
        color.b = 1;
    }
}

Vấn đề là, tôi đang sử dụng nén DXT5 cho sprite của mình, vì vậy tôi không thể chắc chắn màu tôi sẽ nhận được trong shader của mình sẽ giống hệt như tôi đã viết. Đó là lý do tại sao tôi thậm chí không thử nó ... Bất kỳ suy nghĩ?

Lời khuyên nào cũng được chào đón :)


Bạn phải có khả năng kiểm soát độ dày và độ rơi alpha trong shader của mình. Muốn đăng nó để tham khảo?
Seth Battin

Tôi đã sử dụng trình tạo bóng mờ Gaussian từ mẫu này: liên kết cho phép tôi chỉnh sửa bài đăng của mình để hiển thị cho bạn về trình tạo bóng một cách chi tiết
s0ubap

Tôi không chắc chắn Gaussian Blur là phù hợp với bạn. Thay vào đó, hãy thử làm mờ xuyên tâm.
dùng1306322

Câu trả lời:


6

Những gì bạn có thể đang tìm kiếm là một hình thức phát hiện cạnh trước, sau hoặc thậm chí trước và sau khi mờ Gaussian của bạn. Có lẽ một phiên bản của Sobel Edge Recognition có thể hoạt động. Tôi biết trò chơi của bạn là 2D nhưng nếu trang wiki quá thô sơ thì đây là hướng dẫn về cách làm cho nó hoạt động trong UDK có thể dịch tốt hơn.

Phát hiện cạnh của bạn chỉ thực sự phải tìm các cạnh của kênh alpha nếu bạn cần tăng tốc.


Hấp dẫn! Tôi đã thử nó. Kết quả rất tốt, ngoại trừ khi tôi phóng to / thu nhỏ ... Các pixel xuất hiện và biến mất, dẫn đến các tạo tác không mong muốn ...
s0ubap

1
Bạn đang nhìn thấy loại cổ vật nào? Bạn có thể cung cấp một hình ảnh?
Alex Shepard

2

Những gì làm việc cho tôi với phác thảo văn bản là:

  • Chọn màu phác thảo
  • Vẽ văn bản tại (x-1, y-1) với màu phác thảo
  • Vẽ văn bản tại (x + 1, y-1) với màu phác thảo
  • Vẽ văn bản tại (x - 1, y + 1) với màu phác thảo
  • Vẽ văn bản tại (x + 1, y + 1) với màu phác thảo
  • Vẽ văn bản tại (x, y)

Bạn có thể làm điều tương tự - tất cả những gì bạn cần làm là vẽ sprite với các pixel mờ được tô màu bằng màu phác thảo của bạn. (Duy trì các giá trị trong suốt để các cạnh tròn vẫn trông tròn).

Công cụ này hoạt động, trông tốt hơn so với vẽ phiên bản thu nhỏ và có một số thuộc tính thú vị khác (như có thể kiểm soát alpha phác thảo cho độ đậm và giữ lại bất kỳ "lỗ hổng" nào trong hình ảnh sprite của bạn) - nhược điểm duy nhất là bạn có thể ' t thực sự kiểm soát chiều rộng của phác thảo quá tốt.


1

Tôi là người mới đối với tất cả những điều này, nhưng đây là ý tưởng của tôi:

Bạn có thể sử dụng kênh alpha của kết cấu để tạo kết cấu khác. Mọi giá trị alpha dưới giá trị ngưỡng sẽ được đặt thành hoàn toàn trong suốt. Bất kỳ ở trên sẽ hoàn toàn mờ đục. Sử dụng kết cấu mới này, bạn có thể đặt các giá trị của RGB thành bất kỳ màu nào bạn muốn. Chia tỷ lệ "kết cấu" mới này lớn hơn một chút so với kết cấu nhân vật của bạn. Điều này sẽ cung cấp cho bạn một màu sắc đẹp xung quanh nhân vật. Sau đó sử dụng màu đó với trình tạo bóng Gaussian của bạn để tạo ra ánh sáng được phác thảo đẹp xung quanh kết cấu đã tạo của bạn. Tôi đoán điều này có thể được thực hiện mà không tạo ra một kết cấu khác, và tất cả các shader dựa trên kết cấu nhân vật.

Điều này có ý nghĩa gì không?


Phương pháp này có một lỗ hổng lớn khi xử lý các hình dạng không lõm. Ví dụ, khi áp dụng cho một chiếc bánh rán chỉ có cạnh bên ngoài sẽ có được một phác thảo. Không đề cập đến các biến dạng độ dày phác thảo khác.
Kromster
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.