pixi5 Optimize Performance on Static PIXI Sprite/Containers

[maumd]

Hello, I'm a developer at Colonist.io and we are looking to increase the game performance on all devices. To test performance, we run multiple instances to force our computer to work harder.

We noticed that one of the biggest FPS word is the Player Container View which only displays content and it has zero animations. When we hide it using PIXI.JS Developer Tools, FPS increase by ~15 on all instances. We already started optimizing by using `cacheAsBitmap`, however it is not possible to cache the whole container as content inside it changes from time to time (text and colors). We tried enabling `cacheAsBitmap` by default, disable it on every change, and enable it again after that, however it has some issues such as not being able to listen for `onClick` and a small but noticeable jitter.

 

Some notes:

- We are using PIXI.JS 5.3.12

- Spector.js only reports 9 draws

- Attached is the structure of every single player container and what we are optimizing

- We are aware that all GUI should be made with raw HTML and CSS but we want that to be our last resort. 

- Sprites are loaded and rendered with the following logic:

// This gets run before the game starts
export function loadImages() {
	for(const img of getImagesToPreload()) {
		const imgPath: string = UIImagePathController.getImagePath(img.name + img.extension)
        PIXI.Loader.shared.add(img.name, imgPath, {crossOrigin: true})
    }

    PIXI.Loader.shared.onProgress.add(loadProgressHandler)
    PIXI.Loader.shared.load(assetsFinishedLoading)
}

// This is an example of how we load a texture 
static getTextureForCard(cardEnum: CardEnum): PIXI.Texture {
  const cardData = CardDataController.getCardDataForCard(cardEnum)
  if(cardData == undefined) {
    logError('getTextureForCard', [cardEnum])
    return PIXI.Loader.shared.resources.card_rescardback.texture
  }

  return PIXI.Loader.shared.resources[cardData.imageFileName].texture
}

 

I don't really know what the approach here should be. Any help is appreciated.

 

Thanks!