Game ScreenSplatter [WIP] - phreaknation/phaserwebcomponents GitHub Wiki

Create screen splatter effects for things such as blood or slime.

// NOTE: temp example. Will formally write one up eventually.
// empty array for the created splatters.
let splatters = [];
// an array of images to loop and create the splatters with
[
  'http://worldartsme.com/images/pink-splatter-clipart-1.jpg',
  'http://worldartsme.com/images/yellow-splatter-clipart-1.jpg',
  'http://worldartsme.com/images/paint-splat-clipart-1.jpg',
  'http://worldartsme.com/images/pink-splatter-clipart-1.jpg',
  'http://worldartsme.com/images/yellow-splatter-clipart-1.jpg',
  'http://worldartsme.com/images/paint-splat-clipart-1.jpg',
].forEach((url) => {
  // Create the splatter
  let splatter = new this.game.PhaserWebComponents.components.Game.ScreenSplatter({
    game: this.game,
    options: {
      // URL of the splatter
      source: url,
      // How long until the splatter is hidden
      life: 1000,
      // CSS animation properties
      animation: {
        name: 'splatter',
        duration: '1000ms',
        delay: '0ms',
        timingFunction: 'ease-out',
        iterationCount: 1,
      },
      // base size of the splatter
      size: {
        height:'282px',
        width: '298px',
      },
      // Screen padding where the splat will spawn
      zone: {
        left: 100,
        top: 100,
        right: 100,
        bottom: 100,
      }
    }
  });
  // add it to the previous array
  splatters.push(splatter);
  // make Phaser aware of the splatter
  this.game.add.existing(splatter);
});

// placeholder to loop through
let splatterIndex = 0;
let splatterInterval = setInterval(() => {
  // obvious
  if (splatterIndex === splatters.length) {
    splatterIndex = 0;
  }

  let splatter = splatters[splatterIndex];

  // restarts the splatter animation.
  splatter.setRandomPosition().restart();
  splatterIndex++;
}, 300);