Messages

Yanis & Sullivan

Affiche des messages à l’adresse du joueur

1. Charger une image

   load.js

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

2. Charger un son

   load.js

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

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     "!": () => [ // text
       sprite("paper"),
       message(),
       anchor("bot"),
       offscreen({ hide: true }),
       z(-1),
     ],
   
     "#": () => [ // 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 la scène

   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([
       setMessage(config),
       multiplayerCamera(),
     ])
     setGravity(config.gravity)
     setBackground(config.backgroundColor)
   
     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'))
   
   }

5. 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('show message', 'message', () => play('bloup'))
     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'))
   
   }

6. Placer les objets

   level.js

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

7. Rédiger les messages

   level.js

   const LEVELS = [
   
     {
       map: `
   
            #   !    !
          ==============
   
       `,
       config:{
         messages:[
   
           "oh hi,",
           "oh bye!",
   
         ],
       },
     },
   
   ];

Paramètres

message()

example

config.js

message({
  defaultText: "!",
  size: 60,
  margin: vec2(0, -100),
  showDistance: 60,
  tag: "player",
  showAnimDuration: 0.2,
  hideAnimDuration: 0.2,
  rotationAnimAmp: 20,
  rotationAnimCount: 3
}),

Ressources

• paper.png
• bloup.mp3