Jak zaprojektować dobre ciągłe (bezszwowe) płytki?


33

Mam problem z zaprojektowaniem płytek, aby po złożeniu nie wyglądały jak płytki, ale wyglądały jak jednorodna rzecz. Na przykład zobacz obrazek poniżej:

wprowadź opis zdjęcia tutaj

Mimo że główna część trawy to tylko jedna płytka, nie widzisz siatki; wiesz, gdzie to jest, jeśli spojrzysz trochę uważnie, ale nie jest to oczywiste. Podczas gdy projektuję kafelki, widać tylko „och, jeez, 64 razy ten sam kafelek”, jak na tym obrazku:

wprowadź opis zdjęcia tutaj (Przykro mi, wziąłem to z innego pytania GDSE; nie bądźcie krytyczni wobec gry, ale to potwierdza moją rację. W rzeczywistości i tak mam lepszy projekt kafelków niż tym, którym zarządzam.)

Myślę, że głównym problemem jest to, że projektuję je tak, aby były niezależne, nie ma połączenia między dwoma płytkami, jeśli zostaną zamknięte. Myślę, że bardziej „ciągłe” kafelki miałyby gładszy efekt, ale nie mogę tego zrobić, wydaje mi się to zbyt skomplikowane.

Myślę, że jest to prawdopodobnie prostsze niż myślę, kiedy już wiesz, jak to zrobić, ale nie możesz znaleźć samouczka na ten temat. Czy istnieje znany sposób projektowania ciągłych / jednorodnych płytek? (Moja terminologia może być całkowicie błędna, nie wahaj się mnie poprawić).


Warto zauważyć: na zrzucie ekranu, który połączyłeś, mogą być 2 lub więcej kafelków trawy pojawiających się we wzorze szachownicy. Wyzwalacz Chrono ma wiele kafelków trawy .
doppelgreener

1
Sugeruję również szybkie wyszukiwanie zestawów kafelków RPG Maker . Nie są to topowe kafelki, ale możesz zobaczyć kilka przykładów kafelków przejściowych.
Mike Cluck

Jedną z rzeczy, która mogłaby ci pomóc, oprócz wyżej wymienionych odpowiedzi, byłoby użycie edytora grafiki pikselowej, który umożliwia podgląd kafelków podczas ich rysowania. Polecam Pickle: pickleeditor.com
Nie znaleziono użytkownika

2
jest jeszcze jeden dobry artykuł na ten temat: gas13.ru/v3/tutorials/sywtbapa_obliterating_grid.php
Tesserex

1
Dzięki, szczególnie za ten ostatni samouczek, odpowiedział na wiele innych pytań, które miałem: p
Cristol.GdM

Odpowiedzi:


20

Oświadczenie: Nie jestem artystą, więc to tylko wiedza programisty.

W twoim przykładzie efekt siatki występuje głównie z powodu tego jaśniejszego płatka trawy na dolnej krawędzi płytki:

wprowadź opis zdjęcia tutaj

Takie szczegóły, które są łatwo rozpoznawalne, natychmiast ujawniają, że powtarzasz ten sam kafelek.

Sprawdź ten artykuł, który zawiera wiele przydatnych wskazówek na ten temat. W szczególności za pomocą Photoshopa:

  • Użyj narzędzia Patch, aby pozbyć się rażących szczegółów.
  • Użyj narzędzia Doge lub Burn, aby uzyskać jednolity blask wszędzie.
  • Wykonaj płynne krawędzie, usuwając obraz, a następnie używając narzędzia Łatka do mieszania krawędzi. Widziałem także ludzi, którzy kopiowali i odbijali obraz cztery razy wcześniej w tym celu.

Również na połączonym obrazie wydaje się być problem z implementacją, ponieważ podczas powiększania obrazu widać przerwy między kafelkami:

wprowadź opis zdjęcia tutaj


3
Wydaje się, że +1 duplikat i odbicie lustrzane działają dla mnie ładnie, są też narzędzia, które pomagają w tym: oto jeden z wielu samouczków - photoshoptextures.com/texture-tutorials/seamless-textures.htm - słowa kluczowe są w zasadzie „bezszwowymi teksturami”.
Oskar Duveborn

Ok, próbowałem (zarówno samouczek z odpowiedziami, jak i samouczek z komentarzami), a wyniki są DUŻO lepsze, a znajomość terminu „bezszwowa tekstura” pomoże w przyszłości, więc dzięki!
Cristol.GdM

@OskarDuveborn Nice link, ostateczny obraz wyraźnie pokazuje, jak wielką różnicę to robi!
David Gouveia

15

Nie jestem ekspertem, ale nie posiadam więcej niż jednego rodzaju kafelków trawy (nie całkiem różnych, więc ludzie zdają sobie sprawę, ale wystarczająco różni), jedną sztuczką może być posiadanie „kafelków przejścia” między 2 różnymi rodzajami kafelków. Korzystając z pokazanego przykładowego obrazu, posiadanie pół zielonego, półszarego kafelka między całkowicie szarym i całkowicie zielonym kafelkiem może pomóc w wygładzeniu przejścia. Ponadto, jeśli zrobisz te przejścia zaokrąglone i bardziej naturalnie wyglądające (jedna tekstura przechodzi w drugą), może to pomóc w uzyskaniu efektu.

