Skuteczny sposób rysowania konturów wokół duszków

Używam XNA do programowania gry i eksperymentowałem z różnymi sposobami osiągnięcia „wybranego” efektu na moich duszkach. Problem, jaki mam, polega na tym, że każda klikalna linia rysowana w pakiecie jest rysowana przy użyciu więcej niż jednego duszka (każdy obiekt może składać się z maksymalnie 6 duszków).

Byłbym wdzięczny, gdyby ktoś mógł mi doradzić, w jaki sposób mogę osiągnąć dodanie konturu do moich duszków X pikseli (więc szerokość konturu może być różną liczbą pełnych pikseli).

Z góry dziękuję,

• Greg.

Zdecydowanie najłatwiejszym sposobem na zrobienie tego (prawdopodobnie prawdopodobnie najlepszym, chyba że jesteś naprawdę przywiązany do wydajności) jest posiadanie dwóch kopii twoich duszków.

• Zwykła wersja
• „Gruba”, bezbarwna wersja - w zasadzie biała wersja twojego duszka X-wiele pikseli „grubsza” niż oryginał.

Narysuj cały obiekt za pomocą „grubej” wersji, a następnie narysuj zwykłą wersję na górze.

Zmieniając białą wersję „grubą”, można użyć wbudowanego przyciemniania kolorów SpriteBatch, aby dynamicznie zmieniać wybrany kolor.

Aby wygenerować „grubą” wersję, zalecam napisanie rozszerzenia potoku treści, który może automatycznie pobierać oryginalne duszki, czytać ich kanał alfa, tworzyć nowy kanał alfa, próbkując maksymalny kanał alfa z oryginalnego obrazu X-wiele pikseli wokół każdego piksela, i ustawienie RGB = (1,1,1).

Musisz upewnić się, że wszystkie duszki mają wystarczającą przezroczystą ramkę, aby dodać kontur (możesz to sprawdzić w procesorze treści - a nawet zrobić miejsce, jeśli to konieczne).

Jeśli masz tylko kilka duszków, możesz po prostu użyć dobrego edytora obrazów (GIMP, Photoshop) i zrobić to ręcznie: kanał alfa do wyboru, rozwinąć wybór, wybór do alfa, wypełnić kanały koloru białego.

Myślę, że najpierw musisz narysować wszystkie elementy, z których każdy jest przedmiotem, do jednego duszka. Więc myślę, że będziesz musiał napisać moduł cieniujący, aby wykryć krawędzie duszka i narysować piksel, gdziekolwiek znajdzie krawędź. Spodziewam się, że muszą być już dostępne jakieś shadery, które możesz użyć albo przenieść.

W zależności od wymagań, skuteczne może być również utworzenie konturu na żądanie dla duszka. Zakładam, że twoje duszki mają przezroczystość i mają nieregularny kształt, a nie tylko prostokąty (choć to by działało dobrze, prostokąty konturu powinny być Trywialne).

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

Zauważ, że nie musisz tego robić przy każdym losowaniu (chociaż przypuszczam, że mógłbyś), ale po prostu utwórz nowy kontur duszka podczas przełączania duszków.

Najprostszym podejściem z użyciem brutalnej siły jest zbudowanie dwóch kopii każdego duszka, normalnego i wyróżnionego. Następnie po prostu zamień je, gdy zostanie podświetlone.

Jeśli masz wolną pamięć, nie musisz się komplikować. Dodatkowo artyści mają całkowitą kontrolę nad wyglądem, gdy są podświetleni, dzięki czemu możesz wykonać kontur lub cokolwiek innego, co chcesz.

Co powiesz na każdą duszkę, masz też inną duszkę, która jest konturem duszka podstawowego. Podczas rysowania obrysowanego obiektu narysuj duszki bazowe, a następnie utwórz maskę połączonego renderowania, a następnie narysuj duszki konturowe z wyłączeniem maski.

Kilka różnych rozwiązań z różnymi kompromisami.

Najłatwiej: Renderuj obiekt kilkakrotnie za pomocą płaskiego koloru i zniekształć pozycję (przesunięcie w lewo, w górę, w dół, w prawo itp.), Utworzy to konturową wersję tego, co na nim renderujesz, ale ma koszty wydajności i nie będzie pozwalają na tłuste obramowania bez wielu dodatkowych renderów. Obramowanie z jednym lub dwoma pikselami może być poprawne z 4x.

Najszybszy: Przetwarzaj teksturę i przygotuj kopię, która jest już obramowana lub jest tylko obramowaniem lub jest płaską 8-bitową maską w skali szarości, którą można pokolorować w module cieniującym. Będzie to prawdopodobnie szybkie kosztem pamięci.

Najlepsze: Moim zdaniem, ale najlepszym rozwiązaniem byłoby wygenerowanie reprezentacji pola podpisanego odległości (SDF) dla Twojego obiektu. Te tekstury mogą być znacznie mniejsze niż tekstura źródłowa i nadal przechwytywać przydatne dane. Zasadniczo każdy piksel koduje odległość od obiektu użytego do jego wygenerowania. Mając te dane w ręku, możesz pisać wszelkiego rodzaju efekty, od świecących do konturów. Obramowanie może zmienić rozmiar i kolor itp., I wciąż jest stosunkowo tanim shaderem i tylko jednym dodatkowym rysowaniem. Minusem jest oprzyrządowanie i przetwarzanie wstępne.

Nie jestem pewien skuteczności, ale najłatwiej widzę narysować większą wersję duszka w kolorze, który chcesz wybrać jako pierwszy. Narysuj na tym duszka. Zobaczysz tylko krawędź pierwszego duszka, dając efekt selekcji.

EDYCJA: Jednak, jak widać z komentarzy, nie jest to dobry pomysł.

Zgadzam się z powiększaniem duszka. Zdecydowanie najłatwiejsza droga, którą można zastosować do wyboru DOWOLNEGO duszka bez konieczności tworzenia dodatkowych duszek specjalnie do tego celu.

• tj. spriteOutline.Scale = spriteOriginal.Scale * 0.1f; spriteOutline.Color = nowy kolor (255, 0, 0, 255);

Zamień kolor oryginalnego duszka na kolor konturu (lub nawet przyciemnij go, jeśli chcesz). Renderuj tę płasko sprasowaną lub przyciemnioną ikonkę cztery razy z przesunięciem 1 piksela: w x, y = (- 1, -1), następnie (+ 1, -1), następnie (-1, + 1), a następnie (+1 , +1). Powtórz dla wszystkich duszków, które tworzą obiekt.

Następnie renderuj oryginalne duszki w odpowiedniej kolejności na górze w (0,0).