I'm having an issue where my UI lags if I try to fill an image that is placed in front of another image. Here is the effect I am trying to achieve:
As you can see I have an image in the background (dashed line) and I am attempting to fill another image in front of it (green line). It's hard to see in the GIF but my game is 60 FPS and the fill animation is noticeably jittery. It took me a while to figure out that the background image is what is causing the stutter, but I am certain it is.
As soon as I disable the background image (or set its fill to zero) the green line animates buttery smooth:
Again, it is quite hard to see in the GIF but I can confirm that without the dashed line, the animation is buttery smooth at 60 FPS.
Does anyone know how I can overcome this jitter? I need to be able to keep the background image and overlay one on top. I potentially even need to animate more images on top of the green line, so I fear the jitter will get even worse.
Here is what I am doing right now:
- I have one canvas and two images. Both images are children of the canvas and are positioned in the same world space
- I have disabled costly features like graphics ray-casting, transparency culling etc.
- I am deploying to iOS but the lag is happening on both my Desktop and iOS devices.
- The images are only 512 x 512 so they are not super high-res
- I have even tried splitting both images into two separate canvases and putting one canvas underneath the other in world space. But this has no effect.
Any advice on how to overcome this lag would be appreciated. I find it surprising that something as simple as this would be so taxing as to create stutter.
__
UPDATE:
Okay so I have been profiling this and it looks like the solid line is breaking the batch, causing a second batch to be created. This only occurs in the first GIF when I am overlaying the solid line. So I guess I need to find a way to prevent this batch-breaking.
__
UPDATE 2:
After researching the above I have updated my project to use a sprite atlas, which contains both images. I can confirm after profiling the UI that there is no longer any batch breaking taking place. In fact, the same number of batches are now achieved in both scenarios. Yet I am still seeing the stuttering when I try to overlay the image (first gif).
I thought the sprite atlas would work so I’m now stumped again. Please help?