Zauważ na zdjęciu z Chrono Trigger, w dolnej środkowej części, jak ma pół brązową (brud), pół zieloną (trawa), z plamami ciemniejszej trawy. Wykorzystuje również jaśniejszą trawę i kamienie, aby dodać naturalną zmienność (może przezroczysta płytka z kamieniem lub lekka trawa na wierzchu płytki trawiastej?)


5
+1 Płytki przejścia są krytyczne! Złota zasada: rób przejścia kafelkowe według potrzeb. Czy położyłeś już śnieg obok trawy? Nie? Zatem nie powinieneś mieć zestawu przejść od trawy do śniegu. Czy po raz pierwszy położyłeś lawę obok brudu? Świetnie, czas na stworzenie zestawu płytek przejściowych.
doppelgreener

11

Musisz wykonać przejścia, za każdą możliwą kompozycję wielu rodzajów płytek będziesz musiał narysować płytki, które zakończą zmianę. Możesz zdecydować, że wiele kombinacji nie jest możliwych w twojej grze, ponieważ liczba przejść, które w przeciwnym razie musiałbyś wykonać, z łatwością wzrosłaby do bardzo dużej liczby.

Zazwyczaj oznacza to mieszanie w pewien sposób właściwości rodzajów powierzchni, na przykład proste przejście trawy na brud zazwyczaj powoduje, że im mniejsze są plamy trawy, tym rzadziej, im głębiej dostaniesz się do płytki brudu. Ale w celu szybkiej naprawy możesz po prostu wygasić jedną teksturę, podczas gdy zanikając inną, lub wykonać dithering, w którym losowo wybierasz piksele z jednej z dwóch tekstur, korzystając z ważonej szansy, która zmienia się z faworyzowania jednej tekstury na drugą.

Ponadto zalecam przejście od patrzenia na płytki do wzorów sub-kafelków, rozważ ten obraz dwóch płytek, jeśli zamiast tworzyć pełne kafelki, tworzysz kształty odpowiadające czerwonej figurze, nigdy nie będziesz potrzebować więcej niż dwóch różnych powierzchni w ten sam kafelek, co znacznie ogranicza liczbę płytek przejściowych, które musisz wykonać, możesz następnie wygenerować kwadratowe płytki z tych płytek diamentowych do użycia w grze, lub możesz po prostu bezpośrednio użyć płytek diamentowych, komputery nie są bardzo wybredny w tych sprawach.

Płytka pomocnicza oznaczona na czerwono



6

Zacznij od zrobienia zwykłego kafelka. Następnie podziel płytkę poziomo i pionowo, na 4 równe części, pozostawiając ci 4 „płytki”.

Kafelek będzie teraz wyglądał następująco:

1 2
3 4

Umieść element 2 po lewej stronie elementu 1. Zrób to samo z 3 i 4. Kafelek będzie teraz wyglądał następująco:

2 1
4 3

Teraz przenieś oba dolne elementy powyżej górnych. Pozostało ci to:

4 3
2 1

Zakładając, że twój kafelek ma wymiary 32 x 32, każdy element będzie miał wymiary 16 x 16. Teraz usuwasz środek, powiedzmy 22x22 pikseli (to zależy od ciebie), pozostawiając ramkę kafelka. Ta rama będzie teraz idealnie układać się na sobie, a Ty będziesz musiał wypełnić lukę pośrodku wyjątkowością, taką jak żwir, kamień, wyższa trawa lub cokolwiek innego.

Prawdopodobnie będziesz musiał trochę poruszyć pikselami, ale kiedy będziesz mieć ramkę, będziesz w stanie wydobyć wiele unikalnych, ale idealnie kafelkowych płytek.


0

Sposób, w jaki projektuję moje płytki, wygląda następująco:

  1. Stwórz kafelek szkicu
  2. skopiuj kafelek na obraz, który jest 3 razy większy w kierunkach X i Y.
  3. skopiuj kafelek, tak aby na obrazie znalazło się 9 kopii kafelka
  4. powinieneś być w stanie zobaczyć, gdzie zaczyna się i kończy każdy kafelek, co musisz zrobić, to wziąć narzędzie do rozmycia (używam do tego GIMP) i zamazać krawędzie, aby wyglądało to jak jeden duży kafelek.
  5. Następnie skopiuj środkową płytkę z obrazu, a następnie otrzymasz ostatnią płytkę

Rezultat powinien wyglądać całkiem dobrze, gdy umieścisz wiele płytek obok siebie. Zawsze możesz powtórzyć ten proces, aby dostroić kafelki.


1
-1 W kroku 4 rozmycie nie dotyczy obu stron (np. Rozmycie na dole środkowej płytki nie pasuje do rozmycia na dole górnej płytki), więc wyniki nie są płynne. Offset jest znacznie lepszym narzędziem zapewniającym płynność.
doppelgreener

jeśli zrobisz to poprawnie, będzie wyglądać płynnie, jeśli zrobisz to równomiernie na wszystkich szwach, to okaże się dobre, jeśli zmniejszysz nacisk na narzędzie do rozmycia, możesz precyzyjnie dostroić krawędzie, aby wyglądało nawet ze wszystkich stron.
John
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.