You know uGUI relies a lot on hierarchy ordering. And each TextMeshPro text will probably have its own SDF material so it cannot be batched. The ideal for non-occluded TextMeshPro is to have them drawn the last after everything else. In this picture, the 873 and 1000000 number was from the same SDF TextMeshPro material (with the "Overlay" variant so they would draw the last) But when using Frame Debugger, it is still being drawn sequentially from top of hierarchy to the bottom, resulting in batch breaking even though nothing will be displayed over them. Here, the hierarchy tree would look like this because I wanted them to animate together. Everything are under the same Canvas : Code (CSharp): >Judgement >>RedPerfect >>>873 >>Perfect >>>873 >>Good >>>873 >>Miss >>>873 >Score >>1000000 My current solution is to "peel" them out to a separated canvas (Inherit settings, but with overridded sorting to be the old one +1) positioned at the bottom, collecting them. This way they would be drawn last like before, but the batch not breaking. Because a new canvas will guarantee separated batch. Code (CSharp): >Judgement >>RedPerfect >>Perfect >>Good >>Miss >>InnerCanvas >>>873 >>>873 >>>873 >>>873 >Score >>1000000 But it is a hassle because I have to do this after the animation and restore them when I want to do animation again so they go together with their parents. Can you make the "Distance Field Overlay" material drawn last regardless of where it is on the hierarchy? (Preferrably sorted by material types after they are all grouped the last) Or any better way? Thank you.