Добавил параллакс
Недавно добавил параллакс.
Что это вообще такое и как его можно реализовать?
Парралакс в играх – это когда фоновые объекты двигаются с разной скоростью относительно наблюдателя в зависимости от их удаленности. Это дает ощущение объема и картинка выглядит живее.
Реализация может быть очень простой и моя система уместилась в 60 строк кода, а основная часть и вовсе состоит из пары строк вычислений (код немного порезан чтобы было проще прочитать):
function update() {
const { x: cameraX, y: cameraY } = camera.Transform;
actorCollection.forEach((actor) => {
const t = actor.Transform;
const p = actor.Parallax;
t.x = p.startX + (cameraX - p.startX) * p.distance;
t.y = p.startY + (cameraY - p.startY) * p.distance;
});
}
Для каждого объекта фона, к которому мы хотим применить параллакс эффект, добавляется компонент Parallax со свойством distance. Текущее положение объекта с параллаксом вычисляется относительно его начальных координат, координат камеры и коэффициента distance, который принимает значения от -1 до 1. Если к примеру distance положительный, то объект будет перемещаться вслед за персонажем, поэтому будет казаться, что объект находится далеко от точки наблюдения и чтобы объект пропал из поля зрения нужно потратить больше времени чем когда параллакса нет.