Voler

Arthur

1. Charger un atlas images

   load.js

   function loadAtlas() {
   
     loadSpriteAtlas("assets/sprites/bird-atlas.png", {
       "bird": {
         x: 0, y: 0,
         width: 610, height: 53,
         sliceX: 5,
         anims: {
           idle: { from: 0, to: 0 },
           run: { from: 0, to: 0 },
           sleep: { from: 4, to: 4 },
           jump: { from: 1, to: 1 },
           fly: { from: 1, to: 2 },
           worry: { from: 3, to: 3 },
         },
       },
     })
   
     loadSpriteAtlas("assets/sprites/bean-atlas.png", {
       "bean": {
         x: 0, y: 0,
         width: 244, height: 53,
         sliceX: 4,
         anims: {
           idle: { from: 0, to: 0 },
           run: { from: 0, to: 0 },
           sleep: { from: 1, to: 1 },
           jump: { from: 2, to: 2 },
           worry: { from: 3, to: 3 },
         },
       },
     })
   
     loadSpriteAtlas("assets/sprites/splash.png", {
       "splash": {
         x: 0, y: 0,
         width: 384, height: 64,
         sliceX: 6,
         anims: { explode: { from: 0, to: 5, speed:30 } },
       },
     })
   
   }

2. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     "f": () => [ // player 1
       sprite("bird"),
       flappyController(),
       spriteFacing(),
       platformerController(),
       squish(),
       alive(),
       opacity(),
       scale(),
       health(1),
       area({ scale: vec2(0.5, 1) }),
       z(1),
       anchor("bot"),
       body(),
       respawn(),
       falling(),
       pos(0, -20),
       anchor("center"),
       "player",
     ],
   
     "#": () => [ // player 1
       sprite("bean"),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor("center"),
     ],
   
     "=": () => [ // block
       sprite("grass"),
       area({ collisionIgnore: ["agent"] }),
       body({ isStatic: true }),
       anchor("bot"),
       offscreen({ hide: true }),
       tile({ isObstacle: true }),
     ],
   
   }

3. Lancer une animation

   game.js

   scene("game", () => {
   
     const tiles = { ...TILE_CONFIG, ...LEVELS[CURRENT_LEVEL].tiles }
     const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config, ...{tiles:tiles}}
     const map = LEVELS[CURRENT_LEVEL].map.split('\n')
     const level = addLevel(map, config)
     const utility = add([
       multiplayerCamera(),
     ])
     setGravity(config.gravity)
     setBackground(config.backgroundColor)
   
     on('fly', 'player', (obj) => obj.play('fly',{speed: 10,loop:true}))
     on('landing', 'player', (obj) => obj.play('jump'))
     on('land', 'player', (obj) => obj.play('idle'))
     on('fly', 'player', () => play('wooosh'))
     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'))
   
   }

4. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
          ===          =
                       =
                       ==
                       =
                       =
   
                  ===     ===
         f
       =====
   
   
       `,
     },
   
   ]

Paramètres

flappyController()

example

config.js

flappyController({
  jumpKey: "up",
  leftKey: "left",
  rightKey: "right",
  downKey: "down",
  jumpForce: 800,
  moveSpeed: 480,
  flySpeed: 680,
  glideDelay: 0.1,
  doubleJump: 0,
  sleepDelay: 2,
  jump: true,
  rotationDelay: 0.04,
  barOffset: vec2(0, -64),
  barSize: vec2(64, 10),
  color: "8b57cf",
  fuelCombustionSpeed: 3,
  fuelRefillSpeed: 4,
  displayBar: true,
  displayBarFadeOutDelay: 0.1,
  radius: 4,
  outline: 4
}),

spriteFacing()

example

config.js

spriteFacing({
  reversedX: false,
  reversedY: false,
  facingX: true,
  facingY: true
}),

Ressources

• bird-atlas.png