Search code examples
pixi.js

Separate expensive rendering (scrollable container) from rest of the stage


I am working on a game view that has scrollable list. I noticed that my phone starts heating up when I scroll for a while, I assume this is due to pixi re-rendering whole game view at 60fps when I am scrolling.

Is there a way to bring this scrollable list (container with mask and child container) onto some sort of a separate layer, so that when it is being scrolled rest of pixi application doesn't need to re-render and perhaps help decrease load on cpu this way?


Solution

  • I dont know what are mechanics of your scrollable list, but can you check how many objects (containers / sprites / Pixi.Graphics / masks) you have active at given time? For example: display such count in console log every few seconds. Maybe the heating up / slowness is caused by ever increasing number of objects that PIXI needs to handle - thats why at beginning is ok and situation worsens over time. If thats the case then maybe you should try to remove (or hide?) objects that are no longer use or not shown on screen.

    Please also see discussions about PIXI perfomance on mobile and how to optimize it - for example this thread: https://www.html5gamedevs.com/topic/38509-fastest-way-to-do-masking/?tab=comments#comment-221654