Aller au contenu

Clés

Charger une image
Section intitulée « Charger une image »
load.js
```
const PNG = [
  'door',
  'locker',
  'key',
  'grass',
];
```

Charger un son

const MP3 = [
  'door',
  'score',
  'bloup',
  'wooosh',
  'off',
];

Déclarer un objet

const TILE_CONFIG = {

  // porte verrouillée
  l: () => [
    sprite('door'),
    headSprite({
      sprite: 'locker',
      pos: vec2(5, -30),
    }),
    area({ isSensor: true }),
    door({ locked: true }),
    anchor('bot'),
    offscreen({ hide: true }),
    z(-1),
    pos(32, 64),
  ],

  // clé
  c: () => [
    sprite('key'),
    area({ isSensor: true }),
    anchor('bot'),
    respawn(),
    catchable({ type: 'key' }),
  ],

  // 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 }),
  ],

};

Modifier un symbole

  // player
  '#': () => [
    holdItem(),
    sprite('bean'),
    platformerController(),
    jumpController(),
    sleep(),
    alive(),
    opacity(),
    scale(),
    health(1, 4),
    area(),
    body(),
    respawn(),
    falling(),
    rotate(),
    pos(0, -20),
    anchor('center'),
    'player',
  ],

Lancer une animation

function events() {
  return {
    add() {
      // attraper
      on('picked', 'hold', () => play('score'));
      on('grab', 'holdItem', () => play('score'));
      on('grab catch', 'hand', (obj, p) => {
        tween(
          p.dist,
          obj.hand.pos,
          0.2,
          (v) => (obj.hand.pos = v),
          easings.easeOutSine
        );
        obj.hand.pos = p.dist;
      });
      on('dropped', 'catchable', (obj, p) => {
        tween(
          p.parentPos,
          p.pos,
          0.2,
          (v) => (obj.pos = v),
          easings.easeOutSine
        );
      });


      // clés et loquet
      on('try enter', 'door', (obj, p) => {
        obj.tryEnter(p.from.isHolding('key'), p.from);
      });
      on('locked', 'door', (obj) => {
        play('bloup');
        tween(0, Math.PI * 2, 0.2, (v) => (obj.head.angle = Math.sin(v) * 10));
      });

      // 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'),
        });
      });
    },
  };
}

Placer les objets

const LEVELS = [

  {
    map: `

                     c
           l    #
         ==========

      =

   =

      =

         ==========  =

    `,
  },

]

Paramètres

door()

example

door({
  nextLevel: true,
  destination: 0,
  delay: 0.1,
  onInteract: false,
  locked: false,
  goToAnotherScene: true
}),

holdItem()

example

holdItem({
  pos: vec2(0, -30),
  tag: '*',
  item: "{",
  sprite: 'key',
  holdItemType: 'key'
}),

Ressources