Optimizing draw calls when using PIXI.Graphics

Hi all,

In my project, all of my visuals are generated as primitive shapes from PIXI.Graphics. Right now, I am instantiating classes I made that extend from PIXI.Container. On initialization, these classes generate the necessary graphics.

Here's an example:

export class PlayerPixiView extends PIXI.Container {
  public spriteContainer!: PIXI.Container;
  private bodySprite!: PIXI.Sprite;

  constructor(playerName: string) {
    super();
    this.createSprites(playerName);
  }

  private createSprites(playerName: string) {
    this.spriteContainer = new PIXI.Container();
    this.addChild(this.spriteContainer);

    const graphics = new PIXI.Graphics();
    graphics.beginFill(0xf8c574);
    graphics.drawCircle(0, 0, 60);
    graphics.endFill();

    this.bodySprite = new PIXI.Sprite(graphics.generateCanvasTexture());
    this.bodySprite.anchor.set(0.5, 0.5);

    this.spriteContainer.addChild(this.bodySprite);

    const handOffsetX = 40;
    const handOffsetY = 50;

    const leftHand = ... // More code that generates graphics and does new PIXI.Sprite(g.generateCanvasTexture());
this.spriteContainer.addChild(leftHand);

    const name = new PIXI.Text(playerName, { fontSize: 30 });
    name.position.set(0, 95);
    name.anchor.set(0.5, 0.5);
    this.addChild(name);

  }

}

Each class, like the Player in the above example, might generate multiple sprites that comprise the player.

If I understand correctly, I'm generating a different draw call for each sprite that I'm creating here. Is that right? Then, if I render multiple players, I'm multiplying those draw calls?

So what's the recommended way to optimize these draw calls? Should I generate these sprites once, and cache them, so I can create multiple Players from the same sprites?

If I have lots of other generated objects, like trees, boxes, etc., should they do a similar approach? Or should I generate textures (sprites?) for all graphics in my game and save them to a render texture for reuse?

Thanks.