hanesjw
hanesjw

Reputation: 2574

What are some tips and tricks to increasing performance when using PIXI JS?

I created a fairly robust slot machine game using PIXIJS an I'm noticing some pretty substantial jitteriness during the animations. Even when I use third party tweening libraries like Greensock. If I'm not using tweening libraries for movement and animations I have a game loop that calculates the detla and adjusts the animations based off of that value. Both scenarios product some jittery performance. I notice a really large lag when my animations kick on when using PIXI.extras.AnimatedSprite.

I'm using sprite sheets for my animations. I'm also using sprite sheets for my non-animated images. I'm cramming all of my non-animated images into 2024x2024 sprite sheets using the multi-pack feature of TexturePacker. This results in my entire game needing 3 2024x2024 sprite sheets. In addition to 6 other sprite sheets I use for the animations. I'm wondering if these large sprite sheets are causing the problem. Is this the most efficient way to load and use images? Cramming them into sprite sheets? Or should I load each one individually using a url for each image?

I also notice my CPU fan goes absolutely NUTS when I run my game. It is on full power non stop. Sounds like a jet engine. My CPU usage percentage gets WAY up there while my game is running as well. Is this a red flag? What does that mean exactly?

If modifying my sprite sheets wont help performance does anyone know of any other tips or tricks I can look at to squeeze our some more performance or stop the jitteriness? Any red flags i should be looking our for or avoid completely? Any help would be much appreciated. Thank you in advance!

Upvotes: 3

Views: 4171

Answers (1)

themoonrat
themoonrat

Reputation: 642

The PIXI github page now has some performance tips on its wiki:

https://github.com/pixijs/pixi.js/wiki/Performance-Tips

https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips

Upvotes: 3

Related Questions