3

So I have a scene in Pixi, with about 7-8 textures in it. A couple are just looping simple transforms (e.g spinning like a fan, etc), some are static.

Without interacting with it at all (it's in a separate window to this), the mere presence of it makes my 16BG i7 MacBook Pro heat up like crazy and it's occupying 50% CPU.

Here's an example of how I'm setting up one of the spinning animations. Does anything in there look suspicious? I can't believe how much power it's consuming, and I'm about to throw out all my Pixi code and just use CSS as it seems much more efficient. 

rotorPositions.forEach((rotor, index) => {
    const sprite = new PIXI.Sprite(resources.rotor.texture)
    sprite.position.set(foregroundContainer.width/100 * rotor[0], foregroundContainer.height/100 * rotor[1])
    foregroundContainer.addChild(sprite)

    sprite.anchor.x = 0.5
    sprite.anchor.y = 0.616

    let speed = 0.03

    sprite.zIndex = 3

    if(index == 1){
        speed = 0.04
        sprite.rotation = 0.5
    }

    app.ticker.add(() => {
        sprite.rotation += speed
    })
})
MitchEff
  • 1,417
  • 14
  • 29
  • May I ask how large the textures are? – see sharper May 05 '20 at 02:12
  • Sure! Of the 7-8 textures, they're no larger than 500x500. I have a large background texture (~4000x800) as the scene can pan left/right, although this is completely static until the user initiates the pan. – MitchEff May 05 '20 at 03:37
  • Something is definitely screwy and I doubt it's Pixi. Admittedly I haven't used it, but there's no way rotating a few textures should use half your CPU cycles, if Pixi is implemented at all professionally, and I'm sure it is. Your code above looks totally fine too. I'd suggest using Chrome's performance profiler to see where your code spends its time. – see sharper May 06 '20 at 02:40
  • Can you submit working example on codepen / jsfiddle etc? Then we can try to debug it. – domis86 May 06 '20 at 12:49

1 Answers1

1

Preload your textures and try using cacheAsBitmap property. It takes snapshot of the display object resulting in better performance.

Here is an example: multiple textures example with cacheAsBitmap

Edit: You are using foreach loop. Loops can be very tricky, maybe use console.log and print a counter variable to see how many times the loop executes.

Jawad Khan
  • 343
  • 1
  • 7