Cách hiệu quả để vẽ phác thảo xung quanh các họa tiết

Tôi đang sử dụng XNA để lập trình một trò chơi và đã thử nghiệm nhiều cách khác nhau để đạt được hiệu ứng 'được chọn' trên các họa tiết của tôi. Vấn đề tôi gặp phải là mỗi lần nhấp được vẽ trong spritebatch được vẽ bằng cách sử dụng nhiều hơn một sprite (mỗi đối tượng có thể được tạo thành tối đa 6 sprite).

Tôi đánh giá cao nếu ai đó có thể tư vấn cho tôi về cách tôi có thể đạt được việc thêm một phác thảo vào các họa tiết X pixel của mình (vì vậy chiều rộng của phác thảo có thể là số lượng khác nhau của toàn bộ pixel).

Cảm ơn trước,

• Greg.

Cho đến nay, cách dễ nhất để làm điều này (có lẽ là cách tốt nhất, trừ khi bạn thực sự bị ràng buộc về hiệu suất) là có hai bản sao của các họa tiết của bạn.

• Phiên bản thông thường
• Một phiên bản "không béo", không màu - về cơ bản là phiên bản màu trắng của sprite X - nhiều pixel của bạn "béo hơn" so với bản gốc.

Vẽ toàn bộ đối tượng của bạn bằng phiên bản "béo", sau đó vẽ phiên bản thông thường lên trên cùng.

Bằng cách làm cho phiên bản "béo" thành màu trắng, bạn có thể sử dụng pha màu tích hợp của SpriteBatch để thay đổi màu sắc lựa chọn một cách linh hoạt.

Để tạo bản án "béo" của bạn, tôi khuyên bạn nên viết Tiện ích mở rộng đường ống nội dung có thể tự động lấy các họa tiết gốc của bạn, đọc kênh alpha của chúng, tạo kênh alpha mới bằng cách lấy mẫu kênh alpha tối đa trong ảnh gốc X - nhiều pixel xung quanh mỗi pixel, và đặt RGB = (1,1,1).

Bạn sẽ phải đảm bảo tất cả các họa tiết của bạn có đủ đường viền trong suốt để thêm đường viền (bạn có thể kiểm tra điều này trong bộ xử lý nội dung - và thậm chí nhường chỗ nếu cần thiết).

Nếu bạn chỉ có một vài họa tiết, thì bạn chỉ có thể sử dụng trình chỉnh sửa hình ảnh tốt (GIMP, Photoshop) và thực hiện bằng tay: Kênh Alpha để chọn, mở rộng lựa chọn, chọn thành alpha, tô màu kênh trắng.

Tôi đoán bạn cần phải vẽ tất cả các phần mà mỗi đối tượng vào một sprite đầu tiên. Sau đó, tôi nghĩ rằng bạn phải viết một shader để phát hiện các cạnh của sprite vẽ một pixel bất cứ khi nào nó tìm thấy một cạnh. Tôi hy vọng phải có một số shader ngoài đó để làm điều này, mà bạn có thể sử dụng hoặc cổng.

Tùy thuộc vào yêu cầu, những gì cũng có thể có hiệu quả chỉ là tạo ra một phác thảo theo yêu cầu cho sprite. Tôi cho rằng các họa tiết của bạn có độ trong suốt và có hình dạng bất thường thay vì chỉ là hình chữ nhật (trong khi điều này sẽ hoạt động tốt cho điều đó, hình chữ nhật phác thảo nên là Trivial).

when selected:
   outline = new sprite canvas of appropriate size
   for sprite in object:
      # use larger numbers for thicker outlines
      for x in (-1, 0, 1) and y in (-1, 0, 1):
         render sprite mask into canvas at x,y with desired color

Lưu ý rằng bạn không cần phải làm điều này mỗi lần vẽ (mặc dù tôi cho rằng bạn có thể), nhưng chỉ cần tạo sprite phác thảo mới khi chuyển sprite.

