background

How to use

example

config.js

background: {
  gradient: {
    speed: 1,
  },
  image: {
    scaling: 1.4,
    movement: 0.1,
    angle: 0,
    speed: 0,
    offsetX: 0,
    offsetY: 0,
  },
},

Source

component.js

function background(config, level) {
  const param = {
    ...config,
    background: {
      gradient: {
        speed: 1,
      },
      image: {
        scaling: 1.4,
        movement: 0.1,
        angle: 0,
        speed: 0,
        offsetX: 0,
        offsetY: 0,
      },
    },
  };
  if (config.background && config.background.gradient)
    param.background.gradient = {
      ...param.background.gradient,
      ...config.background.gradient,
    };
  return {
    levelWidth: 0,
    levelHeight: 0,
    layers: [],
    camera: null,
    add() {
      let max = vec2(0, 0);
      for (const e of level.get('pos')) {
        max.x = Math.max(max.x, e.pos.x);
        max.y = Math.max(max.y, e.pos.y);
      }
      let min = vec2(max.x, max.y);
      for (const e of level.get('pos')) {
        min.x = Math.min(min.x, e.pos.x);
        min.y = Math.min(min.y, e.pos.y);
      }
      this.levelWidth = max.x - min.x;
      this.levelHeight = max.y - min.y;
      if (config.background) {
        for (const e of config.background.images) {
          const op = {
            ...param.background.image,
            ...e,
          };
          const obj = add([
            sprite(e.image, {
              width: width(),
              height: height(),
            }),
            pos(center()),
            scale(),
            fixed(),
            rotate(),
            anchor('center'),
            z(-1),
          ]);
          obj.scaleTo(op.scaling);
          obj.width = width();
          obj.height = height();
          onResize(() => {
            obj.width = width();
            obj.height = height();
          });
          this.layers.push({
            ...op,
            ...{ obj: obj },
          });
        }
      }
      requestAnimationFrame(
        () =>
          (this.camera = get('camera', {
            recursive: true,
          })[0])
      );
    },
    update() {
      for (const e of this.layers) {
        if (this.camera && this.camera.pos) {
          const t = ((time() * e.speed + 0.5) % 1) - 0.5;
          const x =
            width() - (width() / 2) * e.scaling + e.offsetX * this.levelWidth;
          const y =
            height() -
            (height() / 2) * e.scaling +
            e.offsetY * this.levelHeight;
          const ax = (width() * e.movement) / 2;
          const ay = (height() * e.movement) / 2;
          const vx =
            this.camera.pos.x / (this.levelWidth * config.tileWidth) - 0.5 * 2;
          const vy =
            this.camera.pos.y / (this.levelHeight * config.tileHeight) -
            0.5 * 2;
          e.obj.pos = vec2(x, y)
            .sub(vec2(vx, vy).scale(ax, ay))
            .add(
              Vec2.fromAngle(e.angle).scale(vec2(width(), height()).scale(t))
            );
          e.obj.angle = getCamRot();
        }
      }
      if (
        config.background &&
        config.background.gradient &&
        config.background.gradient.colors
      ) {
        const c = config.background.gradient.colors;
        const timeNormalized = (time() * param.background.gradient.speed) % 1;
        const i = Math.floor(timeNormalized * c.length);
        const t = (timeNormalized * c.length) % 1;
        const c1 = Color.fromHex(c[i]);
        const c2 = Color.fromHex(c[(i + 1) % c.length]);
        const r = c1.r + (c2.r - c1.r) * t;
        const g = c1.g + (c2.g - c1.g) * t;
        const b = c1.b + (c2.b - c1.b) * t;
        setBackground(Color.fromArray([r, g, b]));
      }
    },
  };
}