How to reduce menus UI draw calls

How to reduce menus UI draw calls


I have very few menus but i am facing huge FPS drop on particular screen. on Debugging it shows 16 draw calls. So is there way of reducing it and something like spite packer etc.

Kindly help :slight_smile: :blush:


16 draw calls is actually pretty low, so are you sure itโ€™s not something else causing the problem?


i am using cocos actions (jump, bezier etc.). I thing that might be an issue. Any clue?


Perhaps you should try measuring the execution time of sections of code to see if something is taking too long to complete each frame. Also, if youโ€™re not already using sprite sheets, then consider generating them and see if that helps.


Maybe 16 draw calls is low but for mobile web browser any draw call matters.

You can check why cocos break batches using some WebGL debug utilities like Specator.js for Google Chrome:

Simplest way to reduce draw calls is keep as many images in single texture as you can. If you use auto atlas you definitely check if texture max size is big enough to keep all assets in single textures if not you should consider splitting it to separate auto atlases by hand to get as many images used one by one in single batch as you can.

Keep in mind that many different things can break batch and increase draw calls. For example blending type.


Yep. 16 draw calls is fine if youโ€™re building for native, but for mobile browser games we started running into performance problem around 60 draw calls on some devices.


yeah fps is fine but the issue in cocos actions (jump, bezier actions) they are causing too much jerk on ball.