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.


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:


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 :

Inside app settings i set up the batch group

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

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.


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

1 Like

I am trying to make a universal script, where I set the timer, and batch everything.
Like I said before when I have animations with different parents, it’s not working, so my plan was after animation, I reparent everything inside one temp object, and batch everything together

But when I reparent it’s not working, all sprites just disappear from the screen.
When I console log all elements, everything is working fine, same parent, same batch ID, but it’s just not working for some reason, Does anyone has any idea why?
My plan is to share the script with all users, so they don’t have a problem as i did hah