В этой статье замутим вот такой трехслойный бесконечный фон.
Можно повесить как меню в игре, или же использовать в игровых уровнях.
Задний фон у нас статичный размерами 272х160. Средний состоит из 4-х таилов, размеры 68х38 (на фон помещается ровно 4 таких таила), и ближний план на котором генерируются различные деревья с разной скоростью движения.
Средний план.
Само по себе движение тут не представляет ничего сложного. Всё что нам надо делать — вычитать по оси Х некоторое количество единиц, и при достижении спрайтом левого угла экрана (или же координат 0.0) перекидывать спрайт в правый угол, откуда он снова начнет своё движение.
Код :
Делаем дубликаты таила , раскладываем по уровню и стартуем !
И … можем заметить какую то рванину ….
Если мы сайчас попробуем узнать позицию спрайта после сработки условия , то увидим что она не равна нулю, а зачастую находится недалеко в минусе. Что в общем то вполне логично.
И именно эта разница в пикселях дает нам такие разрывы между спрайтами.
Давайте добавим эти выпадающие единицы в код, и посмотрим что получилось.
Результат:
Разрывов больше нет, и это прекрасно.
Поехали дальше.
Ближний план.
Так как ближний план это рандомно появляющиеся деревья имеющие разную скорость, то я решил сделать один скрипт на 4 разных дерева.
Тут тоже нет ничего сложного.
По таимеру мы переключаем переменную, и если она ==true, то наше дерево едет по экрану. Скорость и время между «заездами» задаем при помощи рандома.
Альтернативные решения.
Вместо того чтобы использовать 5 спрайтов для среднего плана , мы можем использовать всего 2 этих же спрайта.
Для этого выставляем галочку Repeat > Enabled.
И затем в настройках спрайта активируем настройки Region.
И теперь можно изменять размеры и при этой спрайт будет тайлиться.
Можно заменить ноду спрайт на ноду TextureRect, и указать в настройках растяжения режим Tile.
По сути получим примерно тоже самое.
Не забываем при этом , что свойства position у textureRect нет, там оно называется rect_position.
Это надо будет поправить в скрипте.
Если хочется бОльшего — то можно сделать бесконечный фон просто на шейдере!.
Делается это элементарно :
После чего просто анимируете значение mover.
На этом всё. Как обычно — удачной разработки !
Надеюсь вам был полезен этот материал.
Подписывайтесь на канал, и вступайте в группу в ВК.
