Personnage qui patrouille

1. Charger une image

   load.js

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

2. Charger un son

   load.js

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

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     // fantôme hostile
     U: () => [
       sprite('ghosty'),
       area({ collisionIgnore: ['patrol'] }),
       anchor('center'),
       body({
         stickToPlatform: false,
       }),
       patroling(),
       falling(),
       danger({ tag: 'player' }),
       respawn(),
       color('ff9696'),
       alive(),
       opacity(),
       scale(),
       health(1),
       pos(32, 32),
       'patrol',
     ],
   
     // fantôme passif
     u: () => [
       sprite('ghosty'),
       area({ collisionIgnore: ['patrol'] }),
       anchor('center'),
       body({
         stickToPlatform: false,
       }),
       patroling(),
       falling(),
       respawn(),
       alive(),
       opacity(),
       scale(),
       health(1),
       pos(32, 32),
       'patrol',
     ],
   
     // stopper
     x: () => [
       rect(60, 60),
       pos(0, 2),
       opacity(0),
       area({ isSensor: true }),
       'stopper',
     ],
   
     // 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. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
   
              ===
   
                  x U u U x
                   =======
               #
             =====
   
   
       `,
     },
   
   ]

5. Lancer une animation

   game.js

   function events() {
     return {
       add() {
         on('hurt', 'alive', (obj) => colorShiftFx(obj, { color: 'ff9b9b' }))
         on('hurt', 'alive', () => play('hit'))
         on('hurt', 'player', (obj) => obj.play('worry', { speed: 2, 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'),
           });
         });
       },
     };
   }

Paramètres

example

config.js

body( { mass : 2 } ),

patroling()

example

config.js

patroling({
  speed: 60,
  direction: -1,
  uTrunDelay: 0.5,
  startDelay: 0.5,
  tag: 'stopper'
}),

danger()

example

config.js

danger({
  damage: 1,
  collisions: ['top', 'left', 'bot', 'right'],
  ongoing: false,
  tag: '*',
  on: true
}),

Ressources

• ghosty.png
• hit.mp3