Personnage qui trouve son chemin

Victor

Attention

Pour le bon fonctionement du pathfinding et du raycast, les obstacles doivent conserver leur ancrage par défault anchor("topleft")

1. Charger une image

   load.js

   const PNG = [
     "marroc",
     "grass",
   ]

2. Charger un son

   load.js

   const MP3 = [
     "hit",
     "wooosh",
     "off",
   ]

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     "Y": () => [
       // agent
       sprite("marroc"),
       agent({ speed: 160 }),
       area({ collisionIgnore: ["agent"] }),
       body({ gravityScale: 0 }),
       anchor("center"),
       offscreen({ hide: true }),
       danger({ tag: "player" }),
       respawn(),
       color("ff9696"),
       followAi({
         raycast: false,
         sight: 1000
       }),
       sight(),
     ],
   
     "y": () => [
       // agent
       sprite("marroc"),
       agent({ speed: 200 }),
       area({ collisionIgnore: ["agent"] }),
       body({ gravityScale: 0 }),
       anchor("center"),
       offscreen({ hide: true }),
       respawn(),
       followAi(),
       sight(),
     ],
   
     "#": () => [ // 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 }),
     ],
   
   }

4. Modifier un symbole

   config.js

     "=": () => [ // block
       tile({ isObstacle: true }),
       sprite("grass"),
       area({ collisionIgnore: ["agent"] }),
       body({ isStatic: true }),
       anchor("bot"),
       offscreen({ hide: true }),
     ],

5. Placer les objets

   level.js

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

6. 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('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') }))
     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'))
   
   }

Paramètres

example

config.js

agent( { speed : 200 } ),

followAi()

example

config.js

followAi({
  retreat: true
}),

danger()

example

config.js

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

Ressources

• marroc.png
• hit.mp3