Как я могу создать большой космический фон, который повторяется незаметным образом

14

Как я могу создать большой космический фон, который повторяется для игры RTS. Я также хочу иметь сложные поля туманностей и пыли, но поскольку у юнитов будет достаточно места для исследования, у меня не может быть 120000px на 1200000px jpeg, поэтому я хочу, чтобы изображение повторялось, но не было линий изменения между сегментами.

Я использую это с фреймворком Babylon от Microsoft для веб-холста GL

SuperUberDuper
источник
8
Вы рассматривали просто использование процедурного шейдера вместо какого-либо изображения? Простой поиск в Интернете приводит к этому, что выглядит довольно впечатляюще: casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve
@ Leafauve На самом деле мне очень нравится эта идея. Помнит ли игра прошлые события, когда вы путешествуете на ней? Как я могу управлять этим в памяти браузера?
SuperUberDuper
@SuperUberDuper: ему не нужно «запоминать» что-либо, пока оно генерируется детерминистическим и локальным образом. Просто обновите данные, когда это необходимо.
R .. GitHub ОСТАНОВИТЬ ЛЬДА
@LeFauve: Это действительно должен быть ответ. Это намного лучше, чем ответы.
R .. GitHub ОСТАНОВИТЬ ЛЬДА
@R .. Я согласен, было бы неплохо иметь некоторый код для этого в webGL;)
SuperUberDuper

Ответы:

19
  1. Используйте параллакс-скроллинг. Имеют несколько фоновых слоев, которые прокручиваются с разной долей скорости основной точки обзора. Чем ниже слой, тем медленнее он прокручивается. Это не просто отличный способ создать иллюзию глубины, но и заставляет фоны выглядеть менее повторяющимися, потому что объекты на разных слоях будут появляться в разных композициях из-за несинхронизации слоев.

  2. создавайте свои фоны процедурно. Вместо одного огромного фонового рисунка, имейте несколько разных более мелких элементов и размещайте их все несколько раз случайным образом по всему игровому миру.

И, кстати: не используйте JPEG, если вы можете избежать его. Это формат с потерями, который теряет больше качества при каждом изменении и сохранении, он сильно оптимизирован для фотографий и не поддерживает прозрачность. Используйте формат без потерь с альфа-каналом, как PNG. Единственная веская причина может быть в том, что ваше исходное изображение доступно только в формате JPEG (НАСА опубликовало множество прекрасных астрономических изображений, которые все находятся в открытом доступе), и вы не хотите вносить в них никаких изменений.

Philipp
источник
7

Способ создания бесконечного фона для 2D-игры заключается в следующем:

  1. С помощью программного обеспечения для графического редактора (например, iDraw для Mac) создайте изображение A , представляющее часть вашего фона. Это изображение должно иметь ограниченный размер.
  2. Дублируйте A и отразите его на оси Y, это B
  3. Теперь вставьте (горизонтально) тогетер A и B, это AB .
  4. Наконец, импортируйте изображение AB в свою игру и повторяйте его по горизонтали с помощью кода столько раз, сколько вы хотите.

Надеюсь это поможет.

Лука Ангелетти
источник
2
Ограниченный размер, но не слишком ограниченный. Чем меньше плитка, тем более очевидным будет повторение.
Цао
1
Или вместо зеркального отображения используйте фильтр «Смещение» в Photoshop и отметьте клонирование над границами или просто воспользуйтесь фильтром GIMP «Make Seamless» (Фильтр → Карта → Make Seamless).
wchargin
5

Слои работают хорошо.

Вот немного математики:

Предположим, у вас есть железнодорожная колея, которая была плохо сделана, и вы __ __заметили разрыв между ними. Когда колесо переворачивает их, оно делает маленький надрез (крошечный надрез).

Если длина колеи равна lрадиусу колеса, rто это и 2pi rесть окружность колеса, а ration=l/(2pi r)если отношение равно, скажем, 10,25, то колесо будет получать выемку в нем каждую четверть, поскольку оно движется долго.

Это самый простой способ объяснить закрывающие пространства.

Итак, предположим, что у вас есть два изображения, если у одного из них будет четверть пропорции, вы получите 4-фазный шаблон, он будет повторяться после 4 плиток. Предположим, у вас есть 1 основной фон и 2 наложения с фазами m и n. Затем шаблон будет повторяться после m * n плиток.

Хотя это не имеет большого значения, шаблон будет выглядеть лучше, если числа будут взаимно простыми, то есть наибольший общий делитель равен 1. Например, предположим, что у нас есть что-то из фазы 6 и что-то из фазы 4, все остальные фазы они будут «выстраиваться в некотором смысле.

