pixi.jsでParticleContainerにgraphicsを追加したいがエラーが出る

Question

  const app2 = new PIXI.Application({
    width: 636,
    height: 512,
    view: document.getElementById('canvas2'),
    resolution: window.devicePixelRatio || 1,
    autoResize: true,
    backgroundColor: 0x365a7c,
  });
　const numOfParticles = 10;
  const particleProperties = {
      rotation: true,
      position: true,
  };
  const particleContainer = new PIXI.particles.ParticleContainer( numOfParticles, particleProperties );
  app2.stage.addChild( particleContainer );
  
  for ( var i = 0; i < numOfParticles; ++i ) {
    const graphics = new PIXI.Graphics();
    graphics.lineStyle(0);
    graphics.beginFill(0xDE3249, 1);
    graphics.drawCircle(0, 0, 5);
    graphics.endFill();
    graphics.x = Math.random() * ( app2.renderer.screen.width );
    graphics.y = Math.random() * ( app2.renderer.screen.height );
    particleContainer.addChild(graphics); //この行でエラーが出ます。
  }

Uncaught TypeError: Cannot read property 'baseTexture' of undefined
というエラーが発生し、生成したgraphicsをtickerで操作したいのですがうまく動作しません。
particleContainer.addChild(graphics); この記述をコメントアウトするとエラーが消えたことは確認できたのですが、GraphicsをparticleContainerにaddChildする以外にどのような書き方があるのか、お教えいただければ幸いです。

Answer 1

graphicsで用意したレンダリングエリアをtextureにするには、もうワンステップ必要なようです。
一番下の処理を、下記のように変えたら、エラーは出なくなりました。試してみてください。

    // particleContainer.addChild(graphics);  //この行でエラーが出ます。
    const texture = app2.renderer.generateTexture( graphics);
    particleContainer.addChild(texture);

Comments

[okpk]

回答ありがとうございます。
修正したところ今度は
Uncaught TypeError: Cannot set property '_parentID' of null
というエラーが発生しました。

その後調べてみましたら、
const texture = graphics.generateCanvasTexture();
const sprite = new PIXI.Sprite(texture);
particleContainer.addChild(sprite);

このような手順でGraphicsを表示させることができました。
graphicsで生成したObjectをSpriteに変換しないとContainerに上がらない...のような考え方なのでしょうか。