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 = {
   
     // player 1
     f: () => [
       sprite('bird'),
       flappyController(),
       spriteFacing(),
       platformerController(),
       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
     '#': () => [
       sprite('bean'),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor('center'),
       'player',
     ],
   
     // block
     '=': () => [
       sprite('grass-tileset'),
       offscreen({ hide: true }),
       tile({ isObstacle: true }),
       autoTiling(),
       area(),
       body({ isStatic: true }),
     ],
   
   };

3. Lancer une animation

   events.js

   function events() {
     return {
       add() {
         // voler
         on('fly', 'player', (obj) => {
           play('wooosh');
           obj.play('fly', { speed: 10, loop: true });
         });
         on('landing', 'player', (obj) => obj.play('jump'));
         on('land', 'player', (obj) => obj.play('idle'));
   
         // personnages
         on('respawn', 'alive', (obj) => (obj.flipY = false));
         on('hurt', 'alive', (obj) => {
           play('hit');
           colorShiftFx(obj, { color: 'ff9b9b' });
         });
         on('death', 'alive', (obj) => {
           obj.flipY = true;
           wait(0.2, () => {
             if (!obj.isAlive) {
               obj.hidden = true;
               obj.collisionIgnore = ['*'];
               obj.isStatic = true;
             }
           });
         });
   
         // joueur
         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) => {
           play('wooosh');
           obj.play('jump', {
             speed: 4,
             onEnd: () => obj.play('idle'),
           });
         });
         on('drop', 'player', (obj) => {
           play('off');
           obj.play('worry');
         });
         on('hurt', 'player', (obj) => {
           obj.play('worry', {
             speed: 2,
             onEnd: () => obj.play('idle'),
           });
         });
       },
     };
   }

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