Sprite Batching problem

Since batching UI element is disabled from Editor, I guess code should still be available,
does anyone have a code example of how to set batchGroupId and set to dynamic

Hi @Dava,

This is the only code example that comes in mind. It’s for render components, but if you replace render with element it will work the same.

https://playcanvas.github.io/#/graphics/batching-dynamic

Bear in mind that batching UI is still a WIP feature. It is possible but you have to be really careful about what you batch as the UI layer has a manual draw order based on hierarchy order.

You may have better luck by using the Z position for order and using your own layer that is sorted by depth.

See this ticket and included thread link for more details: https://github.com/playcanvas/engine/issues/2778

1 Like

Somehow it’s not working, i still have the same amount of draw calls

When I console log element, it says

  1. _batchGroup: null
  2. _batchGroupId: “TextDB1”
  3. _beingInitialized: false

I think you need to call the batcher after you finish setting all batchGroupIds to your elements. Like this, once:

this.app.batcher.generate();

Still the same , i have 700 draw calls , but i should have under 500 when I batch my text sprites

Mmm, not sure, I haven’t really used batching with sprites.

If you are able try sharing a sample project for the forum to take a look.

This is my test project: PlayCanvas 3D HTML5 Game Engine

It contains 24 sprites inside 2D Canvas, all sprites come from Atlas map.
I created the script that batch hosting entity, looks like this :
image

Inside app settings i set up the batch group
image

When I run the application, in the console it shows that the element belongs to the Value batch group, but the Profiler still shows 24 draw calls, am I doing something wrong @yaustar , @Leonidas ?

Hi @Dava,

You need to set the batch group id, not the batch group name. Like this:

const batchGroup = this.app.batcher.getGroupByName(this.batchGroupID);
this.entity.element.batchGroupId=batchGroup.id;

Also it’s better to call batcher.generate() only once at the end. Right now you are calling it once per object, so it will run so many times which can be slow.

3 Likes

You are right, it’s working now
Thank you @Leonidas

The only problem is, in order to batch, everything needs to be inside the same parent, therefore if you have large animations like me with mask elements, it’s not going to work