Phaser筆記：particles emitZone, deathZone

示例代碼素材：下載地址

import Phaser from 'phaser'

class GameScene extends Phaser.Scene {
  constructor() {
    super()
  }

  preload() {
    this.load.atlas('flares', 'assets/example/particles/flares.png', 'assets/example/particles/flares.json')
  }

  create() {
    // 粒子釋放的區域
    const emitZone = new Phaser.Geom.Rectangle(0, 50, 800, 20)
    // any particles that enter this shape will be killed instantly
    // 死區，粒子消失區域
    this.particlesDeathZone = new Phaser.Geom.Circle(0, 0, 48)
    // 粒子
    const particles = this.add.particles('flares')
    // 粒子發射
    particles.createEmitter({
      frame: ['red', 'green', 'blue'],
      speed: { min: -20, max: 20 },
      lifespan: 10000,
      quantity: 1, // 每次釋放的粒子數量
      gravityY: 10, // 下落重力速度
      scale: { min: 0.1, max: 0.2 }, // 縮放變化
      alpha: { start: 1, end: 1 }, // 透明度變化
      blendMode: 'ADD', // 混合模式
      rotate: { start: 180, end: 0 },
      emitZone: { source: emitZone }, // 設置釋放區域
      deathZone: { type: 'onEnter', source: this.particlesDeathZone }
    })

    // 繪圖和鼠標移動
    this.graphics = this.add.graphics()
    this.input.on('pointermove', (pointer) => {
      this.particlesDeathZone.x = pointer.x
      this.particlesDeathZone.y = pointer.y
    })
  }

  update() {
    // 繪圓
    this.graphics.clear()
    this.graphics.lineStyle(1, 0x00ff00, 1)
    this.graphics.strokeCircleShape(this.particlesDeathZone)
  }
}

export function DeathZoneEmitZoneInit(ele) {
  return new Phaser.Game({
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000',
    parent: ele,
    physics: {
      default: 'arcade',
      arcade: { gravity: { y: 200 } }
    },
    scene: [GameScene]
  })
}