PIXI.js 粒子在角落聚集。想不通

Question

所以，我正在尝试在 Angular 9 中用 PIXI.js 创建一个粒子网。这是我注入根的服务：

import { Injectable } from '@angular/core';
import * as PIXI from 'pixi.js'

class Particle {
  x: number;
  y: number;
  xDirection: number;
  yDirection: number;
  radius: number;
  graphicCorespondent: PIXI.Graphics;
  
  constructor(){
    this.x = Math.random() * window.innerWidth;
    this.y = Math.random() * window.innerHeight;
    this.xDirection = Math.random();
    this.xDirection *= Math.ceil(Math.random()*2) == 2 ? 1 : -1;
    this.yDirection = Math.random();
    this.yDirection *= Math.ceil(Math.random()*2) == 2 ? 1 : -1;
    // this.xDirection = 1;
    // this.yDirection = 1;
    this.radius = 1 + Math.random() * 3;
  }
}

@Injectable({
  providedIn: 'root'
})

export class ParticlesService {
  app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
  density = 3000;
  particles = [];
  velocity = 1;

  constructor() {
    window.onload = () => {
      document.body.appendChild(this.app.view);
      this.app.renderer.backgroundColor = 0xFFFFFF;
      this.app.renderer.view.style.position = "fixed";
      this.app.renderer.view.style.display = "block";
      this.app.renderer.view.style.left = '0';
      this.app.renderer.view.style.top = '0';
      this.app.renderer.view.style.zIndex = '-1';
      // window.onresize = () => {
      //   this.app.renderer.resize(window.innerWidth, window.innerHeight)
      // }
    }
  }

  init(){
    for(let i=0; i<this.density; i++){
      const particle = new Particle();
      const gr = new PIXI.Graphics();
      gr.beginFill(0x000000);
      gr.drawCircle(particle.x, particle.y, particle.radius);
      gr.endFill();

      particle.graphicCorespondent = gr;
      this.particles.push(particle)

      this.app.stage.addChild(gr)
    }
    this.app.ticker.add((delta) => {
      this.animate(delta);
    });
    this.app.ticker.start();
  }

  animate(delta){
    this.particles.forEach((particle, index) => {
      
      if(particle.x > window.innerWidth) particle.x = 0;  
      if(particle.y > window.innerHeight) particle.y = 0;  
      if(particle.x < 0) particle.x = window.innerWidth;  
      if(particle.y < 0) particle.y = window.innerHeight; 

      particle.graphicCorespondent.x = particle.x + delta * particle.xDirection;
      particle.graphicCorespondent.y = particle.y + delta * particle.yDirection;

      particle.x = particle.graphicCorespondent.x;
      particle.y = particle.graphicCorespondent.y;
      
    })
    this.app.render()
  }
}

我设法做到了这一点，它起作用了....但粒子每次都倾向于在右下角聚集。

如果我删除 "edge collision detection"：

if(particle.x > window.innerWidth) particle.x = 0;  
if(particle.y > window.innerHeight) particle.y = 0;  
if(particle.x < 0) particle.x = window.innerWidth;  
if(particle.y < 0) particle.y = window.innerHeight;

好像没问题，但是粒子会飞向无穷远。否则...它们往往会聚集在右下角，我不明白为什么。

Screenshot of the clumping

我在这上面浪费了一整天，但我仍然不明白为什么会这样。我使用 CLI 创建了一个新的 Angular 应用程序，我创建的唯一东西就是这个服务。相同的结果。

存在<meta name="viewport" content="width=device-width, initial-scale=1">。

重新缩放似乎有效。

宽度和高度正确。

particle.x 和 particle.graphicCorespondent.x 在滴答结束时相等。

此外，粒子似乎在大多数时候会在到达边缘之前消失并重新出现。

如果有人能看一下这个，我将不胜感激。快把我逼疯了。

我尝试在粒子离开屏幕后对其进行切片并创建另一个粒子。它创建了另一个，但之后似乎是静态的。

我尝试直接循环 stage.children，结果相同。

还尝试通过访问 particle.graphicCorespondent 上的 getBounds() 方法来读取粒子的 x 和 y 值。相同的值，不相关。

编辑： 我在 Chrome 和 Firefox 中得到相同的结果。

PIXI.js版本：5.2.3

Angular版本：9.1.1

Answer 1

您的错误在于绘制精灵的方式。具体....
gr.drawCircle(particle.x, particle.y, particle.radius);
你的说法是在 x 和 y 处以这样的半径画一个圆。此绘制操作将相对于 gr 的 x,y 完成。所以稍后当你在 canvas 上绘制精灵时，点将与 gr.
的 x 和 y 有一个偏移量所以你真正想要的是......
gr.drawCircle(0, 0, particle.radius);
这是一个工作示例供您查看....
https://codesandbox.io/s/so-pixijs-particles-clumping-in-the-corner-cant-figure-it-out-tsccz?file=/index.js

PIXI.js 粒子在角落聚集。想不通

PIXI.js particles clumping in the corner. Can't figure it out

javascript

angular

typescript

pixi.js