Cách tiếp cận đơn giản nhất là xây dựng hai bản sao của mỗi sprite, một bản thường và một bản được tô sáng. Sau đó chỉ cần trao đổi chúng khi được tô sáng.

Nếu bạn có bộ nhớ dự phòng thì không cần phải phức tạp hơn nữa. Các nghệ sĩ Plus có toàn quyền kiểm soát giao diện khi được tô sáng để bạn có thể phác thảo hoặc bất cứ điều gì bạn muốn.

Làm thế nào về mỗi sprite, cũng có một sprite khác đó là một phác thảo của sprite cơ sở. Khi vẽ một đối tượng được phác thảo, vẽ các họa tiết cơ sở, sau đó tạo mặt nạ kết xuất kết hợp, sau đó vẽ các họa tiết phác thảo không bao gồm mặt nạ.

Một vài giải pháp khác nhau với sự đánh đổi khác nhau.

Dễ nhất: Kết xuất đối tượng bằng cách sử dụng màu phẳng nhiều lần và làm biến đổi vị trí (bù trái, lên, xuống, phải, v.v.), điều này sẽ tạo ra một phiên bản phác thảo của bất cứ thứ gì bạn hiển thị trên nó, nhưng có chi phí hiệu năng và sẽ không cho phép các đường viền chất béo mà không có nhiều kết xuất thêm. Đường viền một hoặc hai pixel có thể ổn với 4x.

Nhanh nhất: Xử lý trước kết cấu và có một bản sao đã được viền, hoặc chỉ là đường viền hoặc là mặt nạ 8 bit màu xám phẳng mà bạn có thể tô màu trong một shader. Điều này có thể sẽ nhanh chóng với chi phí của bộ nhớ.

Tốt nhất: Ý kiến ​​của tôi, nhưng việc tạo đại diện Trường khoảng cách đã ký (SDF) cho đối tượng của bạn có thể sẽ là giải pháp tốt nhất. Các kết cấu này có thể nhỏ hơn nhiều so với kết cấu nguồn và vẫn thu được dữ liệu hữu ích. Về cơ bản, mỗi pixel mã hóa khoảng cách từ đối tượng được sử dụng để tạo ra nó. Với dữ liệu này trong tay, bạn có thể viết tất cả các loại hiệu ứng từ phát sáng đến phác thảo. Đường viền có thể thay đổi kích thước và màu sắc, v.v., và vẫn là một shader tương đối rẻ và chỉ có một lần rút thêm. Nhược điểm là dụng cụ, và tiền xử lý.

Tôi không chắc chắn về sự hiệu quả, nhưng cách dễ nhất tôi có thể thấy là vẽ một phiên bản lớn hơn của sprite theo màu bạn muốn chọn trước. Vẽ sprite trên đó. Bạn sẽ chỉ nhìn thấy cạnh của sprite đầu tiên, cho hiệu ứng lựa chọn.

EDIT: Tuy nhiên, như bạn có thể thấy từ các bình luận, đây không phải là một ý tưởng tốt.

Tôi đồng ý với việc nhân rộng sprite. Bởi Xa tuyến đường dễ nhất, và bạn có thể áp dụng nó để chọn BẤT K sp sprite nào mà không phải tạo thêm các họa tiết đặc biệt cho mục đích này.

• tức là spriteOutline.Scale = spriteOrigen.Scale * 0.1f; spriteOutline.Color = Màu mới (255, 0, 0, 255);

Thay thế màu của sprite ban đầu bằng màu phác thảo (hoặc thậm chí pha màu nếu bạn muốn). Kết xuất sprite phẳng hoặc tô màu này bốn lần với độ lệch 1 pixel: tại x, y = (- 1, -1), sau đó (+ 1, -1), sau đó (-1, + 1) sau đó (+1 , +1). Lặp lại cho tất cả các sprite tạo nên đối tượng.

Sau đó, kết xuất các họa tiết gốc theo thứ tự thích hợp trên đầu tại (0,0).