Все заметки

Добавил параллакс

Недавно добавил параллакс.

Что это вообще такое и как его можно реализовать?

Парралакс в играх – это когда фоновые объекты двигаются с разной скоростью относительно наблюдателя в зависимости от их удаленности. Это дает ощущение объема и картинка выглядит живее.

Реализация может быть очень простой и моя система уместилась в 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 положительный, то объект будет перемещаться вслед за персонажем, поэтому будет казаться, что объект находится далеко от точки наблюдения и чтобы объект пропал из поля зрения нужно потратить больше времени чем когда параллакса нет.