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]))
      }
    },
  }
}