粒子特效[2] - 喷射烟花

喷射的烟花效果 |

用到的图片:

star dot ring hex hex_ring

废话不多说 shou you my code

1
2
<script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/6.0.2/browser/pixi.js"></script>
<div id="preview-box" style="text-align:center"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
let game = new PIXI.Application({
  width: 1334,
  height: 750,
  transparent:true,
  backgroundColor: 0x000000
})
document.getElementById('preview-box').appendChild(game.view)
game.view.style.width = "100%"
let config = { crossOrigin: true }
PIXI.Assets.add('dot', '../images/dot.png',config);
PIXI.Assets.add('hex', '../images/hex.png',config)
PIXI.Assets.add('ring', '../images/ring.png',config)
PIXI.Assets.add('hex_ring', '../images/hex_ring.png',config)
PIXI.Assets.add('star', '../images/star.png',config)
PIXI.Assets.load(['dot', 'hex', 'ring', 'hex_ring', 'star']).then((textures) => {
    function fire(imgs, count) {
      let totalFrame = 0
      let container = new PIXI.Container()
      let team = imgs.map(img => {
        let box = new PIXI.ParticleContainer(count);
        container.addChild(box);
        return { box, img }
      })
      // 发射元素 60次/s
      emitter = () => {
        totalFrame++
        // 每 20 帧 增加一次元素
        if (totalFrame % 3 === 0) {
          team.forEach(d => {
            let { box, img } = d;
            if (box.children.length >= count) box.children[0].destroy()
            let ele = new PIXI.Sprite(textures[img])
            ele.frame = 0
            ele.alpha = 0.65 * Math.random()
            ele.anchor.set(0.3)
            ele.angle = Math.random() * 360
            ele.position.set(0, Math.random() * 100)
            ele.tint = PIXI.utils.rgb2hex([
              Math.random() * 1,
              Math.random() * .1,
              Math.random() * 0.3,
            ])
            ele.xv = (Math.random() - 0.5) * 0.3
            ele.yv = -0.5 * Math.random() - 0.65
            // 跳的越高，往两边的加速度也越大
            ele.xa = (Math.random() - 0.5) * Math.abs(ele.yv) / 100
            ele.ya = 0.018
            box.addChild(ele)
          })
        }
        // 每帧 渲染一次
        team.forEach(d => {
          let { box } = d;
          box.children.forEach((ele, i) => {
            // 抛物运动 至于为什么x轴也有加速度，模拟的是物体在靠近观察者，离得近，看到的距离就大
            let t = ele.frame / 2
            ele.x = ele.x + (ele.xv * t + ele.xa * t * t)
            ele.y = ele.y + (ele.yv * t + ele.ya * t * t)
            ele.scale.set(Math.sin(t / 80))
            ele.angle += 33
            ele.alpha = (t + i) % 2
            ele.frame++
          })
        })
      }
      PIXI.Ticker.shared.add(emitter)
      return container
    }
    let c1 = fire(['dot', 'hex', 'ring', 'hex_ring', 'star'], 100)
    c1.position.set(1334 / 2, 750 * 4 / 5)
    game.stage.addChild(c1)
  })
Xu