Bloc glissant

Les blocs qui glissent créent une inertie dans les déplacements du joueur et ajoutent un délai aux changements de directions qu’il opère. Ces blocs peuvent être utilisés pour bousculer les habitudes du joueur en rendant son personnage plus difficile à contrôler.

1. Charger une image

   load.js

   const PNG = [
     'icy',
     'grass',
   ];

2. Charger un son

   load.js

   const MP3 = [
     'glide',
     'wooosh',
     'off',
   ];

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     // bloc qui glisse
     '%': () => [
       sprite('icy'),
       area(),
       body({ isStatic: true }),
       offscreen({ hide: true }),
       { glide: 2 },
     ],
   
     // 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 }),
     ],
   
   };

4. Lancer une animation

   events.js

   function events() {
     return {
       add() {
         // block qui glisse
         on('gliding start', 'player', (obj) => {
           play('glide');
           obj.play('jump', {
             speed: 4,
             onEnd: () => 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'),
           });
         });
       },
     };
   }

5. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
                              ===
                        %%
   
                  %%%
   
                       %%%%%
             #
           =====   %%%
   
       `,
     },
   
   ]

Ressources

• icy.png
• glide.mp3