Параллаксный скроллинг используют примерно во всех играх, где его позволяют сделать ресурсы. Всё потому, что он выглядит очень красиво.
Суть в том, что игровой уровень делится на несколько планов: ближний, средний и дальний. Их может быть и больше и меньше, но три – это оптимально. Основное действие происходит на переднем плане. Всё, что нарисовано там – является поверхностью для ходьбы, препятствиями и т.п., то есть активными игровыми объектами. А всё, что нарисовано в среднем и дальнем планах – является просто фоном, который движется влево или вправо по мере того, как перемещается камера. В соответствии с удалением вглубь экрана (координата z) каждый план движется со своей скоростью, за счет чего и возникает параллаксный эффект.
Я возьму уже готовую реализацию параллакса из предыдущих частей (звёзд, дождя и снега) и изменю её.
Во-первых, "частицами" в этой реализации будут картинки. Я нарисовал одну картинку, которая стыкуется краями сама с собой.
То есть из неё можно построить бесконечную ленту. Эта картинка будет использоваться и для ближнего, и для среднего, и дальнего плана (в целях экономии времени).
Во-вторых, частицы дождя и снега имели случайные координаты, но у меня здесь другая ситуация: есть только три фиксированных по глубине плана, а в каждом из них "частицы", то есть картинки, расставляются не случайно, а в строгом порядке друг за другом.
Так что фактически от системы частиц я могу перейти к трём полоскам. Каждая полоска имеет свою глубину и состоит из составленных вплотную картинок. Чтобы сделать скроллинг, мне не нужно двигать каждую частицу, я просто двигаю каждую полоску, а точнее говоря, двигаю лишь координату x, от которой начинается рисование полоски.
Также я вручную выбрал вертикальное положение каждой полоски на экране – эти положения меняться не будут и поэтому считать их не надо. Рисование делается в порядке от дальней полоски к ближней, чтобы они перекрывали друг друга.
От прежней реализации параллакса здесь остались только:
- изменение размеров (масштаба) картинки в соответствии с глубиной по z
- Масштабирование сдвига влево в соответствии с глубиной по z.
Вычислив координату начала полоски, я просто рисую в ней картинки друг за другом, пока они не зарисуют всю ширину экрана.
Как только сдвиг влево превышает ширину одной картинки, я просто вычитаю из него ширину картинки, и таким образом он циклически сбрасывается. Рисуется ровно столько картинок, сколько нужно для закрытия ширины экрана.
Важно также создать эффект дистанции до полосок. Кроме уменьшения в размерах, они приобретают голубой оттенок. Я это сделал через прозрачность, что неправильно, но так было проще.
По-хорошему нужно просто для каждого плана нарисовать свои картинки.
Финальный эффект вы можете посмотреть прямо в браузере. Чтобы посмотреть исходный код страницы, нажмите Ctrl-U.