Jak mogę stworzyć tło dużej przestrzeni, które powtarza się w niezauważalny sposób?


14

Jak mogę stworzyć tło z dużą przestrzenią, które będzie się powtarzać w grze rts. Chcę też mieć złożone pola mgławic i pyłu, ale ponieważ jednostki będą miały dużo miejsca do eksploracji, nie mogę mieć 120000px na 1200000px jpeg, więc chcę, aby obraz się powtarzał, ale nie chcę zmieniać linii między segmentami.

Używam tego z frameworkiem Babylon firmy Microsoft do płótna WWW GL


8
Czy zastanawiałeś się nad użyciem shadera proceduralnego zamiast jakiegokolwiek obrazu? Prosta wyszukiwarka internetowa wygląda bardzo imponująco: casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve

@LeFauve Właściwie podoba mi się ten pomysł. Czy gra pamięta rzeczy wygenerowane w przeszłości, gdy wracasz na nią? Jak mogę zarządzać tym w pamięci przeglądarki?
SuperUberDuper

@SuperUberDuper: Nie ma potrzeby „zapamiętywania” czegokolwiek, o ile jest ono generowane w sposób deterministyczny i lokalny. Po prostu ponownie wygeneruj dane, gdy tylko będą potrzebne.
R .. GitHub ZATRZYMAJ LOD

@LeFauve: To naprawdę powinna być odpowiedź. To o wiele lepsze niż udzielone odpowiedzi.
R .. GitHub ZATRZYMAJ LOD

@R .. Zgadzam się, fajnie byłoby też mieć trochę kodu w webGL;)
SuperUberDuper

Odpowiedzi:


19
  1. Użyj przewijania paralaksy. Mają wiele warstw tła, które przewijają się z różnymi ułamkami prędkości głównego punktu widzenia. Im niższa warstwa, tym wolniej się przewija. To nie tylko świetny sposób na złudzenie głębi, ale także sprawia, że ​​tła wyglądają mniej powtarzalnie, ponieważ obiekty na różnych warstwach pojawią się w różnych kompozycjach, ponieważ warstwy nie są zsynchronizowane.

  2. stwórz swoje tła proceduralnie. Zamiast jednej wielkiej grafiki w tle, miej wiele różnych mniejszych elementów i umieść je wszystkie wielokrotnie losowo w całym świecie gry.

A tak przy okazji: nie używaj JPEG, kiedy możesz tego uniknąć. Jest to format stratny, który traci jakość za każdym razem, gdy go modyfikujesz i zapisujesz, jest mocno zoptymalizowany pod kątem fotografii i nie obsługuje przezroczystości. Użyj bezstratnego formatu z kanałem alfa, takim jak PNG. Jedynym dobrym powodem jest to, że twój obraz źródłowy jest dostępny tylko w formacie JPEG (NASA opublikowała wiele ładnych zdjęć astronomicznych, które są własnością publiczną) i nie chcesz na nich dokonywać żadnych modyfikacji.


7

Sposób na zbudowanie nieskończonego tła dla gry 2D jest następujący:

  1. Za pomocą oprogramowania do edycji grafiki (takiego jak iDraw dla komputerów Mac) utwórz obraz A, który reprezentuje część tła. Ten obraz powinien mieć ograniczony rozmiar.
  2. Zduplikuj A i wykonaj kopię lustrzaną na osi Y, to jest B
  3. Teraz wklej (poziomo) razem A i B, to jest AB .
  4. Na koniec zaimportuj obraz AB do gry i powtórz go poziomo za pomocą kodu tyle razy, ile chcesz.

Mam nadzieję że to pomoże.


2
Ograniczona wielkość, ale nie zbyt ograniczone. Im mniejsza płytka, tym bardziej oczywiste będzie powtórzenie.
cHao

1
Lub zamiast tworzenia kopii lustrzanej użyj filtra Przesunięcie w Photoshopie i sklonuj stempel ponad granicami, lub po prostu użyj filtra GIMP „Wykonaj bezproblemowo” (Filtr → Mapa → Wykonaj bezproblemowo).
wchargin

5

Warstwy działają dobrze.

Oto kilka matematyki:

Załóżmy, że masz tor kolejowy, który został źle wykonany, w ten sposób __ __zauważają przerwę między nimi. Kiedy koło się po nich toczy, robi małe wycięcie (małe wycięcie).

Jeśli długość toru wynosi, la koło ma promień, rwówczas 2pi rjest to obwód koła, ration=l/(2pi r)jeśli stosunek wynosi powiedzmy 10,25, wówczas koło dostanie się w nim co kwartał, ponieważ jeździ długo.

Jest to najprostszy sposób, w jaki mogę wyjaśnić pokrycie przestrzeni.

Załóżmy, że masz dwa obrazy, jeśli jeden ma ten stosunek ćwiartki, otrzymasz wzór 4-fazowy, powtórzy się po 4 kafelkach. Załóżmy, że masz 1 główne tło i 2 nakładki z fazami min. Następnie wzór powtórzy się po m * n kafelkach.

Chociaż nie będzie to miało większego znaczenia, wzór będzie wyglądał najlepiej, jeśli liczby są równe liczby pierwsze, to największy wspólny dzielnik to 1. Na przykład załóżmy, że mamy coś z fazy 6 i coś z fazy 4, w każdej innej fazie będą one „ustawiać się w linii " w sensie.

