Checkpoints

Saul

Les checkpoints permettent de préserver la patience du joueur et de centrer l’expérience sur les passages les plus difficiles. L’accumulation de checkpoints peut aussi réduire les conséquences des actions du joueur et ainsi nuire à la tension du jeu.

1. Charger une image

   load.js

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

2. Charger un son

   load.js

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

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     // checkpoint
     P: () => [
       sprite('flag'),
       area({ isSensor: true }),
       anchor(vec2(-0.7, 1)),
       pos(40, 64),
       rotate(),
       checkpoint(),
       swing({
         on: false,
         amplitude: 10,
         speed: 4,
       }),
     ],
   
     // 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() {
         // checkpoint
         on('checkpoint on', 'checkpoint', (obj) => {
           play('signal');
           obj.swingSwitch(true);
         });
         on('checkpoint off', 'checkpoint', (obj) => obj.swingSwitch(false));
   
         // 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: `
   
   
               #       P       P
             =====    ===     ===
   
   
       `,
     },
   
   ]

Paramètres

checkpoint()

example

config.js

checkpoint({
  onInteract: false,
  forAllPlayer: true,
  tag: 'player'
}),

swing()

example

config.js

swing({
  delay: 0.4,
  amplitude: 4,
  speed: 1,
  on: true
}),

Ressources

• flag.png
• signal.mp3