After doing canvas a while, I guess all of us love the concept to suitably group things and then translate or hide the whole group, which is a very performance-friendly way to get the job done compared with moving all elements.
Now, I have the situation that the Shuttle HUD has several de-clutter levels which are progressively hidden as the de-clutter function is used. So, I introduce dc0 to dc3 as the groups and operate with selective setVisible() on them according to chosen de-clutter level. I also translate each of the groups with the parallax correction.
All nice and fine.
Then I do the brightness adjustment of the HUD by setting color on the group (specifically the alpha channel).
- Code: Select all
var current_color = [hud_color[0], hud_color[1], hud_color[2], 0.2 + 0.7 * brightness];
me.dc0.setColor(current_color);
me.dc1.setColor(current_color);
me.dc2.setColor(current_color);
me.dc3.setColor(current_color);
I've just spent two hours finding out that the performance impact of doing this is insane. Unlike translations, rotations or visible statements acting on the top level of the group, this one seems to be passed recursively down the child elements, leading to a huge property I/O.
I guess knowing 3d rendering I could have suspected, but then again, it would be possible to implement this in an efficient way if the low-level renderer plays along,... so I didn't know.
Checking the canvas Nasal API page, it seems it's not even documented there that you can set color on the whole group - makes me wonder whether this is an accident or not...
Anyway, if you know what it does, it's a very useful function still - just it can't be used in a performance-critical place, and it should not be confused with performance-friendly group operations.