Jump to content

Optimizing draw calls when using PIXI.Graphics


Recommended Posts

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) {

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

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

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


    const handOffsetX = 40;
    const handOffsetY = 50;

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

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



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?


Link to comment
Share on other sites


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?

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...