Jak mogę stworzyć efekt „płonący” jak na ekranie tytułowym Ocarina of Time?

102

Chciałbym odtworzyć płomienny efekt, taki jak ten z logo na ekranie tytułowym gry N64 „The Legend of Zelda: Ocarina of Time”, pokazanej poniżej:

Szybkie spojrzenie na tekstury zastosowane w pamięci ROM zapewnia pojedynczą teksturę 32x32, która wygląda podobnie do efektu, ale nie wiem, jak ten obraz (zakładając, że jest właściwy) przekształca się w efekt widoczny na logo.

Jak mogę wdrożyć coś podobnego?

graphic-effects

— nathanburns
źródło

Lekko dostosowałem twoje pytanie, aby zapytać, jak osiągnąć podobny efekt, ponieważ nie zastanawiamy się, w jaki sposób inne gry zaimplementowały określone wyniki jako tematyczne.

— Josh

Czy prosisz o technikę proceduralną, czy też wystarczy zwykłe gotowe efekty?

— Bálint

Nie mam czasu i wiedzy, aby napisać pełną odpowiedź, ale może można to zrobić za pomocą cyklu kolorów .

— Alexandre Vaillancourt

@JoshPetrie Dzięki, właśnie tego tak naprawdę

— szukałem

Z tego, co pamiętam z tej techniki, trudna część pochodzi z tworzenia obrazu z pikselami przy użyciu odpowiedniej palety, a nie kolorów jako takich. Cyklowanie odbywa się w kodzie nad podzbiorem kolorów.

— Alexandre Vaillancourt

Odpowiedzi:

248

Najpierw utwórz biało-czarną maskę swojego logo / tekstu i rozmyj ją.

Następnie utwórz powtarzalną (kafelkową) teksturę litego szumu (tutaj zastosowano GIMP)

Użyj filtru Mapa-> Kafelek ..., aby utworzyć wzór kafelkowy 3x3 (w tym przykładzie 128x128 x 3 = 384x384) dla następnego kroku, aby upewnić się, że nasza tekstura jest nadal powtarzalna - zachowamy tylko środkową część.

Użyj Rozmycie-> Rozmycie ruchu ..., aby rozmyć teksturę w górę i zachować tylko środkową 1/3 (powrót do 128 x 128)

Pomnóż obie tekstury razem na GPU i użyj tego do krycia.

Następnie animuj go, przesuwając teksturę wzoru w górę nad teksturą maski:

Wykonano dla części animacyjnej.

Następnie możesz zastosować mapę gradientu (czarny -> czerwony -> żółty -> biały), aby nadać mu ogniste kolory:

Można użyć innych kolorów, aby stworzyć upiorny niebieski ogień, jasnożółte pole aury, bardziej zadymiony efekt itp.

Teraz, jeśli połączysz to jako dodatek do swojego logo i renderowania 3D, uzyskasz pożądany efekt:

+ + =

Efekt można przyciemnić, dostosowując jasność maski i / lub wzoru i / lub kolor wierzchołków i / lub mapę kolorów gradientu do zaprojektowanego poziomu.

Możesz nawet użyć dwóch teksturowanych wzorów razem (Maska * Wzór ognia * Wzór ognia) przy różnych prędkościach i kierunkach, aby stworzyć bardziej złożony efekt ognia.

Technicznie na N64 mogli stworzyć przybliżenie maski za pomocą siatki trójkąta i koloru wierzchołka zamiast tekstury maski ze względu na ograniczenia sprzętowe N64 dotyczące tekstur, ale wynik końcowy jest taki sam ((kolor wierzchołka * tekstura wzoru) vs vs ( tekstura maski * tekstura wzoru)).

Nadal możemy używać koloru wierzchołków, ale 20 lat później możemy ułatwić sobie życie i po prostu użyć 2 lub więcej tekstur, nawet dzisiejsze mobilne karty graficzne mogą bez problemu poradzić sobie z dodatkową szarą teksturą 256 x 128.

— Stephane Hockenhull
źródło

Myślę, że mamy zwycięzcę - dzięki @StephaneHockenhull, jest to dokładnie taka technika, jakiej szukałem

— nathanburns

Święta krowa, to dobra odpowiedź!

— John Gordon,

„upiorny” czy „upiorny”?

— CJ Dennis

Ma również znaczenie „okropny wygląd”. „Nie noś tego krawata; to upiorne”. Zinterpretowałem twoje zdanie jako „Inne kolory mogą dać naprawdę zły efekt lub efekt dymu”. „Ghostly” jest jednoznaczny, nawet jeśli nie jest tak silny, jak byś chciał.

— CJ Dennis

Żałuję, że nie mogę dać wam drugiego głosu za bardzo szczere rysowanie koni.

— rozpoznawanie

Jest kilka sposobów, aby to zrobić, ale z góry mojej głowy,

1) Umieść płomienie + logo w jednym obrazie i zasadniczo animuj arkusz sprite.

2) Renderuj logo w warstwie interfejsu użytkownika i umieść wokół niego niektóre efekty cząsteczek warstwy interfejsu.

Z wyglądu tego obrazu wygląda, jakby były 3-warstwowe tarcze i miecz, płomienie, tekst (uporządkowane od tyłu do przodu).

Będzie wiele sposobów na uzyskanie podobnego efektu, który wybierzesz, zależy od silnika, w którym się rozwijasz i co możesz wdrożyć.

— nieznany SPY
źródło

Jeśli ROM zawiera małą teksturę płomienia, zgaduję, że robi się to z jakimś efektem cząsteczkowym.

Można to zrobić, umieszczając najpierw na ekranie duszka dla tytułu i logo. Następnie umieść kilka emiterów cząstek, które tworzą efekt płomienia za duszkiem tytułowym. Oznacza to, że ich głębokość Z / ekranu jest taka, że renderują się za tytułem.

Oto przykład użycia efektów cząsteczkowych GameMaker do stworzenia płomieni, które mogą dać ci kilka przemyśleń na temat potencjału tego podejścia ...

http://martincrownover.com/gamemaker-examples-tutorials/particles-fire/

— Tim Holt
źródło

Dzięki za sugestię - zakładając, że tekstura nie była podobna do tej w samouczku, z którym się połączyłeś, ale wypełniła przestrzeń 32x32 bez przezroczystości, czy istnieje oczywisty sposób, aby to zrobić z cząstkami?

— nathanburns

Po prostu stworzę własną teksturę płomienia dla cząstki, jeśli oryginał nie ma przezroczystości. Zakładam, że o ile oryginalny tytuł nie zostanie ukończony za pomocą pełnego animowanego duszka (który obejmuje efekt płomienia), prawdopodobnie będzie to efekt cząsteczkowy.

— Tim Holt,

@TimHolt Być może przeceniasz możliwości sprzętowe Nintendo 64. Wygenerowanie w ten sposób efektu płomienia wyglądającego na „solidny” prawdopodobnie wymagałoby znacznie więcej cząstek niż byłby w stanie renderować.

— duskwuff

@duskwuff - prawda, ale nie sądzę, że użytkownik wdraża to na starym sprzęcie. Odpowiedź jest wciąż aktualna dla każdego przyzwoitego (nowoczesnego) systemu.

— Tim Holt,

@duskwuff pytanie brzmi, jak go teraz wdrożyć. Pytania (i odpowiedzi) dotyczące tego, jak inne gry coś zrobiły, są tutaj nie na temat. Możliwości sprzętowe N64 są tutaj nieistotne. (Patrz komentarz Josha Petriesa do pytania)