Optimizing draw calls when using PIXI.Graphics

[Dharwin]

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.

[ivan.popelyshev]

Generate that texture only one time and it'll be ok. Right now you do that for every player. If you want different colors, you can use sprite "tint" instead of beginFill color

[Dharwin]

Thanks.

Should I bother trying to get multiple textures into the same render texture, like players, trees, etc.? I think if I generate each graphic and throw them all into the same render texture, then I can use that to get everything down to a single draw call. Does that sound right?

[ivan.popelyshev]

Yes, but you dont need single drawcall. keep it under 100 for PC and under 20 for mobile. https://github.com/eXponenta/gstatsjs

There's a thing that creates runtime atlas, https://github.com/gameofbombs/pixi-super-atlas , its a part of https://github.com/gameofbombs/pixi-heaven , but you have to look in the sources to understand which functions to call there, its something with "addTexture" and "repack"

It does not work with renderTextures yet, however you can use same algorithm or just do something simple and manually put all your generated textures on same renderTexture.

The alternative is wait for v5 or for backport of v5 Graphics to v4, im gonna do it when someone needs it. If you prove me that you really need graphics batching, I'll do it just for you this week

[Dharwin]

Thanks for the info! I'm likely going to be on V4 for awhile, given some libraries I'm using, but could try v5 when it's ready.

I think I'll just continue on with separate draw calls for now. If I encounter draw call performance issue, I'll look into consolidating into a render texture. I don't want to create backport work for anybody.

Thanks!