Предыдущая часть: Программируем твининг для светляков
Хотел написать "кривые Безье" или "параметрические кривые", но пока внятно объяснить их не готов. Мы будем использовать очень ограниченный вариант кривых Безье, который наглядно представляется геометрически и без всяких формул, и этого пока хватит.
В предыдущей части мы использовали для перемещения светлячков твининг с easing-функцией, которая позволяла сделать плавные разгон и торможение. Но траектория полёта оставалась прямой линией, что наиболее режет глаз. Поэтому мы зададим кривую траекторию полёта следующим способом:
Что здесь происходит? Мы имеем два твина (tween1 и tween2). При этом конечная точка tween1 является начальной точкой tween2. Оба твина имеют одинаковое время и поэтому выходят из своих начальных точек и приходят в свои конечные точки одновременно.
Если теперь рассмотреть прогресс обоих твинов, скажем, на шаге 20%, то мы получим текущие точки, расположенные где-то на прямой tween1 и где-то на прямой tween2. Если соединить эти две точки прямой линией (красного цвета), то мы получим ещё один твин, в котором также нужно отложить точку на прогрессе 20% (зеленого цвета). В качестве ещё одного примера показано то же самое на прогрессе 75%.
Если теперь соединить зелёные точки на разных этапах, получим следующее:
И как видим, это уже похоже на кривую. Если построить такие точки для полного прогресса от 0% до 100%, то мы получим реальную кривую:
Значит, если раньше светлячок летал прямыми отрезками, для чего ему требовался один твин, сейчас он сможет летать криволинейными отрезками, но нужно будет два твина на одного светлячка. Второй твин строится от конца первого.
Посмотрим, что получилось, в онлайн-демо.
Я избавился от easing-функции в твине. Теперь прогресс линейный, но easing достигается за счёт криволинейной траектории, где естественным образом получается разная скорость движения.
Каждый раз, когда tween2 достигает финиша, делаются новые два твина из этой точки, чтобы продолжить траекторию. Но вот проблема: координаты следующих твинов получаются случайно, поэтому траектория резко и неестественно меняется.
Поэтому следующий первый твин (new_tween1) нужно делать не случайным, а в том же направлении, в каком был последний твин (tween2):
Это позволит сделать кривую гладкой. Достроить твин в том же направлении не проблема. Но так как координаты, от которых надо достраивать, были выбраны случайно, то они могут оказаться около края экрана, а если затем от них достроить твин, то его координаты могут уйти за пределы экрана.
Чтобы не усложнять, поступаем так: получить случайные координаты для следующего твина, но откатить их к началу на 50%. После достижения этой точки мы можем спокойно достроить от неё еще столько же в том же направлении, зная, что выхода за пределы экрана не будет.
Теперь светляк летает по плавной траектории.
Осталось создать ему компанию, а именно сгенерировать много светляков. Их обработка ничем не будет отличаться от прошлой. Просто теперь мы будем хранить в массиве не объект tween, а массив из двух объектов [tween1, tween2].
Ну, вот вроде всё летает как надо. Но это ещё не все. Дальше мы добавим Z-координату и эффект глубины.
Читайте дальше: Глубина резкости
Читайте также: Параллакс в играх
