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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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