Aller au contenu

Arrière-plan

Sullivan

Charger des images

const PNG = [
  "layer1",
  "layer2",
  "layer3",
  "layer4",
  "grass",
]

Créer un composant

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

modifier la scène

scene("game", () => {

  const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config }
  const map = LEVELS[CURRENT_LEVEL].map.split("\n")
  const level = addLevel(map, config)

  add([
    background(config,level),
    multiplayerCamera(),
  ])
  setGravity(config.gravity)
  setBackground(config.backgroundColor)

  on('jump', 'player', () => play('wooosh'))
  on('drop', 'player', () => play('off'))
  on('respawn', 'player', (obj) => obj.play('idle'))
  on('sleep', 'player', (obj) => obj.play('sleep'))
  on('awake', 'player', (obj) => obj.play('idle'))
  on('jump', 'player', (obj) => obj.play('jump', { speed: 4, onEnd: () => obj.play('idle') }))
  on('drop', 'player', (obj) => obj.play('worry'))

}

configurer les niveaux

const LEVEL_CONFIG = {

  background: {
    gradient: {
      colors: [
        '94d8ff',
        'b887c4',
        '4a4d8c',
        'b887c4',
      ],
      speed: 0.1,
    },
    images: [
      {
        image: 'layer1',
        scaling: 1,
        movement: 0.1,
        speed: 0.1,
        angle: 90,
      },
      {
        image: 'layer2',
        scaling: 1.6,
        movement: 0.1,
        offsetY:0.5,
        offsetX:0.25,
      },
      {
        image: 'layer3',
        scaling: 1.2,
        movement: 0.3,
        speed: 0.005,
        angle: 0,
      },
      {
        image: 'layer4',
        scaling: 1.6,
        movement: 0.6,
      },
    ]
  },
  tileWidth: 64,
  tileHeight: 64,
  backgroundColor: "afe1ff",
  gravity: 3200,

  tiles: {

    "#": () => [ // player 1
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
    ],

    "=": () => [ // block
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
    ],

  },
};

Ressources