PIXI. js частицы сгущаются в углу. Не могу понять это - PullRequest
Новая
       31

PIXI. js частицы сгущаются в углу. Не могу понять это

0 голосов
/ 26 апреля 2020

Итак, я пытаюсь создать сеть частиц с помощью PIXI. js in Angular 9. Вот мой сервис, который я добавляю в root: 

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()
  }
}

Мне удалось зайти так далеко, это работает .... но частицы имеют тенденцию слипаться в правом нижнем углу каждый раз.

Если я удаляю «Обнаружение столкновения края»: 

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;

Кажется, это работает нормально, но частицы улетят в бесконечность. Иначе ... они имеют тенденцию скапливаться в правом нижнем углу, и я не понимаю, почему.

Снимок экрана сгущения

Я потратил целый день на этот, и я до сих пор не могу понять, почему он это делает. Я создал приложение fre sh Angular, используя CLI, и единственной вещью, которую я создал, был этот сервис. Те же результаты.

Присутствует <meta name="viewport" content="width=device-width, initial-scale=1">.

Похоже, что изменение масштаба работает.

Ширина и высота совпадают.

Particle.x и В конце тика частицы.graphicCorespondent.x равны.

Кроме того, кажется, что частицы исчезают и появляются снова, прежде чем они достигают края большую часть времени.

Если бы кто-нибудь мог взглянуть на это, я был бы чрезвычайно благодарен. Это сводит меня с ума.

Я пытался отрезать частицу, как только она исчезла с экрана, и создать другую. Он создает еще один, но после этого он выглядит как c.

Я попытался выполнить цикл непосредственно через stage.children, тот же результат.

Также попытался прочитать значения x и y частицы путем доступа к методу getBounds () в частице .graphicCorespondent. То же значение, не имеет значения.

Редактировать: Я получаю одинаковые результаты в Chrome и Firefox.

PIXI. js версия : 5.2.3

Angular версия: 9.1.1

1 Ответ

0 голосов
/ 29 апреля 2020

Ваша ошибка в том, как вы рисуете свои спрайты. В частности ....
gr.drawCircle(particle.x, particle.y, particle.radius);
Ваше высказывание нарисуйте круг с координатами x и y с таким радиусом. Эта операция рисования будет выполнена относительно х, у гр. Итак, позже, когда вы нарисуете спрайт на холсте, точка будет иметь смещение от x и y от gr.
То, что вы на самом деле хотели, было ....
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

...