A workaround for processing failures due to frequent rebuilds of the UI canvas (uGUI) is a serious technical bug that frequently occurs in actual device tests and rendering pipeline extensions. Explanation of a solution for the CPU load that spikes due to mesh rebuilding of the entire Canvas when dynamically updating UI text and icons.
Specific symptoms of the problem
Whenever the player's HP bar moves in-game or the time limit timer on the screen is updated every second, a huge spike occurs in Profiler's CPU Usage, causing the screen to become clogged for a moment.
Real-world analogy: Every time the test score (timer) of one person in the class is updated, the name list and facial photos (the entire Canvas) of the entire class are retaken from scratch with a camera. Super inefficient office work
We are drawing portraits of everyone on the same huge blackboard (Canvas), and every time we erase one person's bangs with an eraser (updating the timer), we erase everyone's portraits on the entire blackboard and redraw everyone's details from the beginning, which is extremely unreasonable. By drawing only the moving person (timer) in a separate small sketchbook (sub Canvas), you can reduce the effort of redrawing to just a small doodle on one page of the sketchbook.
Figure: Overview of defect occurrence mechanism and resolution approach for workarounds for processing failures due to frequent rebuilds of the UI canvas (uGUI)
Assumed causes and detailed mechanism
According to uGUI specifications, if even one UI element (text or image) in the same Canvas is transformed or rewritten, the mesh (vertex data) of "all UI elements" belonging to that Canvas is recalculated and reconstructed from scratch on the CPU side as one huge composite mesh (Canvas.SendWillRenderCanvases).
Solution approach and optimization procedure
Dynamic UI elements whose values are constantly rewritten (timers, HP bars, etc.) are made independent from static UI whose background does not move (menu frames, background images, etc.) with a parent-child relationship as a separate sub-canvas, and the range of influence of reconstruction is confined to extremely small UI parts.