Reputation: 2574
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
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