Improve performance by reordering rendering layers (#1947)

## Description:

The issue raised describes context.restore using too much CPU. This PR
changes the layer order to reduce the number of context.restore and
context.save calls.

The order plays a role because every time a layer has to swap between
using transform (triggered by a layer's shouldTransform function
returning true) and not, it has to call context.save/context.restore.
This change simply reorders the layers so all layers which need
transform are grouped together at the start, and those who don't are at
the end.

Regarding testing, initially my plan was to add unit tests as this is an
easy thing to overlook. But the current testing setup doesn't play
nicely with pixijs, litjs, and a few others. I didn't want to make large
changes to the testing setup here, so instead I left a comment to remind
anyone making changes to pay attention to the order.
 
Fixes #1894

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Bornasm
This commit is contained in:
Bornasm
2025-08-28 00:37:04 +02:00
committed by GitHub
parent 42f0b5cf69
commit c79af121a8
+4 -1
View File
@@ -229,15 +229,18 @@ export function createRenderer(
}
alertFrame.game = game;
// When updating these layers please be mindful of the order.
// Try to group layers by the return value of shouldTransform.
// Not grouping the layers may cause excessive calls to context.save() and context.restore().
const layers: Layer[] = [
new TerrainLayer(game, transformHandler),
new TerritoryLayer(game, eventBus, transformHandler, userSettings),
new RailroadLayer(game),
structureLayer,
new StructureIconsLayer(game, eventBus, transformHandler),
new UnitLayer(game, eventBus, transformHandler),
new FxLayer(game),
new UILayer(game, eventBus, transformHandler),
new StructureIconsLayer(game, eventBus, transformHandler),
new NameLayer(game, transformHandler, eventBus),
eventsDisplay,
chatDisplay,