Вы можете использовать эту технику (особенно с частицами и прочим), чтобы создать множество «уникальных» вещей без особых усилий.

Возвращаясь к колесу поезда, если соотношение нерационально, то выемки закроют колесо! Но это не имеет значения.

Алек Тил
источник
5

Вот еще одна идея, которая, кажется, отсутствует:

В случае дальних фонов, таких как скайбоксы, слои Parallax не очень хорошо себя чувствуют. Подумайте, например, о звездах: когда вы идете по земле или, что еще лучше, всю ночь, все звезды движутся вместе, хотя мы знаем, что они на расстоянии сотен или тысяч световых лет друг от друга. Дело в том, что они слишком далеко, чтобы мы могли заметить их расстояния. Все это говорит о том, что мы все еще хотим, чтобы очень большая текстура (скажем, 120k * 120k) была нарисована с нашей ограниченной вычислительной мощностью (которая может обрабатывать не более 8k * 8k). Как и при использовании нескольких слоев параллакса, вы должны создавать разные текстуры, каждая из которых имеет разные виды деталей. Например, одна представляет галактики, другая - кучу звезд и т. Д. Но на этот раз вместо того, чтобы перемещать их с разными скоростями, они должны различаться по размерам. Вот пример: рассмотрите возможность использования 3 текстур, один - 2048 * 2048, другой - 729 * 729, а третий - 625 * 625. Поскольку эти числа взаимно просты друг с другом, при объединении этих 3 текстур в 3 слоях необходимо отодвинуть lcm (2048,729,625) = 764M пикселей от начала координат, чтобы увидеть нарисованную вещь, что похоже на бесконечность. На самом деле вы можете добавить другие слои или изменить размер каждой текстуры, и вы всегда будете иметь такой большой результат, какнаименьшее общее кратное размеров текстур.

Ali1S232
источник
2
Это и ответ @ AlecTeal описывает метод, называемый принципом цикады . Это простой способ создать не случайный, очень большой неповторяющийся фон с очень маленькими ресурсами.
Ли Райан
4

Похоже, это работа для процедурного пиксельного шейдера.

Преимущества перед использованием изображения:

  • Вам не нужно предоставлять огромные растровые изображения
  • Это процедурный процесс, поэтому не нужно повторять фиксированное изображение (оно может меняться бесконечно)
  • Если вам нужен эффект паралакса, вы можете смоделировать тысячи самолетов, что было бы непрактично при использовании изображений
  • Вы можете сделать очень продвинутые эффекты, такие как динамическое освещение
  • Большая часть обработки выполняется вашим графическим процессором, оставляя процессор свободным для других частей вашей игры

Простой поиск в Интернете приводит к созданию этого шейдера http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html который выглядит так, как вы ищете.

Я не эксперт по WebGL, но согласно этой странице , похоже, что он использует обычный язык GLSL (это язык C-Like, используемый графическими картами для программирования шейдеров). Это означает, что у вас, вероятно, не будет практически никаких изменений, чтобы заставить его работать.

Однако вы можете попробовать начать с более простого шейдера, чтобы понять, как он работает.

Эта страница блога перечислены все шаги для реализации шейдера в WebGL. Это хорошее место для начала.

Еще одним хорошим местом для поиска замечательных примеров шейдеров является https://www.shadertoy.com/

LeFauve
источник
Отличное спасибо !!! Теперь мне сложно выбрать ответ!
SuperUberDuper
2
Что ж, если у вас есть шанс попробовать шейдеры, это определенно будет полезно в долгосрочной перспективе, если вы хотите делать красивые игры. Первый шаг немного высок (у меня ушло 2 недели, чтобы мой первый шейдер выглядел так, как я хотел), но в конечном итоге это того стоило.
LeFauve
2

Вы можете разрезать большой JPEG-файл на маленькие сегменты и поместить их (видимую часть), вам даже не нужно постоянно сохранять их в памяти.

И как старые игры некоторые «плитки» могут повторяться. Это было обычное решение для консоли NES, которое даже поддерживалось оборудованием.

Алексей Шестаков
источник
1
Очень трудно, если не невозможно, разрезать JPEG на более мелкие JPEG, которые будут сшиваться без визуальных сбоев из-за потери сжатия. Если вы выбираете тайлы, вам придется использовать формат сжатия без потерь, например PNG.
LeFauve
1
Я согласен , что PNG может быть лучше, в другой стороны, текстуры JPEG распространены в 3D - графики, и более важные использовать JPEG 16x16 блоки для кодирования en.wikipedia.org/wiki/Macroblock правильный разрез можно не заметить , если не делать кодирования в низшем темп.
Алексей Шестаков