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. Créer des composants

   component.js

   function patroling(p) {
     const param = {
       speed: 60,
       direction: vec2(-1, 0),
       uTrunDelay: 0.5,
       startDelay: 0.5,
       crossEachOther: true,
       ...p
     }
     return {
       direction: vec2(param.direction).unit(),
       resetDirection: vec2(param.direction).unit(),
       facing: 1,
       id: "partoling",
       add() {
         this.on("collide", (obj, col) => this.changeDirection(obj, col))
         this.on("respawn", () => this.direction = this.resetDirection)
         if (param.crossEachOther) this.collisionIgnore.push("partoling")
       },
       changeDirection(obj, col) {
         const l = col.isLeft() && this.direction.x < 0
         const r = col.isRight() && this.direction.x > 0
         if ((l || r) && !obj.is("player") && !obj.is("projectile")) {
           const n = this.direction.x > 0 ? -1 : 1
           if (obj.is("stopper")) tween(this.direction.x, n, param.uTrunDelay, (v) => (this.direction.x = v), easings.easeInSin)
           else tween(0, n, param.startDelay, (v) => (this.direction.x = v), easings.easeInSin)
         }
         this.trigger("U-turn")
       },
       update() {
         this.move(param.speed * this.direction.x, 0)
         if (this.direction.len() > 0.1) this.facing = this.direction.unit().x
       },
     }
   }

   component.js

   function danger(p) {
     const param = {
       damage: 1,
       collisions: ["top", "left", "bot", "right"],
       ongoing: false,
       tag: "alive",
       ...p
     }
     return {
       add() {
         const c = param.ongoing ? "collideUpdate" : "collide"
         this.on(c, (obj, col) => this.checkDangerColission(obj, col))
       },
       checkDangerColission(obj, col) {
         if (obj.is(param.tag) && !this.hidden) {
           for (const c of param.collisions) {
             if (c == "top" && col.isTop()) obj.trigger("hit", param.damage)
             else if (c == "left" && col.isLeft()) obj.trigger("hit", param.damage)
             else if (c == "bot" && col.isBottom()) obj.trigger("hit", param.damage)
             else if (c == "right" && col.isRight()) obj.trigger("hit", param.damage)
           }
         }
       },
     }
   }

4. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "U": () => [ // fantôme hostile
         sprite("ghosty"),
         area(),
         anchor("bot"),
         body(),
         patroling(),
         falling(),
         danger({ tag: "player" }),
         respawn(),
         color("ff9696"),
         alive(),
         opacity(),
         scale(),
         health(1),
       ],
   
       "u": () => [ // fantôme passif
         sprite("ghosty"),
         area(),
         anchor("bot"),
         body(),
         patroling(),
         falling(),
         respawn(),
         alive(),
         opacity(),
         scale(),
         health(1),
       ],
   
       "x": () => [ // stopper
         rect(64, 64),
         opacity(0),
         area(),
         anchor("bot"),
         "stopper"
       ],
   
       "#": () => [ // player 1
         sprite("bean"),
         platformerController(),
         alive(),
         opacity(),
         scale(),
         health(1, 4),
         area(),
         anchor("bot"),
         body(),
         respawn(),
         falling(),
       ],
   
       "=": () => [ // block
         sprite("grass"),
         area(),
         body({ isStatic: true }),
         anchor("bot"),
         offscreen({ hide: true }),
       ],
   
     },
   }

5. Placer les objets

   level.js

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

6. Lancer une animation

   game.js

   scene("game", () => {
   
     const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config }
     const map = LEVELS[CURRENT_LEVEL].map.split("\n")
     const level = addLevel(map, config)
   
     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

body( { mass : 2 } ),

example

config.js

patroling({
  speed: 60,
  direction: vec2(-1, 0),
  uTrunDelay: 0.5,
  startDelay: 0.5,
  crossEachOther: true
}),

example

config.js

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

Ressources

• ghosty.png
• hit.mp3