Możesz użyć tej techniki (szczególnie z cząstkami i innymi rzeczami), aby stworzyć wiele „unikalnych” rzeczy przy bardzo małym wysiłku.

Wróć do koła pociągu, jeśli stosunek jest nieracjonalny, wówczas wycięcia zakryją koło! Ale to tak naprawdę nie ma znaczenia.


5

Oto kolejny pomysł, którego chyba brakuje:

W przypadku tła na duże odległości, takiego jak niebo, warstwy Paralaksy nie są naprawdę dobre. Pomyśl na przykład o gwiazdach, gdy chodząc po ziemi, a jeszcze lepiej przez całą noc, wszystkie gwiazdy poruszają się razem, chociaż wiemy, że są setki lub myśli w odległości roku świetlnego od siebie. Chodzi o to, że są zbyt daleko, abyśmy mogli zauważyć ich odległości. Wszystko to powiedziało, że nadal chcemy bardzo dużej tekstury (powiedzmy 120k * 120k), która zostanie narysowana przy naszej ograniczonej mocy obliczeniowej (która może obsłużyć co najwyżej 8k * 8k). Podobnie jak w przypadku korzystania z wielu warstw paralaksy, należy tworzyć różne tekstury, każda z różnymi rodzajami szczegółów. Na przykład jedna reprezentuje galaktyki, druga to wiązka gwiazd itp. Ale tym razem zamiast przesuwać je z różnymi prędkościami, powinny różnić się wielkością. Oto przykład: rozważ użycie 3 tekstur, jeden to 2048 * 2048, drugi to 729 * 729, a trzeci to 625 * 625. Ponieważ te liczby są wzajemnie kopiowane, łącząc te 3 tekstury w 3 warstwach, należy przesunąć lcm (2048,729,625) = 764 mln pikseli od początku, aby zobaczyć, że rysowana jest ta sama rzecz, co trochę przypomina nieskończoność. W rzeczywistości możesz dodać inne warstwy lub zmienić rozmiar każdej tekstury i zawsze uzyskasz wynik tak duży jaknajmniej wspólna wielokrotność rozmiarów tekstur.


2
To i odpowiedź @ AlecTeal opisuje technikę zwaną Zasadą Cykady . Jest to prosty sposób na utworzenie nielosowego, bardzo dużego, powtarzającego się tła przy bardzo niewielkich zasobach.
Lie Ryan

4

Wydaje się, że jest to zadanie dla proceduralnego modułu cieniującego piksele.

Korzyści z używania obrazu to:

  • Nie musisz dostarczać wielkich bitmap
  • Ma charakter proceduralny, więc nie musi powtarzać ustalonego obrazu (może zmieniać się w nieskończoność)
  • Jeśli chcesz uzyskać efekt paralaksy, możesz symulować tysiące samolotów, co byłoby niepraktyczne przy użyciu obrazów
  • Możesz robić bardzo zaawansowane efekty, takie jak dynamiczne oświetlenie
  • Większość przetwarzania jest wykonywana przez twój procesor graficzny, pozostawiając procesor wolny dla innych części gry

Proste wyszukiwanie w Internecie powoduje wyświetlenie tego modułu cieniującego http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html, który wygląda tak, jak szukasz.

Nie jestem ekspertem od WebGL, ale według tej strony wygląda na to, że używa zwykłego języka GLSL (jest to język C-podobny używany przez karty graficzne do programowania shaderów). Oznacza to, że prawdopodobnie nie będziesz musiał wprowadzać żadnych niewielkich zmian, aby działało.

Możesz jednak spróbować zacząć od bardziej podstawowego shadera, aby zrozumieć, jak to działa.

Ta strona blogu zawiera listę wszystkich kroków umożliwiających wdrożenie modułu cieniującego w WebGL. To wydaje się dobre miejsce na początek.

Innym dobrym miejscem do znalezienia wspaniałych przykładów shaderów jest https://www.shadertoy.com/


Wielkie dzięki !!! Trudno mi teraz znaleźć odpowiedź!
SuperUberDuper

2
Cóż, jeśli masz szansę wypróbować shadery, jest to zdecydowanie coś, co przyda się na dłuższą metę, jeśli chcesz robić fajnie wyglądające gry. Pierwszy krok jest trochę wysoki (zajęło mi 2 tygodnie, aby mój pierwszy shader wyglądał tak, jak chciałem), ale na dłuższą metę warto.
LeFauve,

2

Możesz pokroić swój duży plik JPEG na małe segmenty i umieścić je (widoczna część), nie musisz nawet przechowywać go w pamięci przez cały czas.

I podobnie jak w starych grach niektóre „kafelki” mogą się powtarzać. To było powszechne rozwiązanie dla konsoli NES, które było nawet obsługiwane przez sprzęt.


1
Przecinanie pliku JPEG na mniejsze pliki JPEG, które łączą się bez wizualnych zakłóceń ze względu na utratę kompresji, są niezwykle trudne, jeśli nie niemożliwe. Jeśli wybierzesz kafelki, musisz użyć formatu pliku bezstratnej kompresji, takiego jak PNG.
LeFauve,

1
Zgadzam się, że PNG może być lepszy, z drugiej strony, tekstury JPEG są powszechne w grafice 3d, a ważniejsze JPEG używa bloków 16x16 do kodowania en.wikipedia.org/wiki/Macroblock poprawne cięcie może nie zostać zauważone, jeśli nie zrobisz kodowania na najniższym poziomie oceniać.
Alexsey Shestacov,
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.