Aller au contenu
colin's kaplaybook

Attraper et lancer

Arthur

  1. Charger des images

    Section intitulée « Charger des images »
    load.js
    const PNG = [
      'ball',
      'grass',
    ];

  2. Charger un son

    Section intitulée « Charger un son »
    load.js
    const MP3 = [
      'shoot',
      'bim',
      'score',
      'bloup',
      'wooosh',
      'off',
    ];

  3. Déclarer un objet

    Section intitulée « Déclarer un objet »
    config.js
    const TILE_CONFIG = {
    

      // balle
      '°': () => [
        sprite('ball'),
        area(),
        anchor('bot'),
        respawn(),
        body(),
        catchable({ type: 'ball' }),
        falling(),
      ],
    

      // 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. modifier le joueur

    Section intitulée « modifier le joueur »
    config.js
      // player
      '#': () => [
        holdItem(),
        handSprite({ hiddenOnStart: true }),
        facingAimController({aimAngleMargin: -20,}),
        throwItem({
          dangerParam:{on:false},
        }),
        throwItemController(),
        sprite('bean'),
        platformerController(),
        jumpController(),
        sleep(),
        alive(),
        opacity(),
        scale(),
        health(1, 4),
        area(),
        body(),
        respawn(),
        falling(),
        rotate(),
        pos(0, -20),
        anchor('center'),
        'player',
      ],

  5. Lancer une animation

    Section intitulée « Lancer une animation »
    events.js
    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
            );
          });
    

    

          // lancer
          on('throw', 'throw', () => play('throw'));
          on('bounce', 'catchable', (obj, p) => play('bloup', p));
    

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

  6. Placer les objets

    Section intitulée « Placer les objets »
    level.js
    const LEVELS = [
    

      {
        map: `
    

            ===========
            =         =
            =         =
            =         =
            =         =
            =  ° #    =
            ===========
    

        `,
      },
    

    ]

Paramètres

Section intitulée « Paramètres »
holdItem()
example
config.js
holdItem({
  pos: vec2(0, -30),
  tag: '*',
  item: "{",
  sprite: 'key',
  holdItemType: 'key'
}),
facingAimController()
example
config.js
facingAimController({
  aimAngleMargin: 0
}),
handSprite()
example
config.js
handSprite({
  sprite: 'gun',
  spriteParam: {},
  handDistance: 40,
  jointPos: vec2(0, 0),
  anchor: vec2(0, 0),
  flipY: true,
  rotation: 0,
  rotate: true,
  aim: true,
  hiddenOnStart: false
}),
throwItem()
example
config.js
throwItem({
  speed: 800,
  pos: vec2(0, 0),
  sprite: 'bullet',
  width: "null",
  bulletTag: "null",
  impactTag: 'body',
  dangerParam: {},
  bounceParam: {},
  startDistance: 80,
  gravityScale: 1,
  destroyOnImpact: false,
  bounciness: 1,
  friction: 0,
  aimAngle: 40,
  type: 'item'
}),
throwItemController()
example
config.js
throwItemController({
  shootKey: 'space',
  keyPressToShoot: true,
  mousePressToShoot: true
}),

Ressources

Section intitulée « Ressources »